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.
- package/AGENTS.md +139 -0
- package/CHANGELOG.md +86 -0
- package/README.md +167 -0
- package/agents/stitch-kit.md +93 -0
- package/bin/stitch-kit.mjs +430 -0
- package/docs/architecture.md +118 -0
- package/docs/color-prompt-guide.md +119 -0
- package/docs/mcp-naming-convention.md +64 -0
- package/docs/mcp-schemas/README.md +130 -0
- package/docs/mcp-schemas/apply_design_system.json +36 -0
- package/docs/mcp-schemas/create_design_system.json +78 -0
- package/docs/mcp-schemas/create_project.json +290 -0
- package/docs/mcp-schemas/delete_project.json +20 -0
- package/docs/mcp-schemas/edit_screens.json +46 -0
- package/docs/mcp-schemas/generate_screen_from_text.json +242 -0
- package/docs/mcp-schemas/generate_variants.json +77 -0
- package/docs/mcp-schemas/get_project.json +137 -0
- package/docs/mcp-schemas/get_screen.json +92 -0
- package/docs/mcp-schemas/list_design_systems.json +32 -0
- package/docs/mcp-schemas/list_projects.json +136 -0
- package/docs/mcp-schemas/list_screens.json +56 -0
- package/docs/mcp-schemas/update_design_system.json +32 -0
- package/docs/mcp-schemas/upload_screens_from_images.json +52 -0
- package/docs/prd-to-stitch-workflow.md +137 -0
- package/docs/skills-index.md +108 -0
- package/docs/tailwind-reference.md +207 -0
- package/package.json +41 -0
- package/skills/stitch-a11y/SKILL.md +428 -0
- package/skills/stitch-a11y/resources/audit-checklist.md +102 -0
- package/skills/stitch-animate/SKILL.md +371 -0
- package/skills/stitch-animate/resources/animation-patterns.md +248 -0
- package/skills/stitch-design-md/SKILL.md +215 -0
- package/skills/stitch-design-md/examples/DESIGN.md +54 -0
- package/skills/stitch-design-md/examples/usage.md +67 -0
- package/skills/stitch-design-md/scripts/fetch-stitch.sh +35 -0
- package/skills/stitch-design-system/SKILL.md +314 -0
- package/skills/stitch-design-system/resources/tokens-template.css +237 -0
- package/skills/stitch-html-components/SKILL.md +344 -0
- package/skills/stitch-html-components/resources/architecture-checklist.md +74 -0
- package/skills/stitch-html-components/scripts/fetch-stitch.sh +45 -0
- package/skills/stitch-loop/SKILL.md +183 -0
- package/skills/stitch-loop/examples/SITE.md +39 -0
- package/skills/stitch-loop/examples/next-prompt.md +24 -0
- package/skills/stitch-loop/examples/usage.md +77 -0
- package/skills/stitch-mcp-apply-design-system/SKILL.md +82 -0
- package/skills/stitch-mcp-create-design-system/SKILL.md +117 -0
- package/skills/stitch-mcp-create-project/SKILL.md +77 -0
- package/skills/stitch-mcp-delete-project/SKILL.md +62 -0
- package/skills/stitch-mcp-edit-screens/SKILL.md +121 -0
- package/skills/stitch-mcp-generate-screen-from-text/SKILL.md +102 -0
- package/skills/stitch-mcp-generate-screen-from-text/examples/desktop.md +53 -0
- package/skills/stitch-mcp-generate-screen-from-text/examples/mobile.md +71 -0
- package/skills/stitch-mcp-generate-variants/SKILL.md +124 -0
- package/skills/stitch-mcp-get-project/SKILL.md +67 -0
- package/skills/stitch-mcp-get-screen/SKILL.md +117 -0
- package/skills/stitch-mcp-get-screen/scripts/fetch-stitch.sh +35 -0
- package/skills/stitch-mcp-list-design-systems/SKILL.md +84 -0
- package/skills/stitch-mcp-list-projects/SKILL.md +77 -0
- package/skills/stitch-mcp-list-screens/SKILL.md +69 -0
- package/skills/stitch-mcp-update-design-system/SKILL.md +82 -0
- package/skills/stitch-mcp-upload-screens-from-images/SKILL.md +95 -0
- package/skills/stitch-mcp-upload-screens-from-images/scripts/encode-image.sh +43 -0
- package/skills/stitch-nextjs-components/SKILL.md +181 -0
- package/skills/stitch-nextjs-components/resources/architecture-checklist.md +65 -0
- package/skills/stitch-nextjs-components/resources/component-template.tsx +101 -0
- package/skills/stitch-nextjs-components/scripts/fetch-stitch.sh +45 -0
- package/skills/stitch-orchestrator/SKILL.md +337 -0
- package/skills/stitch-orchestrator/examples/workflow.md +173 -0
- package/skills/stitch-react-components/SKILL.md +236 -0
- package/skills/stitch-react-components/references/tailwind-to-react.md +117 -0
- package/skills/stitch-react-components/resources/architecture-checklist.md +34 -0
- package/skills/stitch-react-components/resources/component-template.tsx +35 -0
- package/skills/stitch-react-components/scripts/fetch-stitch.sh +35 -0
- package/skills/stitch-react-native-components/SKILL.md +333 -0
- package/skills/stitch-react-native-components/resources/architecture-checklist.md +74 -0
- package/skills/stitch-react-native-components/resources/component-template.tsx +104 -0
- package/skills/stitch-react-native-components/scripts/fetch-stitch.sh +45 -0
- package/skills/stitch-remotion/SKILL.md +280 -0
- package/skills/stitch-setup/SKILL.md +183 -0
- package/skills/stitch-shadcn-ui/SKILL.md +255 -0
- package/skills/stitch-skill-creator/SKILL.md +257 -0
- package/skills/stitch-skill-creator/references/output-patterns.md +71 -0
- package/skills/stitch-skill-creator/scripts/init_stitch_skill.py +229 -0
- package/skills/stitch-svelte-components/SKILL.md +282 -0
- package/skills/stitch-svelte-components/resources/architecture-checklist.md +62 -0
- package/skills/stitch-svelte-components/resources/component-template.svelte +193 -0
- package/skills/stitch-svelte-components/scripts/fetch-stitch.sh +36 -0
- package/skills/stitch-swiftui-components/SKILL.md +424 -0
- package/skills/stitch-swiftui-components/resources/architecture-checklist.md +83 -0
- package/skills/stitch-swiftui-components/resources/component-template.swift +131 -0
- package/skills/stitch-swiftui-components/resources/layout-mapping.md +155 -0
- package/skills/stitch-swiftui-components/scripts/fetch-stitch.sh +45 -0
- package/skills/stitch-ued-guide/SKILL.md +124 -0
- package/skills/stitch-ui-design-spec-generator/SKILL.md +115 -0
- package/skills/stitch-ui-design-spec-generator/examples/usage.md +79 -0
- package/skills/stitch-ui-design-variants/SKILL.md +127 -0
- package/skills/stitch-ui-prompt-architect/SKILL.md +196 -0
- 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
|