메뉴
Structured 9-phase workflow for building production-ready websites using Claude (architecture, logic, reasoning) paired with Figma Make (UI, interactions, deployment). Use when planning, designing, or building a website with Figma Make.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Guide for working with AGENTS.md — the open standard for AI coding agent configuration. Use when creating, updating, or optimizing AGENTS.md files, or when onboarding a project to multi-agent workflows.
Better Auth integration expert for TypeScript authentication — server config, client setup, database adapters, OAuth providers, plugins (2FA, organizations), session management, and security hardening. Use when adding auth to a project, configuring Better Auth, implementing login/signup flows, setting up OAuth, enabling 2FA, or securing auth endpoints.
Domain-Driven Design with Clean Architecture — framework-agnostic patterns for entities, value objects, aggregates, use cases, and the dependency rule. Use PROACTIVELY when designing domain models, implementing bounded contexts, structuring layered architectures, separating business logic from infrastructure, or applying DDD tactical patterns in any language or framework.
Workflow orchestration for backend projects (API routes, services, models). Structured phases — Plan, Code, Review, Test — with memory-bank integration for session continuity.
Workflow orchestration for CLI projects (commander, yargs, oclif). Structured phases — Plan, Code, Review, Test — with memory-bank integration for session continuity.
Workflow orchestration for frontend projects (React, Vue, Svelte, components, CSS). Structured phases — Plan, Design, Code, Review, Test — with memory-bank integration for session continuity.
| name | figma-make-website-builder |
| description | Structured 9-phase workflow for building production-ready websites using Claude (architecture, logic, reasoning) paired with Figma Make (UI, interactions, deployment). Use when planning, designing, or building a website with Figma Make. |
| alwaysApply | false |
| metadata | {"author":"codekit","tags":["figma","website","design","workflow","production"]} |
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.
| 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 |
Phase 1-4 (Claude) Phase 5 (Bridge) Phase 6-8 (Claude) Phase 9 (Review Loop)
┌─────────────────┐ ┌──────────────┐ ┌─────────────────┐ ┌──────────────────┐
│ 1. Architecture │ │ 5. Convert │ │ 6. Animation │ │ 9. QA Checklist │
│ 2. Design System│───▶│ specs to │────▶│ 7. Responsive │───▶│ ↕ iterate │
│ 3. Content │ │ Figma Make │ │ 8. Data Layer │ │ Figma Make edits │
│ 4. Logic │ │ prompts │ │ │ └──────────────────┘
└─────────────────┘ └──────────────┘ └─────────────────┘
| Problem | Start With |
|---|---|
| Starting a new website from scratch | Phase 1 — Architecture |
| Need a design system or brand tokens | Phase 2 — Design System |
| Writing website copy and CTAs | Phase 3 — Content |
| Building interactive components (forms, calculators) | Phase 4 — Component Logic |
| Ready to prompt Figma Make | Phase 5 — Prompt Engineering |
| Adding animations and interactions | Phase 6 — Animation |
| Making a site responsive | Phase 7 — Responsive |
| Connecting a database or API | Phase 8 — Data Integration |
| Reviewing and optimizing before launch | Phase 9 — QA |
Run phases sequentially — each phase's output feeds the next. You can also jump to individual phases for specific tasks. When running the full workflow, provide the website type (portfolio, SaaS, e-commerce, etc.) and brand attributes (minimal, bold, luxury, playful) at Phase 1 to propagate context through all subsequent phases.