Core Idea
The author's design philosophy, what sets this apart from peer projects, and quick notes on the key workflows. Skill names mentioned in the text auto-link to their detail pages.
Stitch Design Skills is a collection of Agent Skills (following the Agent Skills standard) that extend coding agents (Codex, Claude Code, Cursor, etc.) with Google Stitch design/build workflows. It is organized into three plugins:
Skills are composable and depend on the Stitch MCP server. Typical flow: enhance prompt → generate/edit design in Stitch → extract/manage DESIGN.md → upload assets → build to target framework. Install via plugin marketplace or selective npx skills add. Best practice: include all inter-dependencies when installing selectively.
Skill Relationships
Skill → Skill usage relationships, with cross-layer references. Same color blocks indicate the same skill form.
Skill Composition
Each skill is designed for a specific kind of caller — some only fire when you name them, others load automatically when the model judges them relevant. The split below summarises both modes at a glance.
These skills only fire when you call them by name. The agent will not load them on its own — they stay inert until invoked.
These skills are loaded automatically by the agent when it judges the context relevant. You usually don't need to call them yourself.
Skill List
Analyzes Stitch projects via MCP tools to synthesize a semantic design system into DESIGN.md. It extracts colors, typography, and layout from screens and translates technical values into descriptive language. Output is a source-of-truth file that improves Stitch prompt consistency and new screen alignment.
Transforms vague UI ideas into polished, Stitch-optimized prompts by assessing input, injecting design system context, and applying keyword and structure enhancements. Produces structured prompts that improve Stitch generation quality and consistency.
Converts Stitch designs into production React+Vite dashboards using TanStack Query and DESIGN.md tokens. Provides HTML-to-React mapping, Web3-ready patterns, and accessibility checks. Output is a structured, token-accurate, accessible frontend project.
Generates walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays. Retrieves screens via Stitch MCP, builds React-based Remotion compositions, and renders MP4/WebM. Value: turns static designs into engaging video demos for pitches and documentation.
Expert guidance for integrating and building apps with shadcn/ui components. Provides component discovery via MCP tools, CLI installation, customization with Tailwind and cva, and accessibility best practices. Delivers correctly configured, owned, and customizable React UI with reduced errors and faster development.
Teaches agents to iteratively build websites using Stitch via an autonomous baton-passing loop. Method: read baton task, generate screen with Stitch MCP, integrate HTML, update docs and next baton. Value: continuous, consistent multi-page site generation with persisted metadata and orchestration-agnostic automation.
Converts existing frontend code into a Stitch Design by orchestrating extract-static-html, extract-design-md, manage-design-system, and upload-to-stitch. Produces a Stitch project with standalone HTML and a DESIGN.md design system for iterative improvement.
Analyzes frontend source code to extract a comprehensive design system into DESIGN.md without building the app. It detects framework, maps tree, reads references, then extracts colors, typography, components and layout from source files. Output is a Stitch-ready design doc for audits or migration.
Extracts a self-contained static HTML file from any web app using Puppeteer snapshot, browser subagent, or MockPage fallback. Inlines CSS and images as base64. Produces portable HTML for design extraction or archiving with zero framework lock-in.
Creates and edits Stitch design screens from text, images, or mockups via MCP tools, and generates variants. Uses prompt enhancement pipeline with design mappings and keywords, delegates design system management, downloads assets locally. Produces structured UI designs with metadata for iterative refinement.
Creates a project design-system source of truth in Stitch from screens or descriptions. Uses MCP tools and upload-to-stitch script to generate DESIGN.md, create/update design system, and apply to screens. Ensures consistent visual language across all future UI work.
Transforms Google Stitch designs into clean, modular React components via a mandatory 4-phase workflow (retrieve, extract style, enforce architecture, execute). Uses fetch script and validation to ensure typed, theme-mapped, navigable code that aligns with Stitch designs.
Transforms Stitch web designs into production-ready React Native code via mandatory phased workflow: fetch screens via MCP/script, extract theme tokens, map HTML to RN components with atomic design and type safety. Outputs modular, accessible RN source aligned to design system.
Uploads local images, HTML, and markdown to a Stitch project via a Python script that sends files over HTTP, bypassing MCP base64 token limits. Key steps: find projectId, extract API key, confirm with user, run script. Value: enables large asset uploads to Stitch that models cannot do via MCP directly.
Generates agent-friendly DESIGN.md files for Google Stitch that enforce premium anti-generic UI standards via strict typography, calibrated color, asymmetric layouts, and micro-motion. Method: translate frontend engineering directives into Stitch semantic rules with values and anti-patterns. Value: single source of truth for prompting non-generic, high-taste interfaces.
