google-labs-code · JLXIA · Mar 27, 2026
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ npx skills add google-labs-code/stitch-skills --skill react:components --global
 ## Available Skills
 
 ### stitch-design
-Unified entry point for Stitch design work. Handles prompt enhancement (UI/UX keywords, atmosphere), design system synthesis (.stitch/DESIGN.md), and high-fidelity screen generation/editing via Stitch MCP.
+A unified orchestrator for Stitch design workflows. This skill wraps the Stitch MCP server to provide a more intuitive interface, ensuring consistent prompt engineering and tool usage. It handles prompt enhancement (translating intent into UI/UX keywords and atmosphere), design system management, and high-fidelity screen generation or editing. Additionally, it extends the core MCP capabilities with features like uploading image assets to Stitch projects and generating designs from reference images.
 
 ```bash
 npx skills add google-labs-code/stitch-skills --skill stitch-design --global

diff --git a/skills/stitch-design/README.md b/skills/stitch-design/README.md
@@ -1,6 +1,6 @@
 # Stitch Design Skill
 
-Teaches agents to generate high-fidelity, consistent UI designs and maintain project-level design systems using Stitch.
+A unified orchestrator for Stitch design workflows. This skill wraps the Stitch MCP server to provide a more intuitive interface, ensuring consistent prompt engineering, tool usage, and design system management.
 
 ## Install
 
@@ -10,12 +10,13 @@ npx skills add google-labs-code/stitch-skills --skill stitch-design --global
 
 ## What It Does
 
-Enables professional-grade UI/UX design workflows through Stitch MCP:
+Enables professional-grade UI/UX design workflows through Stitch MCP by extending its core capabilities:
 
 1. **Prompt Enhancement**: Transforms rough intent into structured, high-fidelity prompts with professional terminology and design system context.
-2. **Design System Synthesis**: Analyzes existing Stitch projects to create and maintain a `.stitch/DESIGN.md` "source of truth".
-3. **Iterative Generation**: Selects the best generation or editing workflow (`edit_screens`, `generate_variants`) based on user intent.
-4. **Asset Management**: Synchronizes remote designs by downloading HTML and screenshots to the project's `.stitch/designs` directory.
+2. **Design System Management**: Analyzes existing Stitch projects to create and maintain a `.stitch/DESIGN.md` "source of truth".
+3. **UI Generation & Editing**: Intelligently selects the best generation or editing workflow (`generate_screen_from_text`, `edit_screens`, `generate_variants`) based on user intent.
+4. **Asset Management & Uploads**: Uploads image assets or mockups directly to Stitch projects, and synchronizes remote designs by downloading HTML and screenshots to the local `.stitch/designs` directory.
+5. **Image-to-Screen**: Generates new high-fidelity designs based on user-provided reference images.
 
 ## Prerequisites
 

diff --git a/skills/stitch-design/SKILL.md b/skills/stitch-design/SKILL.md
@@ -1,6 +1,10 @@
 ---
 name: stitch-design
-description: Unified entry point for Stitch design work. Handles prompt enhancement (UI/UX keywords, atmosphere), design system synthesis (.stitch/DESIGN.md), and high-fidelity screen generation/editing via Stitch MCP.
+description: >-
+  Handles all UI/UX design tasks and interactions with Stitch MCP. This
+  includes creating new apps and websites from scratch, screen generation,
+  screen editing, design system management, and uploading design assets
+  (e.g. images, mockups) to Stitch projects.
 allowed-tools:
   - "StitchMCP"
   - "Read"
@@ -9,50 +13,72 @@ allowed-tools:
 
 # Stitch Design Expert
 
-You are an expert Design Systems Lead and Prompt Engineer specializing in the **Stitch MCP server**. Your goal is to help users create high-fidelity, consistent, and professional UI designs by bridging the gap between vague ideas and precise design specifications.
+You are an expert Design Systems Lead and Prompt Engineer specializing in the
+**Stitch MCP server**. Your goal is to help users create high-fidelity,
+consistent, and professional UI designs by bridging the gap between vague ideas
+and precise design specifications.
 
 ## Core Responsibilities
 
-1.  **Prompt Enhancement** — Transform rough intent into structured prompts using professional UI/UX terminology and design system context.
-2.  **Design System Synthesis** — Analyze existing Stitch projects to create `.stitch/DESIGN.md` "source of truth" documents.
-3.  **Workflow Routing** — Intelligently route user requests to specialized generation or editing workflows.
-4.  **Consistency Management** — Ensure all new screens leverage the project's established visual language.
-5.  **Asset Management** — Automatically download generated HTML and screenshots to the `.stitch/designs` directory.
+1.  **Prompt Enhancement** — Transform rough intent into structured prompts
+    using professional UI/UX terminology and design system context.
+2.  **Design System Synthesis** — Analyze existing Stitch projects to create
+    `.stitch/DESIGN.md` "source of truth" documents.
+3.  **Workflow Routing** — Intelligently route user requests to specialized
+    generation or editing workflows.
+4.  **Consistency Management** — Ensure all new screens leverage the project's
+    established visual language.
+5.  **Asset Management** — Automatically download generated HTML and screenshots
+    to the `.stitch/designs` directory.
 
----
+--------------------------------------------------------------------------------
 
 ## 🚀 Workflows
 
 Based on the user's request, follow one of these workflows:
 
-| User Intent | Workflow | Primary Tool |
-|:---|:---|:---|
-| "Design a [page]..." | [text-to-design](workflows/text-to-design.md) | `generate_screen_from_text` + `Download` |
-| "Edit this [screen]..." | [edit-design](workflows/edit-design.md) | `edit_screens` + `Download` |
-| "Create/Update .stitch/DESIGN.md" | [generate-design-md](workflows/generate-design-md.md) | `get_screen` + `Write` |
+User Intent                       | Workflow                                              | Primary Tool
+:-------------------------------- | :---------------------------------------------------- | :-----------
+"Design a [page]..."              | [text-to-design](workflows/text-to-design.md)         | `generate_screen_from_text` + `Download`
+"Edit this [screen]..."           | [edit-design](workflows/edit-design.md)               | `edit_screens` + `Download`
+"Define/Update Design System" | [design-system](workflows/design-system.md) | `get_screen` + `create_design_system` + `update_design_system`
+"Upload [asset] to project" | [upload-to-stitch](workflows/upload-to-stitch.md) | `scripts/upload_to_stitch.py`
 
----
+--------------------------------------------------------------------------------
 
 ## 🎨 Prompt Enhancement Pipeline
 
-Before calling any Stitch generation or editing tool, you MUST enhance the user's prompt.
+Before calling any Stitch generation or editing tool, you MUST enhance the
+user's prompt.
 
 ### 1. Analyze Context
-- **Project Scope**: Maintain the current `projectId`. Use `list_projects` if unknown.
-- **Design System**: Check for `.stitch/DESIGN.md`. If it exists, incorporate its tokens (colors, typography). If not, suggest the `generate-design-md` workflow.
+
+-   **Project**: Use `list_projects` to find the correct `projectId`. If no
+    suitable project exists, create one using `create_project`.
+-   **Design System**: For any project (new or existing), you must run the
+    [design-system](workflows/design-system.md) workflow to ensure
+    `.stitch/DESIGN.md` exists and is synced with Stitch.
+    -   **Important**: Once synced, Stitch holds design tokens at the project
+        level—you do NOT need to repeat them in generation prompts.
 
 ### 2. Refine UI/UX Terminology
+
 Consult [Design Mappings](references/design-mappings.md) to replace vague terms.
-- Vague: "Make a nice header"
-- Professional: "Sticky navigation bar with glassmorphism effect and centered logo"
+
+-   Vague: "Make a nice header"
+-   Professional: "Sticky navigation bar with glassmorphism effect and centered
+    logo"
 
 ### 3. Structure the Final Prompt
-Format the enhanced prompt for Stitch like this:
+
+Format the enhanced prompt for Stitch like this. If `create_design_system` was
+already called for this project, **omit** the DESIGN SYSTEM block — the tokens
+are already applied.
 
 ```markdown
 [Overall vibe, mood, and purpose of the page]
 
-**DESIGN SYSTEM (REQUIRED):**
+**DESIGN SYSTEM (only if create_design_system was NOT called):**
 - Platform: [Web/Mobile], [Desktop/Mobile]-first
 - Palette: [Primary Name] (#hex for role), [Secondary Name] (#hex for role)
 - Styles: [Roundness description], [Shadow/Elevation style]
@@ -65,20 +91,27 @@ Format the enhanced prompt for Stitch like this:
 ```
 
 ### 4. Present AI Insights
-After any tool call, always surface the `outputComponents` (Text Description and Suggestions) to the user.
 
----
+After any tool call, always surface the `outputComponents` (Text Description and
+Suggestions) to the user.
+
+--------------------------------------------------------------------------------
 
 ## 📚 References
 
-- [Tool Schemas](references/tool-schemas.md) — How to call Stitch MCP tools.
-- [Design Mappings](references/design-mappings.md) — UI/UX keywords and atmosphere descriptors.
-- [Prompting Keywords](references/prompt-keywords.md) — Technical terms Stitch understands best.
+-   [Tool Schemas](references/tool-schemas.md) — How to call Stitch MCP tools.
+-   [Design Mappings](references/design-mappings.md) — UI/UX keywords and
+    atmosphere descriptors.
+-   [Prompting Keywords](references/prompt-keywords.md) — Technical terms Stitch
+    understands best.
 
----
+--------------------------------------------------------------------------------
 
 ## 💡 Best Practices
 
-- **Iterative Polish**: Prefere `edit_screens` for targeted adjustments over full re-generation.
-- **Semantic First**: Name colors by their role (e.g., "Primary Action") as well as their appearance.
-- **Atmosphere Matters**: Explicitly set the "vibe" (Minimalist, Vibrant, Brutalist) to guide the generator.
+-   **Iterative Polish**: Prefer `edit_screens` for targeted adjustments over
+    full re-generation.
+-   **Semantic First**: Name colors by their role (e.g., "Primary Action") as
+    well as their appearance.
+-   **Atmosphere Matters**: Explicitly set the "vibe" (Minimalist, Vibrant,
+    Brutalist) to guide the generator.
diff --git a/skills/stitch-design/examples/DESIGN.md b/skills/stitch-design/examples/DESIGN.md
@@ -1,22 +1,34 @@
 ---
 # The "Solace" Design System
-This is a comprehensive design language for a mindfulness and wellness application.
+This is a comprehensive design language for a mindfulness and wellness
+application.
 
-## 🎨 Color Palette
-- **Primary**: Deep Ocean Blue (#1a365d) - for critical navigation and CTAs.
-- **Secondary**: Calm Slate (#718096) - for subtexts and secondary buttons.
-- **Background**: Soft Mist (#f7fafc) - for main page content.
-- **Accent**: Serene Emerald (#38a169) - for positive feedback and completion states.
+## 1. Visual Theme & Atmosphere
+Calm, airy, and nurturing. Generous whitespace with soft pastel accents creates
+a sense of tranquility. The aesthetic is clean and minimal — focused on clarity
+and emotional safety.
 
-## 🔡 Typography
-- **Heading**: Montserrat, Bold - for titles and hero section headlines.
-- **Body**: Inter, Regular - for descriptions and general content.
-- **Size**: 16px as base, 48px for H1.
+## 2. Color Palette & Roles
 
-## 📐 Components
-- **Buttons**: Rounded (12px), subtle hover shadow (4px blur).
-- **Cards**: Minimal border (1px, #e2e8f0), soft shadow (8px elevation).
-- **Navigation**: Clean, top-aligned, centered menu items.
+- **Deep Ocean Blue** (#1a365d) — Primary, for critical navigation and CTAs
+- **Calm Slate** (#718096) — Secondary text and secondary buttons
+- **Soft Mist** (#f7fafc) — Main page background
+- **Serene Emerald** (#38a169) — Positive feedback and completion states
 
----
-💡 **Tip**: When calling `generate_screen_from_text`, include the tokens above to ensure the new screen matches this design system.
+## 3. Typography Rules
+
+- **Headings**: Montserrat, Bold — for titles and hero section headlines
+- **Body**: Inter, Regular — for descriptions and general content
+- **Base size**: 16px, H1 at 48px
+
+## 4. Component Stylings
+
+* **Buttons**: Rounded (12px), subtle hover shadow (4px blur)
+* **Cards**: Minimal border (1px, #e2e8f0), soft shadow (8px elevation)
+* **Navigation**: Clean, top-aligned, centered menu items
+
+## 5. Layout Principles
+
+- Centered content with max-width container (1200px)
+- Comfortable vertical spacing between sections (48-64px)
+- Mobile-first responsive breakpoints
diff --git a/skills/stitch-design/examples/enhanced-prompt.md b/skills/stitch-design/examples/enhanced-prompt.md
@@ -1,22 +1,27 @@
 # Example: Prompt Enhancement
 
 ## User Input (Vague)
-> "Make a landing page for my fitness app called 'Pulse'. Use red and black. It should have a place for features and a hero section."
+> "Make a landing page for my fitness app called 'Pulse'. Use red and
+> black. It should have a place for features and a hero section."
 
 ---
 
 ## Enhanced Prompt (Stitch-Optimized)
-**Overall Purpose**: A high-energy, modern landing page for 'Pulse', a fitness tracking application. The vibe is powerful, motivating, and high-performance.
+**Overall Purpose**: A high-energy, modern landing page for 'Pulse', a fitness
+tracking application. The vibe is powerful, motivating, and high-performance.
 
 **DESIGN SYSTEM (REQUIRED):**
+
 - **Primary Color**: Racing Red (#e11d48) for CTA buttons and active states.
 - **Secondary Color**: Deep Obsidian (#0f172a) for background and text containers.
 - **Typography**: Bold, condensed sans-serif headings (e.g., Impact or Inter Tight) to convey speed and strength.
 - **Style**: Hard edges with sharp, minimal borders; high contrast; dark mode by default.
 
 **PAGE STRUCTURE:**
 1. **Header**: Minimalist navigation with Pulse logo (left) and "Start Training" primary button (right).
-2. **Hero Section**: Large, emotive fitness photography background. Headline: "Elevate Every Beat." Sub-headline: "Track, analyze, and crush your fitness goals with Pulse." Primary red CTA: "Get Started".
+2. **Hero Section**: Large, emotive fitness photography background. Headline:
+   "Elevate Every Beat." Sub-headline: "Track, analyze, and crush your fitness
+   goals with Pulse." Primary red CTA: "Get Started".
 3. **Feature Grid**: Three-column layout highlighting:
     - **Real-time Tracking**: Live stats from your wearable.
     - **AI Coaching**: Personalized workouts based on your performance.
@@ -25,4 +30,6 @@
 5. **Footer**: Quick links (Training, Pricing, Support), social icons, and legal.
 
 ---
-💡 **Tip**: Notice how the enhanced prompt adds specific hex codes, defines the typography "vibe", and breaks the page into a logical numbered structure. This gives Stitch much clearer instructions.
+💡 **Tip**: Notice how the enhanced prompt adds specific hex codes, defines the
+typography "vibe", and breaks the page into a logical numbered structure. This
+gives Stitch much clearer instructions.
diff --git a/skills/stitch-design/examples/metadata.json b/skills/stitch-design/examples/metadata.json
@@ -14,9 +14,10 @@
     }
   ],
   "designSystem": {
+    "assetId": "15996705518239280238",
     "primaryColor": "#1a365d",
     "secondaryColor": "#718096",
     "backgroundColor": "#f7fafc",
-    "fontFamily": "Inter, sans-serif"
+    "fontFamily": "INTER"
   }
 }
diff --git a/skills/stitch-design/references/design-mappings.md b/skills/stitch-design/references/design-mappings.md
@@ -1,6 +1,7 @@
 # Design Mappings & Descriptors
 
-Use these mappings to transform vague user requests into precise, high-fidelity design instructions.
+Use these mappings to transform vague user requests into precise, high-fidelity
+design instructions.
 
 ## UI/UX Keyword Refinement