Hour-Long AI Workflow: From Hand-Written Brief to Live Product Site
A practical pipeline using Moonchild, MCP, and Claude Code to design and deploy a full product website in about 60 minutes, claiming $9k/month revenue.
Practical Summary
This post outlines a reproducible workflow where a solo creator combines a hand-written brief, AI-driven design generation, structured data handoff via MCP, and AI code generation to build and ship a complete product site in roughly an hour. It's a case study in using specialized AI tools for rapid prototyping and deployment, potentially reducing dependency on agencies or multi-person teams.
Why It Matters
For developers, designers, and solopreneurs, this workflow demonstrates how to integrate multiple AI tools to drastically compress the design-to-deployment cycle. It highlights practical cost and time savings, offers a model for tool selection and handoff, and provides a trackable metric for business impact (revenue per site build time).
Step 1: Write the Project Brief by Hand
Start with a concise, handwritten brief defining the site's purpose and key elements. This manual step is described as taking about 5 minutes and sets the foundation for the AI-assisted design and build phases.
Step 2: Generate the Design System and Screens with Moonchild
Use the AI tool Moonchild to create a cohesive design system and then generate all the necessary UI screens from that system. This step reportedly takes around 20 minutes and establishes the visual and structural source for the site.
Step 3: Pass Structured Design Data via MCP
Employ the Model Context Protocol (MCP) to hand off the design assets to Claude not as an image or screenshot, but as actual structured data—colors, components, and layout tokens. This allows the AI coding model to understand the design precisely.
Step 4: Build the Live App with Claude Code
Use a Claude Code session to read the structured design tokens provided by MCP and build the functional, live web application. This step is reported to take approximately 20 minutes.
Step 5: Review for Design Drift
Run a second, separate Claude session to review the built application for any drift from the original design intent. This quality assurance step is said to take about 10 minutes, ensuring consistency from the first screen to the last.