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.
日本語の概要は準備中です。原文の説明を表示しています。
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.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Retrieves full metadata for a specific Stitch project. Useful for understanding an existing project's theme and screen list before generating additional screens.
Only use this skill when the user explicitly mentions "Stitch".
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.
The user may provide the project reference in several formats — always extract to the projects/ID format:
| Input format | → Argument for get_project |
|---|---|
3780309359108792857 (numeric) | projects/3780309359108792857 |
projects/3780309359108792857 | projects/3780309359108792857 (use as-is) |
https://stitch.withgoogle.com/projects/3780309359108792857 | Extract ID → projects/3780309359108792857 |
{
"name": "get_project",
"arguments": {
"name": "projects/3780309359108792857"
}
}
{
"name": "projects/3780309359108792857",
"title": "Analytics Dashboard",
"createTime": "2024-11-10T09:00:00Z",
"updateTime": "2024-11-15T10:30:00Z",
"deviceType": "DESKTOP",
"visibility": "PRIVATE",
"projectType": "TEXT_TO_UI",
"origin": "STITCH",
"metadata": {
"isRemixed": false,
"userRole": "OWNER"
},
"designTheme": {
"colorMode": "LIGHT",
"customColor": "#6366F1",
"colorVariant": "TONAL_SPOT",
"roundness": "ROUND_TWELVE",
"saturation": 3,
"spacingScale": 1,
"headlineFont": "INTER",
"bodyFont": "INTER",
"labelFont": "INTER",
"font": "INTER",
"headlineFontFamily": "Inter",
"bodyFontFamily": "Inter",
"labelFontFamily": "Inter",
"namedColors": {
"primary": "#5B5FC7",
"on_primary": "#FFFFFF",
"primary_container": "#E1DFFF",
"on_primary_container": "#414594",
"secondary": "#5C5D72",
"on_secondary": "#FFFFFF",
"tertiary": "#785572",
"on_tertiary": "#FFFFFF",
"surface": "#FBF8FF",
"on_surface": "#1B1B21",
"surface_container": "#EFEDF5",
"surface_container_low": "#F5F2FA",
"surface_container_high": "#E9E7EF",
"outline": "#777680",
"error": "#BA1A1A",
"on_error": "#FFFFFF"
},
"overridePrimaryColor": "",
"overrideSecondaryColor": "",
"overrideTertiaryColor": "",
"overrideNeutralColor": "",
"backgroundLight": "#FBF8FF",
"backgroundDark": "#131316",
"description": "Modern indigo-toned interface with clean surfaces",
"designMd": "# Design System\n\n## Color Palette\n..."
},
"screenInstances": [
{
"name": "projects/3780309359108792857/screens/88805...",
"id": "88805...",
"sourceScreen": "screens/88805...",
"type": "SCREEN_INSTANCE",
"width": 412,
"height": 892,
"x": 0,
"y": 0,
"hidden": false
},
{
"name": "projects/3780309359108792857/screens/99901...",
"id": "99901...",
"sourceScreen": "screens/99901...",
"type": "DESIGN_SYSTEM_INSTANCE",
"width": 412,
"height": 892,
"x": 500,
"y": 0,
"hidden": false,
"sourceAsset": "assets/design-system-123"
}
]
}
designMdis truncated above — in practice it's a full auto-generated design system doc (often 500+ lines).namedColorstypically contains 40+ semantic tokens; only the most common are shown here.
| Field | Type | Values / Notes |
|---|---|---|
colorMode | enum | LIGHT, DARK |
customColor | string | Hex seed color (e.g. #6366F1). This is the color seed — NOT called primaryColor |
colorVariant | enum | MONOCHROME, NEUTRAL, TONAL_SPOT, VIBRANT, EXPRESSIVE, FIDELITY, CONTENT, RAINBOW, FRUIT_SALAD |
roundness | enum | ROUND_FOUR, ROUND_EIGHT, ROUND_TWELVE, ROUND_FULL |
spacingScale | number | 0–3 (density multiplier) |
headlineFont | enum | 68-font set: INTER, GEIST, DM_SANS, MANROPE, PLUS_JAKARTA_SANS, WORK_SANS, SPACE_GROTESK, SORA, OUTFIT, RALEWAY, QUICKSAND, MONTSERRAT, OSWALD, PLAYFAIR_DISPLAY, MERRIWEATHER, NOTO_SERIF, EB_GARAMOND, LITERATA, SOURCE_SERIF_4, SOURCE_SANS_3, NUNITO_SANS, JETBRAINS_MONO, BEBAS_NEUE, ANTON, ARCHIVO_NARROW — see stitch-ued-guide for the full 68-value list |
bodyFont | enum | Same 68-font set |
labelFont | enum | Same 68-font set |
font | enum | Deprecated — legacy single-font field, same enum |
namedColors | object | 40+ semantic color tokens (primary, on_primary, surface, surface_container, outline, error, etc.) |
overridePrimaryColor | string | Hex override, empty string if unused |
overrideSecondaryColor | string | Hex override, empty string if unused |
overrideTertiaryColor | string | Hex override, empty string if unused |
overrideNeutralColor | string | Hex override, empty string if unused |
backgroundLight | string | Hex background for light mode |
backgroundDark | string | Hex background for dark mode |
description | string | Brief aesthetic description of the theme |
designMd | string | Auto-generated design system markdown — the full token spec. Can be very long |
spacing | object | Optional. Map of spacing token name → CSS value (e.g. {"sm": "8px"}) |
typography | object | Optional. Map of typography level name (e.g. h1, body) → Typography token (fontFamily, fontSize, fontWeight, letterSpacing, lineHeight, all optional strings) |
| Field | Type | Values / Notes |
|---|---|---|
deviceType | string | MOBILE, DESKTOP, TABLET, AGNOSTIC, or DEVICE_TYPE_UNSPECIFIED |
visibility | enum | PRIVATE, PUBLIC |
projectType | enum | TEXT_TO_UI, PROJECT_DESIGN, etc. |
origin | enum | STITCH, IMPORTED_FROM_GALILEO |
metadata.isRemixed | boolean | Whether this project was remixed from another |
metadata.userRole | string | OWNER, VIEWER, etc. |
| Field | Type | Notes |
|---|---|---|
id | string | Numeric screen ID |
sourceScreen | string | Path reference to the source screen |
type | enum | SCREEN_INSTANCE, DESIGN_SYSTEM_INSTANCE, GROUP_INSTANCE |
width / height | number | Pixel dimensions |
x / y | number | Canvas position |
hidden | boolean | Whether hidden in the project |
sourceAsset | string | Present on DESIGN_SYSTEM_INSTANCE types — references the design system asset |
Use designMd and namedColors when generating new screens — they contain the authoritative design system for this project. Pass namedColors to stitch-design-system for instant token extraction.
designTheme — use it to keep new screens visually consistentscreenInstances list — extract screenId values if you need to inspect specific screensstitch-mcp-list-screens for a richer view of the screen list including thumbnailsまだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
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.
日本語の概要は準備中です。原文の説明を表示しています。