figma-make-website-builder
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 |
Workflow Overview
More from 0xkynz/codekit
uiux-design-expert
UI/UX design expert specializing in modern design systems, visual styles, accessibility patterns, and CSS implementation. Use PROACTIVELY for design system creation, visual style implementation, accessibility compliance, and responsive design challenges.
16react-native-expo
React Native + Expo development expert for managed workflow, Expo Router, TypeScript, and mobile best practices. Use PROACTIVELY for Expo projects and rapid mobile development.
12data-visualization
Create charts, graphs, and visualizations from data. Use when the user needs to visualize data, create charts, or generate reports with graphics.
12git-expert
Git workflow expert for merge conflicts, branching strategies, history rewriting, repository recovery, and collaboration patterns. Use PROACTIVELY for complex git issues.
7pdf-processing
Extract text and tables from PDF files, fill forms, merge documents. Use when working with PDF files or when the user mentions PDFs, forms, or document extraction.
7nextjs
Next.js 15 expert for App Router, Server Components, Server Actions, TypeScript, shadcn/ui, and full-stack patterns. Use PROACTIVELY for Next.js projects, SSR/SSG applications, and full-stack React applications.
6