bd495be965
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 12s
- Sidebar: dynamic brand-accent colors, brainstorm section restyled - AI chat general: popup panel with expand/collapse, hides when contextual AI open - AI chat contextual: tabs reordered (Actions first), X close button, height fix - Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.) - Global color cleanup: emerald/orange hardcoded → brand-accent dynamic - Brainstorm page: orange → brand-accent throughout - PageEntry animation component added to key pages - Floating AI button: bg-brand-accent instead of hardcoded black - i18n: all 15 locales updated with new AI/billing keys - Billing: freemium quota tracking, BYOK, stripe subscription scaffolding - Admin: integrated into new design - AGENTS.md + CLAUDE.md project rules added
74 lines
2.5 KiB
Markdown
74 lines
2.5 KiB
Markdown
---
|
|
name: figma-integration
|
|
description: Code-to-Figma and Figma-to-code workflows for design review and visual iteration
|
|
---
|
|
|
|
# Figma Integration
|
|
|
|
**Goal:** Send code implementations to Figma for design review, documentation, and visual iteration
|
|
|
|
**Your Role:** Guide the agent through specification-driven Figma export using html.to.design MCP Server
|
|
|
|
---
|
|
|
|
## INITIALIZATION
|
|
|
|
### Design Log
|
|
Read `{output_folder}/_progress/00-design-log.md`. Check Current and Backlog for context.
|
|
|
|
|
|
## WHEN TO USE
|
|
|
|
Send code to Figma when:
|
|
- Component states need visual documentation (hover, active, disabled, etc.)
|
|
- Design system components require Figma library representation
|
|
- Prototype pages need designer review and feedback
|
|
- Visual adjustments are easier to iterate in Figma than code
|
|
- Design-code parity documentation is needed
|
|
|
|
---
|
|
|
|
## STEP PROCESSING RULES
|
|
|
|
1. **READ COMPLETELY**: Always read the entire step file before action
|
|
2. **FOLLOW SEQUENCE**: Execute all sections in order
|
|
3. **WAIT FOR INPUT**: Halt at menus and wait for user selection
|
|
|
|
---
|
|
|
|
## STEPS
|
|
|
|
Execute steps in `./steps-f/`:
|
|
|
|
| Step | File | Purpose | Time |
|
|
|------|------|---------|------|
|
|
| 01 | step-01-connection-check.md | Verify MCP connection, guide setup | ~5-10 min |
|
|
| 02 | step-02-identify-export-type.md | Determine export type | ~2-3 min |
|
|
| 03 | step-03-prepare-specifications.md | Find/create specs with OBJECT IDs | ~5-15 min |
|
|
| 04 | step-04-generate-validate.md | Generate Figma-compatible HTML | ~5-10 min |
|
|
| 05 | step-05-execute-export.md | Execute export and verify | ~2-5 min |
|
|
|
|
---
|
|
|
|
## REFERENCE CONTENT
|
|
|
|
| Location | Purpose |
|
|
|----------|---------|
|
|
| `data/figma-plugin-setup.md` | Plugin installation and MCP verification |
|
|
| `data/figma-spec-preparation.md` | Code analysis and OBJECT ID generation |
|
|
| `data/figma-integration-guide.md` | Figma-to-code workflow guide |
|
|
| `data/figma-integration-summary.md` | Integration overview and concepts |
|
|
| `data/figma-designer-guide.md` | Guide for designers in Figma |
|
|
| `data/figma-mcp-integration.md` | MCP integration technical docs |
|
|
| `data/mcp-server-integration.md` | MCP server setup and configuration |
|
|
| `data/tools-reference.md` | Figma MCP tools and parameters |
|
|
| `data/when-to-extract-decision-guide.md` | Decision tree for when to use Figma integration |
|
|
| `data/prototype-to-figma-workflow.md` | Iterative refinement workflow |
|
|
|
|
---
|
|
|
|
## AFTER COMPLETION
|
|
|
|
1. Update design log
|
|
2. Suggest next action (visual refinement, design system update, or re-render)
|