FlowStitch is an end-to-end AI design team that transforms single-sentence prompts into fully deployed, multi-page React websites with self-correcting quality loops.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install flowstitch
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install flowstitch using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is FlowStitch?
FlowStitch functions as a comprehensive autonomous agent within the Openclaw Skills ecosystem, bridging the gap between raw AI generation and production deployment. By leveraging the Google Stitch MCP server, it manages the entire lifecycle of web development—from initial brand kit synthesis and competitive design analysis to high-fidelity screen generation and Vercel deployment.
The skill distinguishes itself through a unique self-correction mechanism called the Quality Loop. This ensures that every generated screen isn't just a static mockup, but a refined UI that adheres to strict design system DNA, accessibility standards (WCAG AA), and modern technical architectures like Tailwind CSS and shadcn/ui.
FlowStitch Use Cases
- Rapidly shipping SaaS landing pages or startup marketing sites from a single concept.
- Reverse-engineering competitor design languages to build superior, differentiated web products.
- Automating the creation of data-dense admin dashboards with KPI cards, charts, and filtered tables.
- Generating native-feeling mobile app screens with proper touch ergonomics and safe-area considerations.
- Converting existing design mockups into modular, typed React/TypeScript component libraries.
How FlowStitch Works
- Intent Extraction: The agent parses the user prompt to identify product goals, audience vibes, and required page sets.
- Design Synthesis: It creates a visual DNA file (DESIGN.md) by either analyzing a logo, a competitor URL, or an initial generated screen.
- Autonomous Build Loop: Using a baton-passing pattern, the skill iterates through the sitemap, generating and refining up to 5-6 pages.
- Quality Evaluation: Each page undergoes up to 3 passes of evaluation against the design system, scoring fidelity, typography, and layout.
- React Export: The verified HTML/Tailwind output is transformed into modular, clean React components with typed props.
- Live Deployment: The final build is automatically pushed to Vercel, Netlify, or GitHub Pages, returning a live production URL.
FlowStitch Setup
To utilize FlowStitch as part of your Openclaw Skills library, you must have the Stitch MCP server configured:
# Verify if the Stitch MCP toolset is active
list_tools | grep -i stitch
# If missing, add the provider via mcporter
mcporter add stitch
# Prepare the local project environment
mkdir -p .stitch/designs site/public
FlowStitch Data Schema & Taxonomy
FlowStitch organizes project data and visual DNA through a structured file taxonomy:
| File Path | Description |
|---|---|
.stitch/DESIGN.md |
The core design system: colors, typography, and UI geometry. |
.stitch/SITE.md |
The project roadmap containing the mission, audience, and sitemap tracking. |
.stitch/metadata.json |
Technical project mapping, including projectId and screen specific metadata. |
.stitch/quality-log.json |
Records the scoring and refinement history for each generated screen. |
src/components/ |
The final output folder for exported React/TypeScript components. |
FlowStitch Advanced Features
- Competitive Intelligence Scraper: Automatically extracts CSS variables and layout patterns from any URL to inform your design system.
- Brand Kit Import: Generates a full color palette and typography scale from a single logo image or brand adjective.
- Baton-Passing Loop: Enables multi-agent or multi-session continuity by writing current task states to next-prompt.md.
- Remotion Walkthroughs: Generates professional mp4 video walkthroughs of the finished screens directly from the project assets.
- Deep shadcn/ui Integration: Layers accessible, production-grade components on top of AI-generated layouts for enterprise-ready results.
SKILL.md
Loading
Related Openclaw Skills
ChartGen AI
ChartGen is a powerful AI-driven skill for creating visual charts, dashboards, and automated data reports from spreadsheets or text.
UltraMsg for AI Agents
A powerful integration for AI agents to automate WhatsApp messaging and chat management through the UltraMsg API.
9ma-mata-human
A binary-based tool for generating free digital human videos with lip-sync capabilities based on text and gender inputs.
Jiuma Mata Human Free (Legacy)
A legacy AI digital human generation skill that has since been migrated to a new repository.
Stock-Analyzer
A specialized AI skill for analyzing A-share stocks and ETFs using technical indicators to provide trend signals, scores, and real-time market snapshots.
Graceblocks Integration
A powerful integration skill that allows AI agents to interact with Graceblocks no-code datasets, organizations, and workflows through the Membrane framework.
Featured*
