DOCSEARCHbyAlgolia
Submit Docs

Stitch Design Skills

repository·main·Indexed 27 days ago

https://github.com/google-labs-code/stitch-skills

A collection of agent skills and plugins for Google Stitch following the Agent Skills open standard. It enables coding agents to perform design-to-code workflows, manage design systems, and generate UI components. Included skills feature conversion to React, React Native, and React + Vite dashboards, as well as integrations for shadcn/ui, Remotion video walkthroughs, design system documentation (design-md), and prompt enhancement.

Tokens
44.2K
Snippets
90
Records
208
Agent score
93%

What's inside stitch-skills

  1. Understand the Enhance Prompt Skill workflow

    main

    The enhance-prompt skill follows a specific pipeline to transform basic user input into high-fidelity Stitch prompts:

    1. Assessment: Evaluates input for missing elements like platform, structure, visual style, and colors.
    2. DESIGN.md Check: Checks for an existing design system to inject; if none is found, it recommends creating one.
    3. Enhancement: Applies UI/UX keywords, vibe adjectives, and structured page sections.
    4. Formatting: Outputs a Stitch-optimized prompt containing a design system block and a numbered structure.
    5. Delivery: Returns the enhanced text for review, with optional file output.

  2. Convert Stitch designs to React components

    main

    The stitch::react-components skill converts Stitch designs into modular Vite and React components or updates existing components to match the latest designs. The process follows a mandatory four-phase workflow: Retrieval, Style Extraction, Architectural Implementation, and Execution.

    Workflow Phases:

    1. Retrieval: Download design JSON and assets using MCP tools and the fetch-stitch.sh script.
    2. Style Extraction: Extract Tailwind tokens from the design HTML and sync them to resources/style-guide.json.
    3. Architecture: Implement modular components, custom hooks for logic, and mock data for decoupling, ensuring all components have a Readonly TypeScript interface named [ComponentName]Props.
    4. Execution: Draft components using resources/component-template.tsx, wire the application, and optionally run validation scripts.

  3. Tips for successful Remotion video generation

    main

    When using the Stitch to Remotion skill, follow these best practices:

    • Start simple: Begin with basic fade transitions before adding complex animations.
    • Follow Remotion patterns: Leverage Remotion's official skills and documentation.
    • Use manifest files: Keep screen data organized in JSON for easy updates.
    • Preview frequently: Use Remotion Studio to catch issues early.
    • Consider accessibility: Add captions, ensure text is readable, and use clear visuals.
    • Optimize for platform: Match video dimensions to your target platform (e.g., YouTube, social media).

  4. Format the Baton file (next-prompt.md)

    main

    The baton file (next-prompt.md) acts as the communication mechanism between loop iterations, instructing the next agent on what to build. It must follow a specific format consisting of a YAML frontmatter block and a Markdown body.

    Format Structure:

    1. Frontmatter (YAML): Contains the page field.
    2. Body (Markdown): Contains the Stitch prompt, which must include a one-line description, a Design System block, and a Page Structure.
    ---
page: <filename-without-extension>
---
<prompt-content>

  5. Quick Start: Initialize shadcn/ui in New or Existing Projects

    main

    For New Projects

    Create a Next.js project and initialize shadcn/ui:

    npx create-next-app@latest my-app
cd my-app
npx shadcn@latest init

# Add components
npx shadcn@latest add button
npx shadcn@latest add card

    For Existing Projects

    Initialize shadcn/ui and follow the prompts to configure style, base color, CSS variables, and import aliases:

    npx shadcn@latest init

# Add your first component
npx shadcn@latest add button
    npx create-next-app@latest my-app
cd my-app
npx shadcn@latest init

npx shadcn@latest add button
npx shadcn@latest add card

  6. Retrieve Stitch project assets and metadata

    main

    To analyze an existing Stitch project, follow these steps using Stitch MCP tools:

    1. Find Project ID: Use list_projects to locate your target projectId.
    2. Find Screens: Use list_screens with the projectId to identify representative screens (e.g., "Home", "Main Dashboard").
    3. Fetch Metadata: Call get_screen for a specific screen to retrieve the screenshot.downloadUrl and htmlCode.downloadUrl.
    4. Download Assets: Use read_url_content to fetch the actual HTML code from the provided URL.

  7. Convert Stitch designs to React Native components

    main

    Use the stitch::react-native skill to transform Stitch web designs into production-ready React Native code. This process involves four mandatory phases: retrieval/networking, theme extraction, architectural mapping, and execution.

    Key Requirements:

    • Mandatory Phases: You must complete all phases (Retrieval, Theme, Architecture, Execution) without skipping steps.
    • Theme Extraction: You must extract tokens from the HTML <head> (Tailwind config) and save them to src/theme.ts. Hardcoding hex codes is strictly prohibited.
    • Component Architecture: Use Atomic Design (atoms, molecules, organisms) and isolate logic into custom hooks in src/hooks/.
    • Type Safety: Every component must export a TypeScript interface named [ComponentName]Props with readonly properties.
    • Data Decoupling: Move all static text and URLs to src/data/mockData.ts.

  8. Generate design variants

    main

    Explore alternative layouts, color schemes, or content variations of an existing screen using the generate_variants tool.

    Variant Options:

    • variantCount: 1–5 variants (default: 3).
    • creativeRange: REFINE (subtle), EXPLORE (balanced), or REIMAGINE (radical).
    • aspects: Array of dimensions to focus on: LAYOUT, COLOR_SCHEME, IMAGES, TEXT_FONT, TEXT_CONTENT. Leave empty for all.
    {
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Describe the direction for variants]",
  "variantOptions": {
    "variantCount": 3,
    "creativeRange": "EXPLORE",
    "aspects": ["LAYOUT", "COLOR_SCHEME"]
  }
}

  9. Initialize a new project with the SITE.md template

    main

    When setting up a new project for the build loop, create a SITE.md file. This file acts as the project's "Long-Term Memory" and should be read by the agent before every iteration to maintain project continuity.

    Key sections to populate include:

    • Core Identity: Project name, Stitch Project ID, mission, audience, and voice.
    • Visual Language: Aesthetic keywords (Primary, Secondary, Tertiary) to guide prompting.
    • Architecture & File Structure: Define the root (e.g., site/public/) and asset flow (e.g., queue/ → Validate → site/public/).
    • Live Sitemap: A checklist of existing pages to prevent duplication.
    • The Roadmap: A backlog of High and Medium priority tasks.
    • Creative Freedom Guidelines: Instructions for innovation when the backlog is empty.
    • Rules of Engagement: Operational rules, such as updating next-prompt.md before completion.
    # Project Vision & Constitution

> **AGENT INSTRUCTION:** Read this file before every iteration. It serves as the project's "Long-Term Memory."

## 1. Core Identity
* **Project Name:** [Your project name]
* **Stitch Project ID:** [Your Stitch project ID]
* **Mission:** [What the site achieves]
* **Target Audience:** [Who uses this site]
* **Voice:** [Tone and personality descriptors]

## 2. Visual Language
*Reference these descriptors when prompting Stitch.*

* **The "Vibe" (Adjectives):**
    * *Primary:* [Main aesthetic keyword]
    * *Secondary:* [Supporting aesthetic]
    * *Tertiary:* [Additional flavor]

## 3. Architecture & File Structure
* **Root:** `site/public/`
* **Asset Flow:** Stitch generates to `queue/` → Validate → Move to `site/public/`
* **Navigation Strategy:** [How nav works]

## 4. Live Sitemap (Current State)
*Update this when a new page is successfully merged.*

* [x] `index.html` - [Description]
* [ ] `about.html` - [Description]

## 5. The Roadmap (Backlog)
*Pick the next task from here if available.*

### High Priority
- [ ] [Task description]
- [ ] [Task description]

### Medium Priority
- [ ] [Task description]

## 6. Creative Freedom Guidelines
*When the backlog is empty, follow these guidelines to innovate.*

1. **Stay On-Brand:** New pages must fit the established vibe
2. **Enhance the Core:** Support the site mission
3. **Naming Convention:** Use lowercase, descriptive filenames

### Ideas to Explore
*Pick one, build it, then REMOVE it from this list.*

- [ ] `stats.html` - [Description]
- [ ] `settings.html` - [Description]

## 7. Rules of Engagement
1. Do not recreate pages in Section 4
2. Always update `next-prompt.md` before completing
3. Consume ideas from Section 6 when you use them

  10. Sync design tokens to resources/style-guide.json

    main

    Before building components, you must extract design tokens from the downloaded Stitch HTML files to ensure the React application uses the correct theme.

    1. Open the downloaded HTML files and locate the tailwind.config object within the <head> <script> block.
    2. Extract color tokens, font families, spacing, border radius, and typography tokens.
    3. Overwrite resources/style-guide.json with these extracted tokens.

    Note: Do not use tokens from previous projects; the style guide must match the current Stitch project being converted.

  11. Identify Angular Responsive Patterns

    main

    To extract responsive design rules, check for the following:

    • CSS Media Queries: @media queries in styles.scss and component-specific style files.
    • Angular CDK: Usage of BreakpointObserver within TypeScript components.
    • Tailwind: Responsive utility prefixes (e.g., md:, lg:) if Tailwind is configured.
    • Angular Flex-Layout: Directives like fxLayout and fxFlex used within HTML templates.

  12. Best practices for Stitch Design Taste

    main

    To achieve high-quality semantic design system outputs using the taste-design skill, follow these principles:

    • Prioritize Atmosphere: Define the overall 'vibe' or aesthetic before detailing specific design tokens.
    • Pattern Recognition: Identify and document consistent patterns in spacing, sizing, and styling.
    • Semantic Naming: Name design elements (like colors) by their functional purpose rather than just their visual appearance.
    • Visual Hierarchy: Explicitly document how visual weight is used to communicate importance.
    • Define Anti-patterns: Explicitly encode 'bans' or anti-patterns to ensure the output maintains a premium, curated aesthetic.