# google-labs-code/stitch-skills architecture

> Architecture diagram of the GitHub repository google-labs-code/stitch-skills, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-10-07). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/google-labs-code/stitch-skills
- Repository: https://github.com/google-labs-code/stitch-skills

## Overview

Stitch Design Skills is a catalog of agent-invoked workflows for creating, extracting, managing, and reusing Stitch designs, plus generating code and media from them. The main design path converts frontend code into HTML, captures design-system guidance, and uploads assets to Stitch; separate skills generate or edit designs directly. Build skills turn Stitch screens into framework components or walkthrough videos, while utilities support prompt refinement and design documentation. Edges reflect README-documented workflows or the upload script’s explicit API call; unsampled skill instructions may contain additional sequencing not shown here.

Main entry points: [`plugins/stitch-design/skills/extract-static-html`](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-design/skills/extract-static-html) (Extract static HTML), [`plugins/stitch-design/skills/code-to-design`](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-design/skills/code-to-design) (Code to design), [`plugins/stitch-build/skills/remotion`](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/remotion) (Walkthrough video), [`plugins/stitch-design/skills/upload-to-stitch`](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-design/skills/upload-to-stitch) (Upload assets)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_design["Design workflows"]
  node_code_design["Code to design"]
  node_generate["Generate designs"]
  node_manage_system["Manage design system"]
  node_extract_design["Extract DESIGN.md"]
  node_upload_skill["Upload assets"]
  node_upload_script["Batch screen upload"]
end

subgraph group_build["Build workflows"]
  node_react_components["React components"]
  node_react_native["React Native"]
  node_dashboard["Vite dashboard"]
  node_remotion["Walkthrough video"]
  node_slide_template["Screen slide"]
  node_shadcn["shadcn/ui guidance"]
end

subgraph group_utilities["Design utilities"]
  node_design_md["Design documentation"]
  node_enhance_prompt["Enhance prompts"]
  node_site_md["Site specification"]
  node_stitch_loop["Iterative design loop"]
  node_taste_design["Design standards"]
end

subgraph group_capture["HTML capture"]
  node_extract_static["Extract static HTML"]
  node_snapshot["Browser snapshot<br/>[snapshot.ts]"]
  node_jsx_extract["JSX conversion"]
  node_inline_assets["Inline local assets<br/>[post_process.ts]"]
end

node_agent(("Coding agent"))
node_stitch["Stitch service"]
node_frontend["Frontend app"]

node_agent -->|"invokes"| node_code_design
node_agent -->|"invokes"| node_generate
node_agent -->|"invokes"| node_manage_system
node_agent -->|"invokes"| node_extract_design
node_agent -->|"invokes"| node_upload_skill
node_agent -->|"invokes"| node_extract_static
node_agent -->|"invokes"| node_react_components
node_agent -->|"invokes"| node_react_native
node_agent -->|"invokes"| node_dashboard
node_agent -->|"invokes"| node_remotion
node_agent -->|"invokes"| node_shadcn
node_agent -->|"invokes"| node_design_md
node_agent -->|"invokes"| node_enhance_prompt
node_agent -->|"invokes"| node_site_md
node_agent -->|"invokes"| node_stitch_loop
node_agent -->|"invokes"| node_taste_design
node_frontend -->|"captures from"| node_extract_static
node_code_design -->|"uses extraction"| node_extract_static
node_code_design -->|"uses design system"| node_extract_design
node_code_design -->|"uploads result"| node_upload_skill
node_extract_static -.->|"supports capture"| node_snapshot
node_extract_static -.->|"supports conversion"| node_jsx_extract
node_extract_static -.->|"supports inlining"| node_inline_assets
node_upload_skill -.->|"can use"| node_upload_script
node_upload_script -->|"posts screens"| node_stitch
node_manage_system -->|"applies themes"| node_stitch
node_generate -->|"creates or edits"| node_stitch
node_react_components -->|"converts screens"| node_stitch
node_react_native -->|"converts screens"| node_stitch
node_dashboard -->|"converts screens"| node_stitch
node_remotion -->|"uses project screens"| node_stitch
node_remotion -.->|"renders with"| node_slide_template

click node_code_design "https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-design/skills/code-to-design"
click node_generate "https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-design/skills/generate-design"
click node_manage_system "https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-design/skills/manage-design-system"
click node_extract_design "https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-design/skills/extract-design-md"
click node_upload_skill "https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-design/skills/upload-to-stitch"
click node_upload_script "https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py"
click node_extract_static "https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-design/skills/extract-static-html"
click node_snapshot "https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts"
click node_jsx_extract "https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-static-html/scripts/extract_inline_html.ts"
click node_inline_assets "https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-static-html/scripts/post_process.ts"
click node_react_components "https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/react-components"
click node_react_native "https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/react-native"
click node_dashboard "https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/react-vite-dashboard"
click node_remotion "https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/remotion"
click node_slide_template "https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/remotion/resources/screen-slide-template.tsx"
click node_shadcn "https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/shadcn-ui"
click node_design_md "https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/design-md"
click node_enhance_prompt "https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/enhance-prompt"
click node_site_md "https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/site-md"
click node_stitch_loop "https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/stitch-loop"
click node_taste_design "https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/taste-design"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_code_design,node_generate,node_manage_system,node_extract_design,node_upload_skill,node_upload_script,node_frontend toneBlue
class node_react_components,node_react_native,node_dashboard,node_remotion,node_slide_template,node_shadcn toneAmber
class node_design_md,node_enhance_prompt,node_site_md,node_stitch_loop,node_taste_design toneMint
class node_extract_static,node_snapshot,node_jsx_extract,node_inline_assets toneRose
class node_agent,node_stitch toneIndigo
```

## Components

### Design workflows

- [Code to design](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-design/skills/code-to-design): `plugins/stitch-design/skills/code-to-design`
- [Generate designs](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-design/skills/generate-design): `plugins/stitch-design/skills/generate-design`
- [Manage design system](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-design/skills/manage-design-system): `plugins/stitch-design/skills/manage-design-system`
- [Extract DESIGN.md](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-design/skills/extract-design-md): `plugins/stitch-design/skills/extract-design-md`
- [Upload assets](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-design/skills/upload-to-stitch): `plugins/stitch-design/skills/upload-to-stitch`
- [Batch screen upload](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py): `plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py`

### Build workflows

- [React components](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/react-components): `plugins/stitch-build/skills/react-components`
- [React Native](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/react-native): `plugins/stitch-build/skills/react-native`
- [Vite dashboard](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/react-vite-dashboard): `plugins/stitch-build/skills/react-vite-dashboard`
- [Walkthrough video](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/remotion): `plugins/stitch-build/skills/remotion`
- [Screen slide](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/remotion/resources/screen-slide-template.tsx): `plugins/stitch-build/skills/remotion/resources/screen-slide-template.tsx`
- [shadcn/ui guidance](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-build/skills/shadcn-ui): `plugins/stitch-build/skills/shadcn-ui`

### Design utilities

- [Design documentation](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/design-md): `plugins/stitch-utilities/skills/design-md`
- [Enhance prompts](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/enhance-prompt): `plugins/stitch-utilities/skills/enhance-prompt`
- [Site specification](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/site-md): `plugins/stitch-utilities/skills/site-md`
- [Iterative design loop](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/stitch-loop): `plugins/stitch-utilities/skills/stitch-loop`
- [Design standards](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-utilities/skills/taste-design): `plugins/stitch-utilities/skills/taste-design`

### HTML capture

- [Extract static HTML](https://github.com/google-labs-code/stitch-skills/tree/main/plugins/stitch-design/skills/extract-static-html): `plugins/stitch-design/skills/extract-static-html`
- [Browser snapshot](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts): `plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts`
- [JSX conversion](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-static-html/scripts/extract_inline_html.ts): `plugins/stitch-design/skills/extract-static-html/scripts/extract_inline_html.ts`
- [Inline local assets](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-static-html/scripts/post_process.ts): `plugins/stitch-design/skills/extract-static-html/scripts/post_process.ts`

### Other components

- **Coding agent**
- **Stitch service**
- **Frontend app**

## Connections

- Coding agent → Code to design: invokes (evidence: `README.md`)
- Coding agent → Generate designs: invokes (evidence: `README.md`)
- Coding agent → Manage design system: invokes (evidence: `README.md`)
- Coding agent → Extract DESIGN.md: invokes (evidence: `README.md`)
- Coding agent → Upload assets: invokes (evidence: `README.md`)
- Coding agent → Extract static HTML: invokes (evidence: `README.md`)
- Coding agent → React components: invokes (evidence: `README.md`)
- Coding agent → React Native: invokes (evidence: `README.md`)
- Coding agent → Vite dashboard: invokes (evidence: `README.md`)
- Coding agent → Walkthrough video: invokes (evidence: `README.md`)
- Coding agent → shadcn/ui guidance: invokes (evidence: `README.md`)
- Coding agent → Design documentation: invokes (evidence: `README.md`)
- Coding agent → Enhance prompts: invokes (evidence: `README.md`)
- Coding agent → Site specification: invokes (evidence: `README.md`)
- Coding agent → Iterative design loop: invokes (evidence: `README.md`)
- Coding agent → Design standards: invokes (evidence: `README.md`)
- Frontend app → Extract static HTML: captures from (evidence: `README.md`)
- Code to design → Extract static HTML: uses extraction (evidence: `README.md`)
- Code to design → Extract DESIGN.md: uses design system (evidence: `README.md`)
- Code to design → Upload assets: uploads result (evidence: `README.md`)
- Extract static HTML → Browser snapshot: supports capture
- Extract static HTML → JSX conversion: supports conversion
- Extract static HTML → Inline local assets: supports inlining
- Upload assets → Batch screen upload: can use
- Batch screen upload → Stitch service: posts screens (evidence: `plugins/stitch-design/skills/upload-to-stitch/scripts/upload_to_stitch.py`)
- Manage design system → Stitch service: applies themes (evidence: `README.md`)
- Generate designs → Stitch service: creates or edits (evidence: `README.md`)
- React components → Stitch service: converts screens (evidence: `README.md`)
- React Native → Stitch service: converts screens (evidence: `README.md`)
- Vite dashboard → Stitch service: converts screens (evidence: `README.md`)
- Walkthrough video → Stitch service: uses project screens (evidence: `README.md`)
- Walkthrough video → Screen slide: renders with