メニュー
AI design generation with Google Stitch. Generate UI designs from text prompts, export Tailwind/HTML/DESIGN.md, orchestrate design-to-code pipeline. Use for rapid prototyping, UI generation, design exploration.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/phuc-nt/my-translator --skill ck-stitchコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
AI-optimized browser automation CLI with context-efficient snapshots. Use for long autonomous sessions, self-verifying workflows, video recording, and cloud browser testing (Browserbase).
Generate images via Nano Banana with 129 curated prompts. Mandatory validation interview refines style/mood/colors (use --skip to bypass). 3 modes: search, creative, wild. Styles: Ukiyo-e, Bento grid, cyberpunk, cinematic, vintage patent.
Analyze images/audio/video with Gemini API (better vision than Claude). Generate images (Imagen 4, Nano Banana 2, MiniMax), videos (Veo 3, Hailuo), speech (MiniMax TTS), music (MiniMax). Use for vision analysis, transcription, OCR, design extraction, multimodal AI.
SKILL.md を表示中
SOC 職業分類に基づく
| name | ck:stitch |
| description | AI design generation with Google Stitch. Generate UI designs from text prompts, export Tailwind/HTML/DESIGN.md, orchestrate design-to-code pipeline. Use for rapid prototyping, UI generation, design exploration. |
| license | MIT |
| allowed-tools | ["Bash","Read","Write","Edit"] |
| argument-hint | [design prompt or action] |
| metadata | {"author":"claudekit","version":"1.0.0"} |
Generate high-fidelity UI designs from text prompts via Google Stitch. Export Tailwind/HTML, orchestrate design-to-code pipelines with existing UI skills.
Free tier: 200 credits/day (standard), 50/day (experimental). Resets at midnight UTC.
# Get API key at https://stitch.withgoogle.com → Settings → API Keys
export STITCH_API_KEY="sk_..."
Add to .env or .opencode/.env.
export STITCH_PROJECT_ID="my-project" # Default project (auto-creates if unset)
export STITCH_QUOTA_LIMIT="200" # Override daily limit
Add to .opencode/.mcp.json for native design context in Claude Code:
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["@_davideast/stitch-mcp", "proxy"],
"env": { "STITCH_API_KEY": "${STITCH_API_KEY}" }
}
}
}
See references/stitch-mcp-setup.md for alternative options (gcloud, auto-installer).
cd .opencode/skills/stitch/scripts && npm install
# Check quota
npx tsx scripts/stitch-quota.ts check
# Generate design
npx tsx scripts/stitch-generate.ts "A checkout page with payment form and cart summary"
# Export as HTML + DESIGN.md
npx tsx scripts/stitch-export.ts <screen-id> --format all --output ./stitch-exports/
Generate UI design from text prompt.
npx tsx scripts/stitch-generate.ts "<prompt>" [--project <id>] [--device mobile|desktop|tablet] [--variants <count>]
Returns: screen ID, preview image URL. With --variants: additional design alternatives.
Export generated design as HTML/Tailwind, screenshot, or DESIGN.md.
npx tsx scripts/stitch-export.ts <screen-id> [--format html|image|all] [--output <dir>]
Outputs:
design.html — Semantic HTML with Tailwind CSS classesdesign.png — Screenshot of the designDESIGN.md — Agent-readable design spec (colors, typography, spacing, components)Check and manage daily quota.
npx tsx scripts/stitch-quota.ts check # Show remaining credits
npx tsx scripts/stitch-quota.ts increment # Bump after generation
npx tsx scripts/stitch-quota.ts reset # Force reset (auto-resets daily)
Refine an existing design.
const editedScreen = await screen.edit("Make the header darker and add a search bar");
stitch-quota.ts check. If exhausted, suggest ck:ui-ux-pro-max fallback.stitch-generate.ts with user's design promptstitch-export.ts --format all to get HTML + DESIGN.mdck:frontend-design — React/Vue/Svelte components from Tailwind exportck:ui-ux-pro-max — Full page layouts with style guide integrationck:ui-styling — Design token extraction from DESIGN.mdstitch-quota.ts incrementDESIGN.md in project root or plan directoryDESIGN.md and use it as design specSee references/design-to-code-pipeline.md for detailed patterns and examples.
~/.claudekit/.stitch-quota.jsonck:ui-ux-pro-max for text-based design generationSee references/quota-management.md for strategies.
| Topic | File |
|---|---|
| SDK API | references/stitch-sdk-api.md |
| MCP Setup | references/stitch-mcp-setup.md |
| Pipeline Patterns | references/design-to-code-pipeline.md |
| Quota Strategy | references/quota-management.md |