docs: update all documentation and add AI tooling configs
- Rewrite README.md with current architecture, features and stack - Update docs/API.md with all current endpoints (corporate, BI, client 360) - Update docs/ARCHITECTURE.md with cache, modular queries, services, ETL - Update docs/GUIA-USUARIO.md for all roles (admin, corporate, agente) - Add docs/INDEX.md documentation index - Add PROJETO.md comprehensive project reference - Add BI-CCC-Implementation-Guide.md - Include AI agent configs (.claude, .agents, .gemini, _bmad) - Add netbird VPN configuration - Add status report Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,131 @@
|
||||
# Flow E: Generate HTML Prototype
|
||||
|
||||
**Activates when:** User chooses to generate HTML and screenshot it
|
||||
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
<output>**Perfect! Let's generate an HTML prototype based on your concept.**
|
||||
|
||||
This creates a working page that you can:
|
||||
- View in browser
|
||||
- Screenshot for documentation
|
||||
- Test responsive behavior
|
||||
- Use as starting point for development
|
||||
|
||||
The screenshot becomes your "sketch" for the specification.</output>
|
||||
|
||||
---
|
||||
|
||||
## Benefits
|
||||
|
||||
- ✅ Professional, pixel-perfect visualization
|
||||
- ✅ Tests actual layout behavior
|
||||
- ✅ Responsive/mobile preview available
|
||||
- ✅ Can iterate quickly
|
||||
- ✅ Screenshot becomes the "sketch"
|
||||
- ✅ Prototype is already built!
|
||||
|
||||
**Perfect for:**
|
||||
- Users who can describe but can't draw
|
||||
- Testing responsive layouts
|
||||
- Quick professional mockups
|
||||
- When prototype comes before final design
|
||||
|
||||
---
|
||||
|
||||
## SUBSTEP E1: Define Basic Structure
|
||||
|
||||
<output>**Based on your page concept:**
|
||||
|
||||
**Page:** {{page_name}}
|
||||
**Sections:** {{sections_list}}
|
||||
**Key Objects:** {{key_objects}}
|
||||
|
||||
I'll generate a clean HTML prototype with:
|
||||
- Semantic HTML structure
|
||||
- Basic Tailwind CSS styling (or vanilla CSS)
|
||||
- Placeholder content based on your descriptions
|
||||
- Responsive layout
|
||||
- Interactive elements (buttons, forms, etc.)</output>
|
||||
|
||||
<ask>**Any specific styling preferences?**
|
||||
|
||||
[A] Clean, minimal (default)
|
||||
[B] Modern SaaS style
|
||||
[C] Professional/corporate
|
||||
[D] Creative/bold
|
||||
[E] Match an existing site (describe)
|
||||
|
||||
Styling:</ask>
|
||||
|
||||
<action>Store styling_preference</action>
|
||||
|
||||
---
|
||||
|
||||
## SUBSTEP E2: Generate HTML
|
||||
|
||||
<action>
|
||||
**Generate HTML prototype:**
|
||||
|
||||
1. Create semantic HTML structure for each section
|
||||
2. Add Tailwind CSS classes (or vanilla CSS)
|
||||
3. Include placeholder content from user's descriptions
|
||||
4. Add interactive elements with proper attributes
|
||||
5. Make responsive (mobile-first)
|
||||
6. Include basic states (hover, focus, etc.)
|
||||
|
||||
File: `prototypes/{{page_slug}}-prototype.html`
|
||||
|
||||
Save to: `C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/prototypes/`
|
||||
</action>
|
||||
|
||||
---
|
||||
|
||||
## SUBSTEP E3: View and Capture
|
||||
|
||||
<output>**Prototype generated!** 🎉
|
||||
|
||||
**File location:**
|
||||
`C-UX-Scenarios/{{scenario_path}}/{{page_number}}-{{page_slug}}/prototypes/{{page_slug}}-prototype.html`
|
||||
|
||||
**Next steps:**
|
||||
|
||||
1. **Open in browser** - Double-click the HTML file
|
||||
2. **Review the layout** - Does it match your vision?
|
||||
3. **Test responsive** - Resize browser window
|
||||
4. **Take screenshots:**
|
||||
- Desktop view (full page)
|
||||
- Mobile view (if needed)
|
||||
- Key sections (close-ups)
|
||||
5. **Save screenshots** to `sketches/` folder
|
||||
|
||||
**Screenshot naming:**
|
||||
- `{{page_slug}}-desktop.jpg` - Full desktop view
|
||||
- `{{page_slug}}-mobile.jpg` - Mobile view
|
||||
- `{{page_slug}}-section-name.jpg` - Section close-ups</output>
|
||||
|
||||
<ask>**Ready to capture screenshots?**
|
||||
|
||||
Once you've saved the screenshots, type "done" and I'll analyze them:
|
||||
|
||||
Status:</ask>
|
||||
|
||||
<action>Wait for user confirmation</action>
|
||||
|
||||
---
|
||||
|
||||
## SUBSTEP E4: Iterate If Needed
|
||||
|
||||
<ask>**How does the prototype look?**
|
||||
|
||||
[A] Perfect - I've captured screenshots
|
||||
[B] Need adjustments - let me describe changes
|
||||
[C] Completely different direction - let's revise
|
||||
|
||||
Choice:</ask>
|
||||
|
||||
**If A:** Route to `workshop-page-process.md` for analysis
|
||||
**If B:** Update HTML based on feedback, return to E3
|
||||
**If C:** Return to main workshop STEP 1 to redefine concept
|
||||
Reference in New Issue
Block a user