From Sketch to Production ## Overview This workflow represents a fully integrated AI development pipeline that handles everything from initial concepts to deployed applications using orchestrated AI tools and MCPs (Model Context Protocol servers). ## The Stack ### **Core AI Tools** - **Claude Desktop** - Ideation, design planning, and implementation specification - **Claude Code CLI** - Autonomous development with design review integration - **Warp AI** - Terminal automation, quick coding, and macOS integration ### **Design Pipeline** - **Sketch/Wireframe** → **Claude Desktop** → **Figma Make** → **Production Design** - **Figma MCP** - Design inspection and code generation guidance ### **Development MCPs** - **Context7** - Real-time library documentation and current best practices - **Playwright** - Live UI testing, screenshots, and interaction validation - **Design Review Agent** - Professional-grade UI/UX evaluation ### **Data Integration** - **FileMaker MCP** - Campaign and client data - **PostgreSQL/Supabase MCPs** - Project-specific database selection - **Vector Supabase MCP** - Shared project memory across all AI tools ## The Workflow ### **1. Ideation to Design** ``` Rough Sketch → Claude Desktop Refinement → Figma Make → Clean Design ``` Claude Desktop bridges concepts and execution, translating ideas into actionable design specifications. ### **2. Design to Code** ``` Figma Design → Claude Desktop Prompt Generation → Claude Code CLI Implementation ``` Highly effective prompt translation eliminates design-code disconnect. ### **3. Development Execution** - **Context7** ensures current library usage - **Database MCPs** provide real data integration - **Playwright** validates UI with live testing - **Vector memory** maintains context across tools ### **4. Quality Assurance** - **Design Review Agent** provides systematic UI/UX validation - **Style guide compliance** ensures consistency - **Multi-viewport testing** guarantees responsiveness