figma-make-website-builder
Installation
SKILL.md
Figma Make Website Builder
A structured 9-phase workflow for building production-ready websites using Claude paired with Figma Make. Claude handles architecture, logic, content strategy, and QA. Figma Make handles pixel-perfect UI, interactions, and deployment.
Quick Reference
| Phase | File | Role | Description |
|---|---|---|---|
| 1 | phase-1-architecture-strategy.md | Principal Architect | Site map, user journeys, component inventory, tech stack |
| 2 | phase-2-design-system.md | Design Director | Color, typography, spacing, 30+ component specs |
| 3 | phase-3-content-architecture.md | Conversion Copywriter | Headlines, CTAs, social proof, FAQ content |
| 4 | phase-4-component-logic.md | Frontend Architect | State machines, data flow, error handling, React structure |
| 5 | phase-5-prompt-engineering.md | AI Prompt Engineer | Convert specs into 5 Figma Make prompts |
| 6 | phase-6-animation-interaction.md | Motion Designer | Load sequences, scroll behaviors, micro-interactions |
| 7 | phase-7-responsive-strategy.md | Responsive Specialist | Breakpoints, layout transforms, content prioritization |
| 8 | phase-8-data-integration.md | Full-Stack Architect | Data models, APIs, auth, Supabase integration |
| 9 | phase-9-qa-optimization.md | QA Engineer | Performance, accessibility, SEO, security checklist |