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.
日本語の概要は準備中です。原文の説明を表示しています。
Creates a new Stitch project container (a design workspace). Call this when starting a new design session to get a projectId for screen generation.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Creates a new Stitch project. A project is a container that holds one or more generated screens. You need a projectId before you can call generate_screen_from_text.
Only use this skill when the user explicitly mentions "Stitch" in their request. Never trigger Stitch operations silently during regular conversation.
projectId before calling generate_screen_from_textInfer a descriptive project title from the user's request:
| User says | → title |
|---|---|
| "Design a pet adoption app" | "PawPals" or "Pet Adoption App" |
| "Make a login page" | "Login Page" |
| "SaaS dashboard for analytics" | "Analytics Dashboard" |
| "E-commerce product listing" | "Product Listing" |
If no clear name is evident, use a descriptive label: "Design Project [date]".
{
"name": "create_project",
"arguments": {
"title": "[Descriptive project title]"
}
}
The tool returns a name field in the format projects/NUMERIC_ID. You must extract the numeric portion:
Tool response:
{
"name": "projects/3780309359108792857",
"title": "Analytics Dashboard",
"createTime": "2026-03-24T14:30:00Z",
"visibility": "PRIVATE",
"deviceType": "DESKTOP",
"projectType": "TEXT_TO_UI",
"designTheme": {
"colorMode": "LIGHT",
"customColor": "",
"colorVariant": "TONAL_SPOT",
"roundness": "ROUND_TWELVE",
"spacingScale": 1,
"headlineFont": "INTER",
"bodyFont": "INTER",
"labelFont": "INTER",
"namedColors": {},
"designMd": ""
}
}
The
designThemepopulates with full values (includingdesignMdandnamedColors) after the first screen is generated. For a brand-new project, expect mostly empty/default theme values.
Extract:
projects/3780309359108792857 → use for list_screens, get_project3780309359108792857 → use for generate_screen_from_text, get_screenStore both values. Announce to the user:
"Created project 'Analytics Dashboard' (ID:
3780309359108792857). Ready to generate screens."
| Tool | ID format required |
|---|---|
generate_screen_from_text | Numeric only: 3780309359108792857 |
get_screen | Numeric only: 3780309359108792857 |
list_screens | Full path: projects/3780309359108792857 |
get_project | Full path: projects/3780309359108792857 |
After creating a project, the next step is always stitch-mcp-generate-screen-from-text to generate the first screen.
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
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.
日本語の概要は準備中です。原文の説明を表示しています。