Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes, keyboard navigation, focus management, and screen reader support.
日本語の概要は準備中です。原文の説明を表示しています。
Uploads a DESIGN.md file to a Stitch project as the first half of turning it into a Stitch Design System. Always paired with stitch-mcp-create-design-system-from-design-md, which must be called immediately after.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Uploads a DESIGN.md file into a Stitch project. This is step one of a two-step pair: the upload creates a screen instance holding the design doc, and create_design_system_from_design_md then turns that instance into a real Design System.
On its own, this tool does nothing useful. Uploading without the follow-up leaves an orphan screen instance and no design system. Always run both.
Only use this skill when the user explicitly mentions "Stitch" in their request. Never trigger Stitch operations silently during regular conversation.
stitch-design-md and want it driving generationThe tool takes base64, not raw markdown. The decoded content must be valid UTF-8 — uploads with invalid bytes are rejected outright.
# macOS (BSD base64 — no -w flag, and it does not wrap by default)
base64 -i DESIGN.md
# Linux (GNU base64 — -w 0 disables line wrapping)
base64 -w 0 DESIGN.md
Google's tool description says
base64 -w 0, which fails on macOS withinvalid option -- w. Use-ithere. Getting this wrong produces a confusing shell error rather than an API error, so check your platform first.
Wrapped base64 (with embedded newlines) is a common cause of rejected uploads. Both commands above emit a single unbroken line.
{
"name": "upload_design_md",
"arguments": {
"projectId": "3780309359108792857",
"designMdBase64": "IyBEZXNpZ24gU3lzdGVtCgpDb2xvcnM6IC4uLg=="
}
}
projectId is numeric only — no projects/ prefix. Passing the prefixed path here fails.
The upload creates a screen instance, and the next tool needs two identifiers from it. Fetch them with get_project (which does take the projects/ prefix):
{
"name": "get_project",
"arguments": { "name": "projects/3780309359108792857" }
}
From the returned screenInstances, take the newest entry and record both:
| Field | Example | Notes |
|---|---|---|
id | a1b2c3d4e5f6 | The screen instance id |
sourceScreen | projects/3780.../screens/98b5... | Full resource path |
The trap: id is the screen instance id, not the source screen id. They are different values and passing the source screen id as id fails. Google's own schema calls this out in bold, which is usually a sign it bites people.
Hand both values straight to stitch-mcp-create-design-system-from-design-md. Don't stop between the two steps or report success to the user yet — there's no design system until the second call returns.
| Tool | ID format required |
|---|---|
upload_design_md | Numeric only: 3780309359108792857 |
create_design_system_from_design_md | Numeric only, plus the screen-instance pair |
get_project | Full path: projects/3780309359108792857 |
stitch-design-mdstitch-mcp-create-design-system-from-design-mdstitch-mcp-apply-design-system or pass its asset id to generate_screen_from_textまだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes, keyboard navigation, focus management, and screen reader support.
日本語の概要は準備中です。原文の説明を表示しています。
Adds a purposeful animation layer to Stitch-generated components — CSS transitions, Framer Motion (React/Next.js), or Svelte transitions. Always respects prefers-reduced-motion.
日本語の概要は準備中です。原文の説明を表示しています。
Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette with hex values, typography rules, and Stitch-ready prompt snippets. Use this before stitch-loop or any multi-page build to establish design consistency.
日本語の概要は準備中です。原文の説明を表示しています。
Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4 @theme block, and a semantic design system document. Run this before framework conversion skills.
日本語の概要は準備中です。原文の説明を表示しています。
Converts a Stitch screen, a local HTML file, or a URL into clean, platform-agnostic HTML5 + CSS — semantic markup, CSS custom properties for theming, dark mode via prefers-color-scheme, mobile-first responsive, zero framework dependencies. Works in browsers, WebViews, Capacitor, and Ionic. Only the Stitch route needs an API key.
日本語の概要は準備中です。原文の説明を表示しています。
Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive questioning — then produces a rich PRD document and auto-generates Stitch screens. Your design buddy that thinks deeply before designing.
日本語の概要は準備中です。原文の説明を表示しています。