feat: resync with the live Stitch MCP API and add the DESIGN.md wrappers

.claude-plugin/marketplace.json

@@ -10,7 +10,7 @@
   "plugins": [
     {
       "name": "stitch-kit",
-      "description": "Everything — all 35 skills in one install.",
+      "description": "Everything — all 36 skills in one install.",
       "source": "./",
       "strict": true,
       "skills": [
@@ -27,13 +27,14 @@
         "./skills/stitch-mcp-list-screens",
         "./skills/stitch-mcp-get-screen",
         "./skills/stitch-mcp-delete-project",
-        "./skills/stitch-mcp-upload-screens-from-images",
         "./skills/stitch-mcp-edit-screens",
         "./skills/stitch-mcp-generate-variants",
         "./skills/stitch-mcp-create-design-system",
         "./skills/stitch-mcp-update-design-system",
         "./skills/stitch-mcp-list-design-systems",
         "./skills/stitch-mcp-apply-design-system",
+        "./skills/stitch-mcp-upload-design-md",
+        "./skills/stitch-mcp-create-design-system-from-design-md",
         "./skills/stitch-nextjs-components",
         "./skills/stitch-svelte-components",
         "./skills/stitch-react-components",

AGENTS.md

@@ -4,7 +4,7 @@ Guidance for Claude Code, Cursor, Copilot, Codex CLI, and other AI agents workin
 
 ## What this repo is
 
-A collection of Claude Code **skills** — 35 packaged instructions and scripts that extend AI agents with Stitch-specific capabilities: text-to-UI generation, design iteration (edit, variants, design systems), design token extraction, and multi-framework conversion. Think of it as a Stitch co-pilot that wraps all 14 MCP tools and knows the footguns so you don't have to learn them the hard way.
+A collection of Claude Code **skills** — 35 packaged instructions and scripts that extend AI agents with Stitch-specific capabilities: text-to-UI generation, design iteration (edit, variants, design systems), design token extraction, and multi-framework conversion. Think of it as a Stitch co-pilot that wraps 13 of the 15 Stitch MCP tools and knows the footguns so you don't have to learn them the hard way.
 
 ## Skill structure
 
@@ -88,7 +88,7 @@ For Stitch-based UI generation, load **`stitch-orchestrator`** or invoke the **`
 | Layer | Count | Purpose |
 |-------|-------|---------|
 | **Brain** (`stitch-ui-*`, `stitch-ideate`) | 5 | Design intelligence — ideation agent, specs, prompts, variants, UED guide |
-| **Hands** (`stitch-mcp-*`) | 14 | MCP wrappers — one per Stitch API tool, handles ID format rules |
+| **Hands** (`stitch-mcp-*`) | 13 | MCP wrappers — one per Stitch API tool, handles ID format rules |
 | **Conversion** | 7+ | Stitch HTML → framework components (Next.js, Svelte, React, HTML, RN, SwiftUI, shadcn) |
 | **Quality** | 3 | Design tokens, accessibility audit, animations |
 
@@ -98,7 +98,7 @@ Skills marked `allowed-tools: ["stitch*:*"]` require the **Stitch MCP Server** c
 
 Setup guide: https://stitch.withgoogle.com/docs/mcp/setup
 
-All 14 tools wrapped: `create_project`, `get_project`, `delete_project`, `list_projects`, `generate_screen_from_text`, `upload_screens_from_images`, `edit_screens`, `generate_variants`, `list_screens`, `get_screen`, `create_design_system`, `update_design_system`, `list_design_systems`, `apply_design_system`
+13 of the 15 Stitch MCP tools wrapped: `create_project`, `get_project`, `delete_project`, `list_projects`, `generate_screen_from_text`, `edit_screens`, `generate_variants`, `list_screens`, `get_screen`, `create_design_system`, `update_design_system`, `list_design_systems`, `apply_design_system`
 
 Without MCP: the orchestrator falls back to prompt-only mode (generates ready-to-copy Stitch prompts instead of running the full workflow — still useful, just slower).
 
@@ -112,7 +112,6 @@ Without MCP: the orchestrator falls back to prompt-only mode (generates ready-to
 | `stitch-ui-prompt-architect` | Design spec → structured Stitch prompt |
 | `stitch-mcp-edit-screens` | Edit existing screens with text prompts (iteration) |
 | `stitch-mcp-generate-variants` | Generate design alternatives with creativity controls |
-| `stitch-mcp-upload-screens-from-images` | Import screenshots for redesign workflows |
 | `stitch-mcp-create-design-system` | Create reusable Stitch Design Systems |
 | `stitch-mcp-apply-design-system` | Apply design systems to screens |
 | `stitch-mcp-get-screen` | Retrieve screen HTML + screenshot by ID |
@@ -132,7 +131,7 @@ Without MCP: the orchestrator falls back to prompt-only mode (generates ready-to
 
 See [`docs/`](docs/) for:
 - `skills-index.md` — complete skills table with descriptions and layers
-- `mcp-schemas/` — JSON Schema for all 14 Stitch MCP tools
+- `mcp-schemas/` — JSON Schema for the 13 Stitch MCP tools this repo wraps
 - `color-prompt-guide.md` — 8 ready-to-use color palette prompts for Stitch
 - `tailwind-reference.md` — Tailwind utility class reference for conversions
 - `mcp-naming-convention.md` — MCP tool name → skill name mapping

README.md

@@ -62,7 +62,7 @@ Then, inside Claude Code, add the skills:
 /plugin install stitch-kit@stitch-kit
 ```
 
-Two steps, not one — the npx installer handles the agent and MCP wiring, the plugin adds the 35 skills. The agent works without them, but the skills are what make the output good.
+Two steps, not one — the npx installer handles the agent and MCP wiring, the plugin adds the 36 skills. The agent works without them, but the skills are what make the output good.
 
 ```bash
 npx @booplex/stitch-kit update   # update to latest
@@ -171,12 +171,12 @@ Pick your target:
 ## Architecture
 
 <p align="center">
-  <img src=".github/assets/architecture.svg" alt="stitch-kit architecture — 5 layers, 35 skills" width="100%"/>
+  <img src=".github/assets/architecture.svg" alt="stitch-kit architecture — 5 layers, 36 skills" width="100%"/>
 </p>
 
-Five layers, 35 skills. Each layer exists because agents fail at something specific with Stitch, and the failures are different enough that one skill can't cover them.
+Five layers, 36 skills. Each layer exists because agents fail at something specific with Stitch, and the failures are different enough that one skill can't cover them.
 
-**The ID format thing deserves its own callout.** `generate_screen_from_text` wants `"3780309359108792857"`. `list_screens` wants `"projects/3780309359108792857"`. Pass the wrong one and you get a cryptic error. This is the #1 reason agents fail with raw Stitch MCP, and it's why there are 14 wrapper skills instead of letting agents call the API directly.
+**The ID format thing deserves its own callout.** `generate_screen_from_text` wants `"3780309359108792857"`. `list_screens` wants `"projects/3780309359108792857"`. Pass the wrong one and you get a cryptic error. This is the #1 reason agents fail with raw Stitch MCP, and it's why there's a dedicated wrapper skill per API tool instead of letting agents call the API directly.
 
 Details → [docs/architecture.md](docs/architecture.md)
 
@@ -196,41 +196,52 @@ The examples folder is the secret weapon. Agents produce dramatically better out
 
 ## vs. the official Google Stitch Skills
 
-Google published [6 skills](https://github.com/google-labs-code/stitch-skills). They cover the basics — enhance a prompt, convert to React, make a video walkthrough. Useful starting point.
+Google's [official repo](https://github.com/google-labs-code/stitch-skills) ships 15 skills across three plugins — `stitch-design`, `stitch-build`, `stitch-utilities`. It's a real toolkit, not a stub, and it does one whole thing stitch-kit doesn't (see the gaps below).
 
-stitch-kit has 35. It covers the full pipeline: conversational ideation with web research, multi-screen batch generation, design system management, iteration loops, and conversion to 7 frameworks. Every official skill has a local equivalent that does more:
+Raw skill counts aren't a fair comparison: Google consolidated generate/edit/variants into one skill and the four design-system operations into another, where stitch-kit keeps them as separate wrappers. Different granularity, not more capability. Here's where both cover the same ground:
 
 | Official | stitch-kit | What's different |
 |----------|-----------|-----------------|
 | `design-md` | `stitch-design-md` | Adds Section 6 — design system notes that feed back into Stitch prompts for consistent multi-screen output |
 | `enhance-prompt` | `stitch-ui-prompt-architect` | Two modes: (A) vague → enhanced, same as official; (B) Design Spec → structured `[Context][Layout][Components]` prompt. Mode B produces significantly better results. |
 | `stitch-loop` | `stitch-loop` | Visual verification step, explicit MCP naming, DESIGN.md integration |
-| `react-components` | `stitch-react-components` | MCP-native retrieval, optional DESIGN.md alignment |
+| `stitch::react-components` | `stitch-react-components` | Also accepts a local HTML file or URL, not just a Stitch screen |
+| `stitch::react-native` | `stitch-react-native-components` | Also accepts a local HTML file or URL; theirs adds a re-sync path for existing native components |
+| `stitch::generate-design` | `stitch-mcp-generate-screen-from-text` + `-edit-screens` + `-generate-variants` | Split into one skill per MCP tool, each enforcing the right ID format |
+| `stitch::manage-design-system` | `stitch-mcp-create/update/list/apply-design-system` | Same split-by-operation approach |
 | `remotion` | `stitch-remotion` | Common patterns (slideshow, feature highlight, user flow), voiceover, dynamic text |
 | `shadcn-ui` | `stitch-shadcn-ui` | Init styles support, custom registries, validation checklist |
 
-**What's entirely new (doesn't exist in the official repo):**
-- `stitch-ideate` — conversational design agent that researches trends, proposes directions, produces PRDs, and batch-generates all screens
-- `stitch-orchestrator` — end-to-end coordinator with smart ideation routing
-- `stitch-mcp-*` wrappers — all 14 Stitch API tools wrapped with ID format safety (this alone saves hours of debugging)
-- `stitch-mcp-edit-screens` — iterate on existing designs without regenerating from scratch
-- `stitch-mcp-generate-variants` — native variant generation with creativity controls
-- `stitch-mcp-upload-screens-from-images` — import screenshots for redesign workflows
-- `stitch-mcp-create/update/list/apply-design-system` — full Stitch Design System lifecycle
-- `stitch-ui-design-spec-generator` — structured spec before prompt (better output than pure prompt enhancement)
-- Mobile targets: `stitch-react-native-components` + `stitch-swiftui-components`
-- `stitch-design-system` — token extraction → CSS custom properties with dark mode
-- `stitch-a11y` — WCAG 2.1 AA audit + auto-fixes
-- `stitch-animate` — purposeful motion with `prefers-reduced-motion` handled
-- `stitch-skill-creator` — meta-skill for extending the plugin
+**What stitch-kit adds:**
+
+- `stitch-ideate` — conversational design agent that researches trends, proposes directions, produces PRDs, and batch-generates all screens. No equivalent.
+- `stitch-orchestrator` — end-to-end coordinator with smart ideation routing. No equivalent.
+- `stitch-ui-design-spec-generator` — structured spec before prompt, which beats pure prompt enhancement. No equivalent.
+- `stitch-swiftui-components` — SwiftUI isn't a target in the official repo at all.
+- `stitch-design-system` — token extraction → CSS custom properties with dark mode. Their `manage-design-system` handles Stitch-side design systems; this one emits CSS for your codebase.
+- `stitch-a11y` — a dedicated WCAG 2.1 AA audit-and-fix pass. They cover accessibility as guidance inside individual conversion skills, but there's no audit skill.
+- `stitch-animate` — implements motion in components. Their `taste-design` specifies motion philosophy in DESIGN.md; this writes the actual animation code with `prefers-reduced-motion` handled.
+- `stitch-skill-creator` — meta-skill for extending the plugin. No equivalent.
+- Every conversion skill takes a local HTML file or URL, so that half works with no Stitch account.
+
+**What Google has that stitch-kit doesn't** — worth knowing before you pick:
+
+- `stitch::upload-to-stitch` — uploads screenshots or mockups into a Stitch project. stitch-kit had a wrapper for this (`upload_screens_from_images`), but Google removed that tool from the live MCP API — there's no image-upload route left on the API side, so the wrapper skill is gone too. Recreate the design from a text prompt instead, or use one of the conversion skills' local-file routes if you already have markup.
+- `stitch::code-to-design` — pulls an *existing* web app into Stitch by chaining the two skills below. stitch-kit only goes design → code; this goes code → design.
+- `stitch::extract-static-html` — extracts self-contained static HTML, assets inlined, from a running app
+- `stitch::extract-design-md` — generates DESIGN.md from frontend **source code**. stitch-kit's version reads a Stitch project instead, so same output, different input.
+- `taste-design` — a stricter anti-generic DESIGN.md variant (calibrated color, asymmetric layout, deliberate motion)
+- `react-vite-dashboard` — Vite dashboard generator, Web3/DeFi flavored
+
+If your workflow starts from an app you've already built and you want it *in* Stitch, use the official repo — that's the direction stitch-kit doesn't cover.
 
 ---
 
 ## Full skill reference
 
-All 35 skills with descriptions, layers, and the ID format table → [docs/skills-index.md](docs/skills-index.md)
+All 36 skills with descriptions, layers, and the ID format table → [docs/skills-index.md](docs/skills-index.md)
 
-MCP API schemas (JSON Schema for all 14 Stitch tools) → [docs/mcp-schemas/](docs/mcp-schemas/)
+MCP API schemas (JSON Schema for the 15 Stitch tools, all wrapped) → [docs/mcp-schemas/](docs/mcp-schemas/)
 
 ---
 

agents/stitch-kit.md

@@ -1,6 +1,6 @@
 ---
 name: stitch-kit
-description: "Use this agent for anything Stitch-related: ideating designs through conversation, generating UI screens from text, editing/iterating designs, generating design variants, managing Stitch Design Systems, converting designs to production code, extracting design tokens, and running the full design-to-ship pipeline. Examples: (1) Generate a UI from a description or PRD using Stitch MCP; (2) Ideate a design — brainstorm, research trends, explore directions, produce a PRD; (3) Edit an existing screen with text prompts (change colors, layout, content); (4) Generate design variants with configurable creativity; (5) Upload screenshots and redesign them in Stitch; (6) Create and apply Stitch Design Systems for visual consistency; (7) Convert a Stitch screen to Next.js, Svelte, React, React Native, or SwiftUI components; (8) Extract design tokens and CSS variables from a generated screen; (9) Build a multi-page site iteratively with visual consistency across screens; (10) Audit components for WCAG 2.1 AA accessibility; (11) Parse a Stitch URL (stitch.withgoogle.com/projects/ID?node-id=SCREEN_ID) and go straight to conversion."
+description: "Use this agent for anything Stitch-related: ideating designs through conversation, generating UI screens from text, editing/iterating designs, generating design variants, managing Stitch Design Systems, converting designs to production code, extracting design tokens, and running the full design-to-ship pipeline. Examples: (1) Generate a UI from a description or PRD using Stitch MCP; (2) Ideate a design — brainstorm, research trends, explore directions, produce a PRD; (3) Edit an existing screen with text prompts (change colors, layout, content); (4) Generate design variants with configurable creativity; (5) Create and apply Stitch Design Systems for visual consistency; (6) Convert a Stitch screen to Next.js, Svelte, React, React Native, or SwiftUI components; (7) Extract design tokens and CSS variables from a generated screen; (8) Build a multi-page site iteratively with visual consistency across screens; (9) Audit components for WCAG 2.1 AA accessibility; (10) Parse a Stitch URL (stitch.withgoogle.com/projects/ID?node-id=SCREEN_ID) and go straight to conversion."
 model: opus
 ---
 
@@ -13,7 +13,6 @@ You are a Stitch design-to-code specialist. You handle the full pipeline from UI
 - Batch-generate multiple screens from a full PRD (up to 10 per call, auto-continuation for more)
 - Edit existing screens with text prompts (edit_screens) — iterate without regenerating
 - Generate design variants with configurable creativity and aspect controls (generate_variants)
-- Upload screenshots/mockups to redesign in Stitch (upload_screens_from_images)
 - Create, update, list, and apply Stitch Design Systems for cross-screen consistency
 - Convert Stitch HTML to Next.js 15 App Router, Svelte 5, Vite+React, HTML5, React Native/Expo, or SwiftUI
 - Extract design tokens → CSS custom properties (light + dark mode)
@@ -46,7 +45,7 @@ Call `stitch-mcp-edit-screens` with specific edit instructions. Handle `output_c
 Call `stitch-mcp-generate-variants` with `variantOptions` (creativeRange: REFINE/EXPLORE/REIMAGINE, aspects: LAYOUT/COLOR_SCHEME/IMAGES/TEXT_FONT/TEXT_CONTENT).
 
 **If the user wants to upload a screenshot:**
-Encode the image to base64 with `scripts/encode-image.sh`, then call `stitch-mcp-upload-screens-from-images`. Offer edit or convert after.
+There's no upload route — the Stitch MCP API has no image-upload tool. Tell the user, and offer to recreate the design from a text prompt via `stitch-mcp-generate-screen-from-text`, or to hand-write the HTML and use a conversion skill's local-file route instead.
 
 **If the user wants to convert an existing screen:**
 Get the HTML via `get_screen`, download it with `fetch-stitch.sh` if needed, then run the appropriate framework skill.
@@ -67,7 +66,6 @@ Stitch uses inconsistent ID formats across tools. Use the `stitch-mcp-*` wrapper
 | `list_screens` | `projects/ID` | — | Returns full paths |
 | `get_screen` | Numeric | Numeric | — |
 | `generate_screen_from_text` | Numeric | — | — |
-| `upload_screens_from_images` | Numeric | — | — |
 | `edit_screens` | Numeric | Numeric array | — |
 | `generate_variants` | Numeric | Numeric array | — |
 | `create_design_system` | Numeric (optional) | — | Returns Asset `name` |