stitch-kit 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/AGENTS.md +139 -0
  2. package/CHANGELOG.md +86 -0
  3. package/README.md +167 -0
  4. package/agents/stitch-kit.md +93 -0
  5. package/bin/stitch-kit.mjs +430 -0
  6. package/docs/architecture.md +118 -0
  7. package/docs/color-prompt-guide.md +119 -0
  8. package/docs/mcp-naming-convention.md +64 -0
  9. package/docs/mcp-schemas/README.md +130 -0
  10. package/docs/mcp-schemas/apply_design_system.json +36 -0
  11. package/docs/mcp-schemas/create_design_system.json +78 -0
  12. package/docs/mcp-schemas/create_project.json +290 -0
  13. package/docs/mcp-schemas/delete_project.json +20 -0
  14. package/docs/mcp-schemas/edit_screens.json +46 -0
  15. package/docs/mcp-schemas/generate_screen_from_text.json +242 -0
  16. package/docs/mcp-schemas/generate_variants.json +77 -0
  17. package/docs/mcp-schemas/get_project.json +137 -0
  18. package/docs/mcp-schemas/get_screen.json +92 -0
  19. package/docs/mcp-schemas/list_design_systems.json +32 -0
  20. package/docs/mcp-schemas/list_projects.json +136 -0
  21. package/docs/mcp-schemas/list_screens.json +56 -0
  22. package/docs/mcp-schemas/update_design_system.json +32 -0
  23. package/docs/mcp-schemas/upload_screens_from_images.json +52 -0
  24. package/docs/prd-to-stitch-workflow.md +137 -0
  25. package/docs/skills-index.md +108 -0
  26. package/docs/tailwind-reference.md +207 -0
  27. package/package.json +41 -0
  28. package/skills/stitch-a11y/SKILL.md +428 -0
  29. package/skills/stitch-a11y/resources/audit-checklist.md +102 -0
  30. package/skills/stitch-animate/SKILL.md +371 -0
  31. package/skills/stitch-animate/resources/animation-patterns.md +248 -0
  32. package/skills/stitch-design-md/SKILL.md +215 -0
  33. package/skills/stitch-design-md/examples/DESIGN.md +54 -0
  34. package/skills/stitch-design-md/examples/usage.md +67 -0
  35. package/skills/stitch-design-md/scripts/fetch-stitch.sh +35 -0
  36. package/skills/stitch-design-system/SKILL.md +314 -0
  37. package/skills/stitch-design-system/resources/tokens-template.css +237 -0
  38. package/skills/stitch-html-components/SKILL.md +344 -0
  39. package/skills/stitch-html-components/resources/architecture-checklist.md +74 -0
  40. package/skills/stitch-html-components/scripts/fetch-stitch.sh +45 -0
  41. package/skills/stitch-loop/SKILL.md +183 -0
  42. package/skills/stitch-loop/examples/SITE.md +39 -0
  43. package/skills/stitch-loop/examples/next-prompt.md +24 -0
  44. package/skills/stitch-loop/examples/usage.md +77 -0
  45. package/skills/stitch-mcp-apply-design-system/SKILL.md +82 -0
  46. package/skills/stitch-mcp-create-design-system/SKILL.md +117 -0
  47. package/skills/stitch-mcp-create-project/SKILL.md +77 -0
  48. package/skills/stitch-mcp-delete-project/SKILL.md +62 -0
  49. package/skills/stitch-mcp-edit-screens/SKILL.md +121 -0
  50. package/skills/stitch-mcp-generate-screen-from-text/SKILL.md +102 -0
  51. package/skills/stitch-mcp-generate-screen-from-text/examples/desktop.md +53 -0
  52. package/skills/stitch-mcp-generate-screen-from-text/examples/mobile.md +71 -0
  53. package/skills/stitch-mcp-generate-variants/SKILL.md +124 -0
  54. package/skills/stitch-mcp-get-project/SKILL.md +67 -0
  55. package/skills/stitch-mcp-get-screen/SKILL.md +117 -0
  56. package/skills/stitch-mcp-get-screen/scripts/fetch-stitch.sh +35 -0
  57. package/skills/stitch-mcp-list-design-systems/SKILL.md +84 -0
  58. package/skills/stitch-mcp-list-projects/SKILL.md +77 -0
  59. package/skills/stitch-mcp-list-screens/SKILL.md +69 -0
  60. package/skills/stitch-mcp-update-design-system/SKILL.md +82 -0
  61. package/skills/stitch-mcp-upload-screens-from-images/SKILL.md +95 -0
  62. package/skills/stitch-mcp-upload-screens-from-images/scripts/encode-image.sh +43 -0
  63. package/skills/stitch-nextjs-components/SKILL.md +181 -0
  64. package/skills/stitch-nextjs-components/resources/architecture-checklist.md +65 -0
  65. package/skills/stitch-nextjs-components/resources/component-template.tsx +101 -0
  66. package/skills/stitch-nextjs-components/scripts/fetch-stitch.sh +45 -0
  67. package/skills/stitch-orchestrator/SKILL.md +337 -0
  68. package/skills/stitch-orchestrator/examples/workflow.md +173 -0
  69. package/skills/stitch-react-components/SKILL.md +236 -0
  70. package/skills/stitch-react-components/references/tailwind-to-react.md +117 -0
  71. package/skills/stitch-react-components/resources/architecture-checklist.md +34 -0
  72. package/skills/stitch-react-components/resources/component-template.tsx +35 -0
  73. package/skills/stitch-react-components/scripts/fetch-stitch.sh +35 -0
  74. package/skills/stitch-react-native-components/SKILL.md +333 -0
  75. package/skills/stitch-react-native-components/resources/architecture-checklist.md +74 -0
  76. package/skills/stitch-react-native-components/resources/component-template.tsx +104 -0
  77. package/skills/stitch-react-native-components/scripts/fetch-stitch.sh +45 -0
  78. package/skills/stitch-remotion/SKILL.md +280 -0
  79. package/skills/stitch-setup/SKILL.md +183 -0
  80. package/skills/stitch-shadcn-ui/SKILL.md +255 -0
  81. package/skills/stitch-skill-creator/SKILL.md +257 -0
  82. package/skills/stitch-skill-creator/references/output-patterns.md +71 -0
  83. package/skills/stitch-skill-creator/scripts/init_stitch_skill.py +229 -0
  84. package/skills/stitch-svelte-components/SKILL.md +282 -0
  85. package/skills/stitch-svelte-components/resources/architecture-checklist.md +62 -0
  86. package/skills/stitch-svelte-components/resources/component-template.svelte +193 -0
  87. package/skills/stitch-svelte-components/scripts/fetch-stitch.sh +36 -0
  88. package/skills/stitch-swiftui-components/SKILL.md +424 -0
  89. package/skills/stitch-swiftui-components/resources/architecture-checklist.md +83 -0
  90. package/skills/stitch-swiftui-components/resources/component-template.swift +131 -0
  91. package/skills/stitch-swiftui-components/resources/layout-mapping.md +155 -0
  92. package/skills/stitch-swiftui-components/scripts/fetch-stitch.sh +45 -0
  93. package/skills/stitch-ued-guide/SKILL.md +124 -0
  94. package/skills/stitch-ui-design-spec-generator/SKILL.md +115 -0
  95. package/skills/stitch-ui-design-spec-generator/examples/usage.md +79 -0
  96. package/skills/stitch-ui-design-variants/SKILL.md +127 -0
  97. package/skills/stitch-ui-prompt-architect/SKILL.md +196 -0
  98. package/skills/stitch-ui-prompt-architect/references/KEYWORDS.md +170 -0
@@ -0,0 +1,53 @@
1
+ # Desktop Screen Generation Examples
2
+
3
+ ## 1. SaaS Analytics Dashboard
4
+
5
+ **User request:** "Build a dashboard showing revenue and user growth."
6
+
7
+ ```json
8
+ {
9
+ "name": "generate_screen_from_text",
10
+ "arguments": {
11
+ "projectId": "3780309359108792857",
12
+ "prompt": "Desktop High-Fidelity analytics dashboard for a SaaS platform. Enterprise clean aesthetic. Light mode. Background: White (#ffffff). Primary: Indigo (#6366F1). Font: DM Sans.\n\nLeft sidebar navigation (200px): Logo top-left, nav items with icons (Overview, Projects, Reports, Settings), user avatar and name at bottom. Top bar: 'Analytics Overview' title, date range picker, 'Export' button.\n\nKPI row: 4 metric cards — Total Revenue ($142,800, +12% MoM), Active Users (8,420, +5%), Churn Rate (2.1%, -0.3%), Avg Session (4m 32s). Main chart: 'Monthly Recurring Revenue' line chart, last 12 months, indigo line with subtle fill. Bottom split: 'Top Performing Plans' bar chart left, 'Recent Signups' table right.",
13
+ "deviceType": "DESKTOP",
14
+ "modelId": "GEMINI_3_PRO"
15
+ }
16
+ }
17
+ ```
18
+
19
+ ---
20
+
21
+ ## 2. Admin Panel (Dark Mode)
22
+
23
+ **User request:** "Dark mode admin panel for server monitoring."
24
+
25
+ ```json
26
+ {
27
+ "name": "generate_screen_from_text",
28
+ "arguments": {
29
+ "projectId": "3780309359108792857",
30
+ "prompt": "Desktop High-Fidelity admin console for server monitoring. Developer aesthetic. Dark mode. Background: Zinc-900 (#18181B). Primary: Emerald (#10B981). Font: IBM Plex Mono.\n\nDense information layout. Top bar: 'System Status' title, 'All Systems Operational' badge in green. Main grid: 6 server status cards in 3-column grid — each card shows Server name, CPU gauge (%), Memory gauge (%), Uptime, Status indicator (green/red dot). Bottom panel: Terminal-style log stream with color-coded severity (ERROR in red, WARN in yellow, INFO in emerald).",
31
+ "deviceType": "DESKTOP",
32
+ "modelId": "GEMINI_3_PRO"
33
+ }
34
+ }
35
+ ```
36
+
37
+ ---
38
+
39
+ ## 3. SaaS Landing Page
40
+
41
+ **User request:** "Landing page for a project management tool."
42
+
43
+ ```json
44
+ {
45
+ "name": "generate_screen_from_text",
46
+ "arguments": {
47
+ "projectId": "3780309359108792857",
48
+ "prompt": "Desktop High-Fidelity landing page for 'Taskflow', a project management SaaS. Clean minimalist aesthetic. Light mode. Background: White (#ffffff). Primary: Violet (#7C3AED). Font: Inter.\n\nSticky top nav: Logo left, links center (Features, Pricing, Blog, Docs), 'Sign in' ghost button and 'Start free' primary button right. Hero: Large headline 'Ship projects faster, together', subtext 'The only PM tool your team will actually use', two CTA buttons ('Get started free' primary, 'See demo' ghost), hero mockup screenshot of dashboard. Features section: 3-column grid of feature cards with icon, title, description. Social proof: Logos row of known companies.",
49
+ "deviceType": "DESKTOP",
50
+ "modelId": "GEMINI_3_PRO"
51
+ }
52
+ }
53
+ ```
@@ -0,0 +1,71 @@
1
+ # Mobile App Screen Generation Examples
2
+
3
+ ## 1. Login Screen (Cyberpunk Style)
4
+
5
+ **User request:** "Cyberpunk login page for a mobile game."
6
+
7
+ ```json
8
+ {
9
+ "name": "generate_screen_from_text",
10
+ "arguments": {
11
+ "projectId": "3780309359108792857",
12
+ "prompt": "Mobile High-Fidelity login screen for a cyberpunk game 'NetRunner'. Neon aesthetic. Dark mode. Background: Deep black (#050505). Primary: Neon blue (#00D9FF). Font: Orbitron.\n\nCenter-aligned vertical stack. Header: Glitch-effect 'NETRUNNER' logo with horizontal scan-line overlay. Form: 'NetID' input field with neon blue glowing border, 'Passcode' input with eye-toggle icon, neon pink glow on focus. Primary CTA: Full-width 'JACK IN' button with animated neon border. Divider: 'OR CONNECT VIA' with subtle lines. OAuth row: Ghost buttons for Google and Discord. Footer: 'New agent? Register your ID' link in muted cyan.",
13
+ "deviceType": "MOBILE",
14
+ "modelId": "GEMINI_3_PRO"
15
+ }
16
+ }
17
+ ```
18
+
19
+ ---
20
+
21
+ ## 2. Social Media Feed
22
+
23
+ **User request:** "Instagram-style home feed."
24
+
25
+ ```json
26
+ {
27
+ "name": "generate_screen_from_text",
28
+ "arguments": {
29
+ "projectId": "3780309359108792857",
30
+ "prompt": "Mobile High-Fidelity home feed for a photo-sharing social app. Clean minimalist aesthetic. Light mode. Background: White (#ffffff). Primary: Pink (#EC4899). Font: Inter.\n\nTop bar: App logo left, search icon + DM icon right. Stories bar: Horizontal scroll of circular avatars with gradient rings — 'Your story' first, then Emma, Jake, Sophia, Carlos. Feed: Full-width post cards — user avatar + name + timestamp header, full-width photo, action bar (heart, comment, share, bookmark icons), like count 'Liked by Anna and 842 others', caption with 'more' link. Bottom nav: Home (active), Search, Reels, Shop, Profile icons.",
31
+ "deviceType": "MOBILE",
32
+ "modelId": "GEMINI_3_FLASH"
33
+ }
34
+ }
35
+ ```
36
+
37
+ ---
38
+
39
+ ## 3. E-commerce Product Detail
40
+
41
+ **User request:** "Product detail page for a sneaker store."
42
+
43
+ ```json
44
+ {
45
+ "name": "generate_screen_from_text",
46
+ "arguments": {
47
+ "projectId": "3780309359108792857",
48
+ "prompt": "Mobile High-Fidelity product detail screen for a premium sneaker store. Streetwear aesthetic. Light mode. Background: White (#ffffff). Primary: Black (#18181B). Font: Space Grotesk.\n\nTop: Back arrow + share icon. Hero: Full-width image carousel showing 'Air Max 90 OG' sneaker from multiple angles, dot indicators. Info section: Brand tag 'Nike', product name 'Air Max 90 OG White/Infrared', price '$140', 5-star rating '(1,247 reviews)'. Size selector: Row of size chips (US 7, 8, 9, 10, 11, 12) — 9 highlighted as selected, 7 greyed out (unavailable). Color options: 3 circular swatches. Description: Short collapsible text. Sticky bottom bar: 'Add to Cart' full-width black button, heart icon (save) to its left.",
49
+ "deviceType": "MOBILE",
50
+ "modelId": "GEMINI_3_PRO"
51
+ }
52
+ }
53
+ ```
54
+
55
+ ---
56
+
57
+ ## 4. Fitness Tracker Home
58
+
59
+ **User request:** "Home screen for a fitness app."
60
+
61
+ ```json
62
+ {
63
+ "name": "generate_screen_from_text",
64
+ "arguments": {
65
+ "projectId": "3780309359108792857",
66
+ "prompt": "Mobile High-Fidelity home screen for a fitness tracking app 'FlexOS'. Dark athletic aesthetic. Dark mode. Background: Zinc-900 (#18181B). Primary: Neon green (#22C55E). Font: DM Sans.\n\nTop: Greeting 'Good morning, Alex 👋', date subtitle. Today's goal ring: Large circular progress ring (67% complete), center shows '2,847 / 4,200 cal'. Quick stats row: 3 cards — Steps 8,432, Active Minutes 52, Water 6/8 cups. Workout recommendations: Horizontal scroll of workout cards — gradient thumbnail, workout name, duration, difficulty badge. Recent activity: List of today's logged exercises with icon, name, duration, calories. Bottom nav: Home (active), Workout, Nutrition, Progress, Profile.",
67
+ "deviceType": "MOBILE",
68
+ "modelId": "GEMINI_3_PRO"
69
+ }
70
+ }
71
+ ```
@@ -0,0 +1,124 @@
1
+ ---
2
+ name: stitch-mcp-generate-variants
3
+ description: Generates design variants of existing Stitch screens using the native variant API. Explore alternative layouts, color schemes, fonts, or content with configurable creativity levels.
4
+ allowed-tools:
5
+ - "stitch*:*"
6
+ ---
7
+
8
+ # Stitch MCP — Generate Variants
9
+
10
+ Generates alternative versions of existing screens using Stitch's native variant generation API. This is more efficient than the text-prompt approach (1 API call vs. 3) and offers fine-grained control over what aspects to vary.
11
+
12
+ ## Critical prerequisite
13
+
14
+ **Only use this skill when the user explicitly mentions "Stitch".**
15
+
16
+ You must have both a `projectId` AND at least one `screenId` of an existing screen. Variants are always based on an existing design — you can't generate variants from scratch.
17
+
18
+ ## When to use
19
+
20
+ - User wants to explore alternative versions of an existing screen
21
+ - After generation, user says "show me some variations" or "try different styles"
22
+ - The orchestrator's Step 5b offers "Generate variants"
23
+ - A/B testing — creating multiple options for stakeholder review
24
+
25
+ ## Call the MCP tool
26
+
27
+ ```json
28
+ {
29
+ "name": "generate_variants",
30
+ "arguments": {
31
+ "projectId": "3780309359108792857",
32
+ "selectedScreenIds": ["88805abc123def456"],
33
+ "prompt": "Explore different color schemes while keeping the layout structure",
34
+ "variantOptions": {
35
+ "variantCount": 3,
36
+ "creativeRange": "EXPLORE",
37
+ "aspects": ["COLOR_SCHEME", "IMAGES"]
38
+ },
39
+ "deviceType": "DESKTOP",
40
+ "modelId": "GEMINI_3_PRO"
41
+ }
42
+ }
43
+ ```
44
+
45
+ ## Parameter reference
46
+
47
+ ### `projectId` — numeric ID only, no prefix
48
+
49
+ ```
50
+ ✅ "3780309359108792857"
51
+ ❌ "projects/3780309359108792857"
52
+ ```
53
+
54
+ ### `selectedScreenIds` — array of numeric screen IDs
55
+
56
+ ```
57
+ ✅ ["88805abc123def456"]
58
+ ❌ ["projects/123/screens/88805abc123def456"]
59
+ ```
60
+
61
+ The source screen(s) to generate variants from.
62
+
63
+ ### `prompt` — optional guidance for variant direction
64
+
65
+ Provide context about what kind of variations the user wants. The `variantOptions` do the heavy lifting, but the prompt adds nuance.
66
+
67
+ ### `variantOptions` — controls what and how much to vary
68
+
69
+ | Field | Type | Values | Description |
70
+ |-------|------|--------|-------------|
71
+ | `variantCount` | int | 1–5 | Number of variants to generate |
72
+ | `creativeRange` | enum | `REFINE`, `EXPLORE`, `REIMAGINE` | How much to deviate from the original |
73
+ | `aspects` | array | See below | Which design aspects to vary |
74
+
75
+ #### `creativeRange` mapping from user language
76
+
77
+ | User says | → creativeRange | What it does |
78
+ |-----------|----------------|-------------|
79
+ | "subtle changes", "minor tweaks", "polish" | `REFINE` | Small refinements, stays close to original |
80
+ | "alternatives", "different options", "explore" | `EXPLORE` | Meaningful differences while keeping the concept |
81
+ | "radical", "completely different", "reimagine" | `REIMAGINE` | Major departures from the original design |
82
+
83
+ #### `aspects` — what to vary
84
+
85
+ | Value | Varies | Keeps stable |
86
+ |-------|--------|-------------|
87
+ | `LAYOUT` | Structure, spacing, component arrangement | Colors, fonts, content |
88
+ | `COLOR_SCHEME` | Colors, gradients, contrast | Layout, fonts, content |
89
+ | `IMAGES` | Photography, illustrations, icons | Layout, colors, text |
90
+ | `TEXT_FONT` | Typography, font choices, sizes | Layout, colors, content |
91
+ | `TEXT_CONTENT` | Copy, labels, placeholder text | Layout, colors, fonts |
92
+
93
+ You can combine aspects: `["LAYOUT", "COLOR_SCHEME"]` varies both simultaneously.
94
+
95
+ ### `deviceType` — optional
96
+
97
+ Same enum: `MOBILE`, `DESKTOP`, `TABLET`, `AGNOSTIC`
98
+
99
+ ### `modelId` — optional
100
+
101
+ | Value | Use when |
102
+ |-------|---------|
103
+ | `GEMINI_3_PRO` | Higher quality variants, complex designs |
104
+ | `GEMINI_3_FLASH` | Faster iteration, simpler screens |
105
+
106
+ ## Output
107
+
108
+ Returns new screens added to the project. Each variant appears as a separate screen in `list_screens`.
109
+
110
+ ## After generating variants
111
+
112
+ 1. Call `stitch-mcp-list-screens` to find all new variant screens
113
+ 2. Call `stitch-mcp-get-screen` for each to get screenshots
114
+ 3. Present side by side: "Here are your 3 variants: [screenshots]. Which one do you prefer?"
115
+ 4. Once the user picks a winner, offer:
116
+ - "Edit the chosen variant further?" → `stitch-mcp-edit-screens`
117
+ - "Convert to code?" → framework conversion workflow
118
+ - "Generate more variants from the winner?" → another `generate_variants` call
119
+
120
+ ## Anti-patterns
121
+
122
+ - **Never generate variants without an existing screen** — you need a source design
123
+ - **Never use `projects/ID` format** for projectId or screenId — both must be numeric
124
+ - **Never set `variantCount` above 5** — the API caps at 5
@@ -0,0 +1,67 @@
1
+ ---
2
+ name: stitch-mcp-get-project
3
+ description: Retrieves metadata for a specific Stitch project — title, theme, create/update time. Use to inspect a project before generating new screens. Do NOT use this if you already have a screenId — use stitch-mcp-get-screen instead.
4
+ allowed-tools:
5
+ - "stitch*:*"
6
+ ---
7
+
8
+ # Stitch MCP — Get Project
9
+
10
+ Retrieves full metadata for a specific Stitch project. Useful for understanding an existing project's theme and screen list before generating additional screens.
11
+
12
+ ## Critical prerequisite
13
+
14
+ **Only use this skill when the user explicitly mentions "Stitch".**
15
+
16
+ **Do NOT call this if you already have both `projectId` AND `screenId`.** In that case, call `stitch-mcp-get-screen` directly — it's more efficient.
17
+
18
+ ## When to use
19
+
20
+ - User provides a Stitch project URL and you need its details
21
+ - You need to know the existing design theme before generating new consistent screens
22
+ - Verifying a project exists before proceeding
23
+
24
+ ## Step 1: Parse the project ID from context
25
+
26
+ The user may provide the project reference in several formats — always extract to the `projects/ID` format:
27
+
28
+ | Input format | → Argument for `get_project` |
29
+ |---|---|
30
+ | `3780309359108792857` (numeric) | `projects/3780309359108792857` |
31
+ | `projects/3780309359108792857` | `projects/3780309359108792857` (use as-is) |
32
+ | `https://stitch.withgoogle.com/projects/3780309359108792857` | Extract ID → `projects/3780309359108792857` |
33
+
34
+ ## Step 2: Call the MCP tool
35
+
36
+ ```json
37
+ {
38
+ "name": "get_project",
39
+ "arguments": {
40
+ "name": "projects/3780309359108792857"
41
+ }
42
+ }
43
+ ```
44
+
45
+ ## Output schema
46
+
47
+ ```json
48
+ {
49
+ "name": "projects/3780309359108792857",
50
+ "title": "Analytics Dashboard",
51
+ "createTime": "2024-11-10T09:00:00Z",
52
+ "updateTime": "2024-11-15T10:30:00Z",
53
+ "designTheme": {
54
+ "colorMode": "LIGHT",
55
+ "primaryColor": "#6366F1"
56
+ },
57
+ "screenInstances": [
58
+ { "name": "projects/3780309359108792857/screens/88805..." }
59
+ ]
60
+ }
61
+ ```
62
+
63
+ ## After getting the project
64
+
65
+ - Note the `designTheme` — use it to keep new screens visually consistent
66
+ - Note the `screenInstances` list — extract screenId values if you need to inspect specific screens
67
+ - Use `stitch-mcp-list-screens` for a richer view of the screen list including thumbnails
@@ -0,0 +1,117 @@
1
+ ---
2
+ name: stitch-mcp-get-screen
3
+ description: Retrieves full details of a specific Stitch screen — HTML download URL, screenshot URL, dimensions. This is the final step in design retrieval before code conversion.
4
+ allowed-tools:
5
+ - "stitch*:*"
6
+ - "Bash"
7
+ - "Read"
8
+ - "Write"
9
+ ---
10
+
11
+ # Stitch MCP — Get Screen
12
+
13
+ Retrieves the full output of a Stitch-generated screen: the HTML source code URL and the screenshot image URL. This is the gateway between Stitch design and framework conversion.
14
+
15
+ ## Critical prerequisite
16
+
17
+ **Only use this skill when the user explicitly mentions "Stitch".**
18
+
19
+ **If you already have both `projectId` AND `screenId`, call this directly** — do not call `get_project` first.
20
+
21
+ ## When to use
22
+
23
+ - After `list_screens` has returned a screenId
24
+ - User provides a Stitch screen URL and wants to convert it to code
25
+ - Retrieving assets for any conversion skill: Next.js, Svelte, HTML, React Native, or SwiftUI
26
+
27
+ ## Step 1: Parse IDs from context
28
+
29
+ The user may provide the screen reference in different formats:
30
+
31
+ | Input format | → projectId | → screenId |
32
+ |---|---|---|
33
+ | `projects/123/screens/456` | `123` | `456` |
34
+ | `https://stitch.withgoogle.com/projects/123?node-id=456` | `123` | `456` |
35
+ | Separate numeric IDs already known | Use as-is | Use as-is |
36
+
37
+ ## Step 2: Call the MCP tool
38
+
39
+ **Important: Both IDs must be numeric — no `projects/` or `screens/` prefix.**
40
+
41
+ ```json
42
+ {
43
+ "name": "get_screen",
44
+ "arguments": {
45
+ "projectId": "3780309359108792857",
46
+ "screenId": "88805abc123def456"
47
+ }
48
+ }
49
+ ```
50
+
51
+ ```
52
+ ✅ projectId: "3780309359108792857"
53
+ ❌ projectId: "projects/3780309359108792857"
54
+
55
+ ✅ screenId: "88805abc123def456"
56
+ ❌ screenId: "screens/88805abc123def456"
57
+ ```
58
+
59
+ ## Output schema
60
+
61
+ ```json
62
+ {
63
+ "name": "projects/3780309359108792857/screens/88805abc123def456",
64
+ "htmlCode": {
65
+ "downloadUrl": "https://storage.googleapis.com/stitch-output/..."
66
+ },
67
+ "screenshot": {
68
+ "downloadUrl": "https://storage.googleapis.com/stitch-screenshots/..."
69
+ },
70
+ "figmaExport": {
71
+ "downloadUrl": "https://storage.googleapis.com/stitch-figma/..."
72
+ },
73
+ "width": 390,
74
+ "height": 844,
75
+ "deviceType": "MOBILE"
76
+ }
77
+ ```
78
+
79
+ ## Step 3: Download the HTML reliably
80
+
81
+ AI fetch tools frequently fail on Google Cloud Storage URLs. Use the bash script:
82
+
83
+ ```bash
84
+ bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"
85
+ ```
86
+
87
+ Always quote the URL to handle special characters.
88
+
89
+ ## Step 4: Determine framework and route to conversion
90
+
91
+ After retrieving the screen, check what the user wants to do with it.
92
+
93
+ Check the `deviceType` in the response first — it shapes which options to suggest:
94
+
95
+ | `deviceType` | Sensible defaults to suggest |
96
+ |---|---|
97
+ | `DESKTOP` | Next.js, Svelte, HTML |
98
+ | `MOBILE` | Next.js (PWA), Svelte, HTML, React Native, SwiftUI |
99
+ | `AGNOSTIC` | Any |
100
+
101
+ Then route based on user intent:
102
+
103
+ | User intent | → Load skill |
104
+ |---|---|
105
+ | "Convert to Next.js", "React app", "App Router" | `stitch-nextjs-components` |
106
+ | "Convert to Svelte", "SvelteKit" | `stitch-svelte-components` |
107
+ | "Convert to HTML", "PWA", "Capacitor", "Ionic", "web app" | `stitch-html-components` |
108
+ | "React Native", "Expo", "iOS and Android", "cross-platform" | `stitch-react-native-components` |
109
+ | "SwiftUI", "Xcode", "native iOS", "iOS only" | `stitch-swiftui-components` |
110
+ | "Extract design system", "get the colors/fonts" | `stitch-design-system` |
111
+ | "Just show me the screenshot" | Present `screenshot.downloadUrl` |
112
+ | No framework mentioned, desktop design | Ask: Next.js, Svelte, or HTML? |
113
+ | No framework mentioned, mobile design | Ask: React Native, SwiftUI, or HTML (Capacitor)? |
114
+
115
+ ## References
116
+
117
+ - `scripts/fetch-stitch.sh` — Reliable GCS HTML downloader
@@ -0,0 +1,35 @@
1
+ #!/usr/bin/env bash
2
+ # fetch-stitch.sh
3
+ # Reliably downloads Stitch HTML from Google Cloud Storage URLs.
4
+ # GCS URLs require redirect handling and security handshakes that AI fetch tools fail on.
5
+ #
6
+ # Usage:
7
+ # bash scripts/fetch-stitch.sh "<url>" "<output-path>"
8
+ #
9
+ # Example:
10
+ # bash scripts/fetch-stitch.sh "$htmlCode_downloadUrl" "temp/source.html"
11
+
12
+ set -euo pipefail
13
+
14
+ URL="${1:?Usage: fetch-stitch.sh <url> <output-path>}"
15
+ OUTPUT="${2:?Usage: fetch-stitch.sh <url> <output-path>}"
16
+
17
+ mkdir -p "$(dirname "$OUTPUT")"
18
+
19
+ curl -L \
20
+ -A "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36" \
21
+ --compressed \
22
+ --retry 3 \
23
+ --retry-delay 1 \
24
+ --max-time 30 \
25
+ --silent \
26
+ --show-error \
27
+ --output "$OUTPUT" \
28
+ "$URL"
29
+
30
+ if [ ! -s "$OUTPUT" ]; then
31
+ echo "Error: Downloaded file is empty. URL may be expired or invalid." >&2
32
+ exit 1
33
+ fi
34
+
35
+ echo "Downloaded to: $OUTPUT ($(wc -c < "$OUTPUT") bytes)"
@@ -0,0 +1,84 @@
1
+ ---
2
+ name: stitch-mcp-list-design-systems
3
+ description: Lists all Stitch Design Systems, optionally filtered by project. Returns asset names needed for apply and update operations.
4
+ allowed-tools:
5
+ - "stitch*:*"
6
+ ---
7
+
8
+ # Stitch MCP — List Design Systems
9
+
10
+ Lists all available Stitch Design Systems. These are reusable theme configurations (colors, fonts, roundness, saturation) that can be applied to screens for visual consistency across a project.
11
+
12
+ ## Critical prerequisite
13
+
14
+ **Only use this skill when the user explicitly mentions "Stitch".**
15
+
16
+ ## When to use
17
+
18
+ - Before applying a design system — need to find the `assetId`
19
+ - User asks "what design systems do I have?"
20
+ - The orchestrator checks for existing design systems during project setup (Step 4b)
21
+ - Before creating a new design system — check if one already exists
22
+
23
+ ## Call the MCP tool
24
+
25
+ ```json
26
+ {
27
+ "name": "list_design_systems",
28
+ "arguments": {
29
+ "projectId": "3780309359108792857"
30
+ }
31
+ }
32
+ ```
33
+
34
+ ### `projectId` — numeric ID only, optional
35
+
36
+ ```
37
+ ✅ "3780309359108792857"
38
+ ❌ "projects/3780309359108792857"
39
+ ```
40
+
41
+ If omitted, returns all design systems across all projects.
42
+
43
+ ## Output schema
44
+
45
+ Returns an array of Asset objects:
46
+
47
+ ```json
48
+ {
49
+ "assets": [
50
+ {
51
+ "name": "assets/ds_abc123",
52
+ "displayName": "SaaS Dashboard Theme",
53
+ "designSystem": {
54
+ "theme": {
55
+ "colorMode": "LIGHT",
56
+ "font": "DM_SANS",
57
+ "roundness": "ROUND_EIGHT",
58
+ "saturation": 3,
59
+ "customColor": "#6366F1",
60
+ "backgroundLight": "#FFFFFF",
61
+ "backgroundDark": "#18181B"
62
+ },
63
+ "designTokens": "...",
64
+ "styleGuidelines": "..."
65
+ }
66
+ }
67
+ ]
68
+ }
69
+ ```
70
+
71
+ ## After listing
72
+
73
+ Present as a readable table:
74
+
75
+ | # | Name | Font | Color | Mode | Asset ID |
76
+ |---|------|------|-------|------|----------|
77
+ | 1 | SaaS Dashboard Theme | DM Sans | #6366F1 | Light | `ds_abc123` |
78
+
79
+ Then offer:
80
+ - "Apply one of these to a screen?" → `stitch-mcp-apply-design-system`
81
+ - "Update an existing design system?" → `stitch-mcp-update-design-system`
82
+ - "Create a new design system?" → `stitch-mcp-create-design-system`
83
+
84
+ Extract the `name` field from each asset — this is the `assetId` needed for `apply_design_system`.
@@ -0,0 +1,77 @@
1
+ ---
2
+ name: stitch-mcp-list-projects
3
+ description: Lists all Stitch projects accessible to the user. Use this to find an existing project ID before resuming work or generating new screens in an existing project.
4
+ allowed-tools:
5
+ - "stitch*:*"
6
+ ---
7
+
8
+ # Stitch MCP — List Projects
9
+
10
+ Lists Stitch projects available to the user. Use this when you need to find an existing projectId rather than creating a new project.
11
+
12
+ ## Critical prerequisite
13
+
14
+ **Only use this skill when the user explicitly mentions "Stitch".**
15
+
16
+ ## When to use
17
+
18
+ - User says "continue working on my Stitch project" without providing an ID
19
+ - User says "list my Stitch projects" or "what projects do I have?"
20
+ - You need to find an existing projectId before calling `generate_screen_from_text`
21
+ - Checking whether a project already exists before creating a new one
22
+
23
+ ## Call the MCP tool
24
+
25
+ **To list owned projects (default):**
26
+ ```json
27
+ {
28
+ "name": "list_projects",
29
+ "arguments": {
30
+ "filter": "view=owned"
31
+ }
32
+ }
33
+ ```
34
+
35
+ **To list projects shared with the user:**
36
+ ```json
37
+ {
38
+ "name": "list_projects",
39
+ "arguments": {
40
+ "filter": "view=shared"
41
+ }
42
+ }
43
+ ```
44
+
45
+ **To list all accessible projects (owned + shared):**
46
+ ```json
47
+ {
48
+ "name": "list_projects",
49
+ "arguments": {}
50
+ }
51
+ ```
52
+
53
+ ## Output schema
54
+
55
+ ```json
56
+ {
57
+ "projects": [
58
+ {
59
+ "name": "projects/3780309359108792857",
60
+ "title": "Analytics Dashboard",
61
+ "updateTime": "2024-11-15T10:30:00Z"
62
+ }
63
+ ]
64
+ }
65
+ ```
66
+
67
+ ## After listing
68
+
69
+ 1. Present the project list to the user with titles and last-updated timestamps
70
+ 2. Ask which project to work in (if multiple)
71
+ 3. Extract the numeric ID from the chosen `name` field: `projects/ID` → `ID`
72
+ 4. Store both the full name and numeric ID for subsequent calls
73
+
74
+ ## ID format reminder
75
+
76
+ - `list_screens`, `get_project` → use `projects/NUMERIC_ID`
77
+ - `generate_screen_from_text`, `get_screen` → use `NUMERIC_ID` only