Stitch Skill: дизайн, код и генерация сайтов

--- name: stitch description: | Google Stitch design platform skill bundle. Covers design system extraction, prompt enhancement, iterative site building, React component conversion, Remotion walkthrough videos, and shadcn/ui component integration. Activate when user mentions Stitch, design-to-code, DESIGN.md, shadcn/ui, or iterative site generation. --- # Google Stitch — Skill Bundle This folder contains 6 sub-skills for working with [Google Stitch](https://stitch.withgoogle.com/), a design-to-code platform with an MCP server. Each sub-skill has its own `SKILL.md` with full instructions. ## Prerequisites Most skills require the **Stitch MCP Server** to be connected. The `shadcn-ui` skill works independently with the shadcn MCP server or CLI. --- ## 🔀 Pipeline Orchestration Protocol (READ THIS FIRST) > **YOU MUST follow this protocol.** Do not just load one sub-skill and stop. The Stitch bundle is a **pipeline** — each skill feeds into the next. Your job is to **guide the user through the full journey**, suggesting the next step after each skill completes. ### The Full Pipeline (Design → Code → Video) ``` ┌─────────────┐ ┌─────────────────┐ ┌──────────────┐ ┌───────────────┐ ┌──────────┐ │ design-md │ ──→ │ enhance-prompt │ ──→ │ stitch-loop │ ──→ │ react- │ ──→ │ remotion │ │ STEP 1 │ │ STEP 2 │ │ STEP 3 │ │ components │ │ STEP 5 │ │ │ │ │ │ │ │ STEP 4 │ │ │ │ Extract the │ │ Polish prompts │ │ Build pages │ │ Convert HTML │ │ Create a │ │ design │ │ with design │ │ iteratively │ │ to production │ │ video │ │ system │ │ tokens from │ │ using the │ │ React/TS │ │ showcase │ │ → DESIGN.md │ │ DESIGN.md │ │ baton system │ │ components │ │ of your │ │ │ │ → next-prompt │ │ → full site │ │ → src/ │ │ screens │ └─────────────┘ └─────────────────┘ └──────────────┘ └───────────────┘ └──────────┘ │ ┌─────┴──────┐ ▼ │ ┌──────────────┐ │ │ shadcn-ui │ │ │ COMPANION │ │ │ │ │ │ Add polished │ │ │ UI component │ │ │ library │ │ └──────────────┘ │ ``` ### How to Orchestrate **After completing ANY sub-skill, you MUST:** 1. Tell the user what was accomplished 2. Explain what the **next logical step** in the pipeline is 3. Ask if they want to continue to the next step 4. If yes, load that sub-skill's `SKILL.md` and proceed **Example flow:** ``` ✅ design-md complete → "Your DESIGN.md is ready. Next step: I can polish your first page prompt using enhance-prompt so Stitch generates a higher-quality result. Want to continue?" ✅ enhance-prompt complete → "Your prompt is optimized. Next step: I can send this to Stitch and start building pages with stitch-loop. Ready?" ✅ stitch-loop complete → "Your site pages are built. Two options now: 1. react-components — Convert these HTML pages into production React/TS 2. remotion — Create a walkthrough video showcasing the screens Which would you like?" ✅ react-components complete → "Your React components are ready. You might also want to: • Add shadcn/ui components for polished form inputs, buttons, dialogs • Create a remotion walkthrough video of the original designs Want either of those?" ``` ### Decision Tree: Where to Start Not every user starts at Step 1. Use this decision tree: | User says... | Start at | Then suggest... | |---|---|---| | "Build me a site with Stitch" | `design-md` (Step 1) | Full pipeline | | "I have a Stitch project, make it consistent" | `design-md` (Step 1) | `enhance-prompt` → `stitch-loop` | | "Generate a page with Stitch" | `enhance-prompt` (Step 2) | `stitch-loop` | | "I have Stitch HTML, make it React" | `react-components` (Step 4) | `shadcn-ui` for components | | "Make a video of my Stitch screens" | `remotion` (Step 5) | Done (standalone) | | "I need UI components for my React app" | `shadcn-ui` (Companion) | Done (standalone) | | "Improve my Stitch prompt" | `enhance-prompt` (Step 2) | `stitch-loop` | | "I already have DESIGN.md, build pages" | `stitch-loop` (Step 3) | `react-components` | ### When to Use Each Skill (Quick Reference) | Skill | Purpose | Input | Output | Requires | |---|---|---|---|---| | `design-md` | Extract design system from existing screens | Stitch project with screens | `DESIGN.md` | Stitch MCP | | `enhance-prompt` | Polish vague prompts into Stitch-optimized ones | User idea + optional `DESIGN.md` | Enhanced prompt / `next-prompt.md` | None (Stitch MCP optional) | | `stitch-loop` | Build multi-page sites iteratively | `DESIGN.md` + `next-prompt.md` | Full site in `site/public/` | Stitch MCP | | `react-components` | Convert Stitch HTML → production React/TS | Stitch screen HTML | React components in `src/` | Stitch MCP | | `remotion` | Create walkthrough videos from screenshots | Stitch project screenshots | Remotion project + `.mp4` | Stitch MCP + Remotion | | `shadcn-ui` | Add polished UI component library | Any React/Next.js project | Components in `components/ui/` | shadcn CLI or MCP | --- ## Sub-Skill Directory Read the linked `SKILL.md` for any sub-skill before using it. ### 1. `design-md` — Design System Extraction (STEP 1) [→ Read SKILL.md](design-md/SKILL.md) **What:** Analyzes Stitch project screens and generates a semantic `DESIGN.md` file documenting the visual design system (colors, typography, depth, layout, component styles). **When to use:** - Starting a new multi-page project and need a design system reference - Onboarding to an existing Stitch project - Need consistent design language across agent-generated screens **Outputs:** `DESIGN.md` file **➡️ Next step:** `enhance-prompt` — Use the `DESIGN.md` to craft polished prompts for page generation. --- ### 2. `enhance-prompt` — Prompt Enhancement (STEP 2) [→ Read SKILL.md](enhance-prompt/SKILL.md) **What:** Transforms vague UI ideas into polished, structured prompts optimized for Stitch generation. Adds UI/UX keywords, design system context, and page structure. **When to use:** - User gives a vague prompt like "make me a login page" - Previous Stitch generation produced poor results - Need to inject `DESIGN.md` tokens into a prompt **Outputs:** Enhanced prompt text or `next-prompt.md` file **➡️ Next step:** `stitch-loop` — Feed the enhanced prompt into the iterative build loop to generate the actual page. --- ### 3. `stitch-loop` — Iterative Build Loop (STEP 3) [→ Read SKILL.md](stitch-loop/SKILL.md) **What:** Autonomous baton-passing loop for building multi-page websites. Each iteration reads a task (`next-prompt.md`), generates a page, integrates it, updates docs, and writes the next task. **When to use:** - Building a complete multi-page site from scratch - Need autonomous, continuous page generation - Want a structured sitemap-driven build process **Depends on:** `design-md` (for `DESIGN.md`), `enhance-prompt` (for baton prompts) **Outputs:** Full site in `site/public/`, updated `SITE.md` **➡️ Next step:** Choose one or both: - `react-components` — Convert the generated HTML pages into production-ready React/TypeScript components. - `remotion` — Create a walkthrough video showcasing the finished screens. --- ### 4. `react-components` — Design to React (STEP 4) [→ Read SKILL.md](react-components/SKILL.md) **What:** Converts Stitch-generated HTML into modular React/TypeScript components with proper props interfaces, mock data layers, and AST-based validation. **When to use:** - Converting a Stitch screen into production React code - Need type-safe, modular component extraction from HTML - Want automated validation of component architecture **Outputs:** React components in `src/`, mock data in `src/data/mockData.ts` **➡️ Next step:** Consider: - `shadcn-ui` — Replace custom UI primitives (buttons, inputs, dialogs) with shadcn/ui components for a polished, accessible component library. - `remotion` — Create a walkthrough video if you haven't already. --- ### 5. `remotion` — Walkthrough Videos (STEP 5) [→ Read SKILL.md](remotion/SKILL.md) **What:** Generates walkthrough videos from Stitch project screenshots using Remotion, with smooth transitions, zoom effects, and text overlays. **When to use:** - Need a video showcase of designed screens - Want to create a professional app walkthrough - Building a demo reel from Stitch designs > **Note:** For general Remotion work (not Stitch-specific), use the main `remotion` skill instead — it has 25+ rule files from Remotion's official repo. **Outputs:** Remotion project + rendered `.mp4` **➡️ This is typically the final step in the pipeline.** No automatic next step, but you can suggest sharing/publishing the video. --- ### 6. `shadcn-ui` — Component Library (COMPANION) [→ Read SKILL.md](shadcn-ui/SKILL.md) **What:** Expert guidance for integrating shadcn/ui components — discovery, installation, customization, variants, blocks, and accessibility. Works with the shadcn MCP server or CLI. **When to use:** - Setting up shadcn/ui in a new project - Installing or customizing shadcn components - Building forms, data tables, auth layouts, or dashboards - Need component variant patterns with `cva` - After `react-components` — replace custom primitives with shadcn/ui > **Note:** This skill works independently of Stitch. It's useful for any React/Next.js project. Think of it as a **companion skill** that plugs in alongside the main pipeline, especially after `react-components`. **Outputs:** Installed components in `components/ui/`, configured `components.json` --- ## Typical Workflows ### Full Pipeline (New Project) ``` 1. design-md → Analyze an existing screen → get DESIGN.md 2. enhance-prompt → Write a prompt for the next page → inject design tokens 3. stitch-loop → Generate page → integrate → write next baton → repeat 4. react-components → Convert final HTML pages to production React 5. remotion → Create a walkthrough video of the finished product ``` ### Quick Build (One Page) ``` 1. enhance-prompt → Polish the user's idea into a great prompt 2. Generate directly with Stitch MCP → get HTML 3. react-components → Convert to React (optional) ``` ### Design System Only ``` 1. design-md → Document an existing project's visual language ``` ### Video Only ``` 1. remotion → Create a walkthrough video from existing Stitch screenshots ``` ### Component Library Only ``` 1. shadcn-ui → Set up and customize shadcn/ui components ``` ## Standalone Usage - **`shadcn-ui`** — Use anytime for React/Next.js UI component work (no Stitch needed) - **`design-md`** — Use standalone to document any project's design system - **`enhance-prompt`** — Use standalone to improve any UI generation prompt ## Acknowledgements - Based on [stitch-skills](https://github.com/google-labs-code/stitch-skills) - This is not an officially supported Google product. This project is not eligible for the [Google Open Source Software Vulnerability Rewards Program](https://bughunters.google.com/open-source-security).