본문으로 건너뛰기
cccskills
무료GitHub에 공개

generating-stitch-screens

Generates Stitch screens from authored prompt files using MCP tools. Reads prompt sections, sends each to Stitch for generation, and fetches resulting images and code. Use when user mentions "generate in stitch", "create stitch screens", "run prompts in stitch", "send prompts to stitch", "generate screens from prompts", "fetch stitch images", or has prompt-v*.md files ready for generation. Requires Stitch MCP server.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

실행 점수 미검증

설치 방법 보기

포함된 파일(4)

  • SKILL.md3.3 KB
  • EXAMPLES.md7.3 KB
  • TROUBLESHOOTING.md4.8 KB
  • WORKFLOW.md6.5 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Generating Stitch Screens

Orchestrate screen generation in Google Stitch using MCP tools. Reads authored prompt files, sends each section to Stitch for generation, and fetches resulting images and code.

Prerequisites

Requires Stitch MCP server (@_davideast/stitch-mcp). If MCP tools are not available, display:

Stitch MCP is not configured.
Run /stitch-setup for guided setup, or see the plugin README for manual configuration.

Never fail silently. Always inform the user if MCP is unavailable.

Typically invoked via /stitch-generate or after prompt authoring with MCP available.

Quick Start

  1. Read prompt file from design-intent/google-stitch/{feature}/prompt-v{N}.md
  2. Parse sections by --- separators, extracting <!-- Layout: --> and <!-- Component: --> markers
  3. Create or select project via MCP (create_project / list_projects)
  4. Generate screens — for each section: call generate_screen_from_text with prompt text
  5. Fetch images — for each screen: call fetch_screen_image at full resolution, save to {feature}/exports/ (see WORKFLOW.md for URL transformation)
  6. Fetch code (optional) — call fetch_screen_code, save to {feature}/code/
  7. Extract design context (optional) — call extract_design_context, save design DNA
  8. Report — project URL, screen list, file paths

Output Structure

design-intent/google-stitch/{feature}/
├── prompt-v{N}.md              <- Source prompts
├── exports/                    <- Generated images
│   ├── {layout-name}.png
│   ├── {component-1}.png
│   └── {component-2}.png
├── code/                       <- Generated code (optional)
│   ├── {layout-name}/
│   └── {component-1}/
└── design-dna.md               <- Extracted design context (optional)

Section Parsing

Prompt files use --- separators with HTML comment labels:

<!-- Layout: Analytics Dashboard -->
[layout prompt text]

---

<!-- Component: KPI Metrics -->
[component prompt text]

---

<!-- Component: Revenue Chart -->
[component prompt text]

Parse each section independently. Use the label text as the screen name in Stitch.

Error Handling

  • Partial failure: If some screens fail to generate, continue with remaining sections and report failures
  • Generation timeout: Wait, then retry once. If still pending, report and suggest checking Stitch directly
  • Empty result from fetch: Generation may still be in progress — wait briefly and retry

Workflow Details

See WORKFLOW.md for detailed steps, error handling, and retry logic.

Examples

See EXAMPLES.md for end-to-end generation scenarios.

Troubleshooting

See TROUBLESHOOTING.md for MCP-specific issues.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

adr

무료

Create, review, and manage Architecture Decision Records (ADRs) with auto-numbering, template detection, quality review, and index maintenance. Use when user mentions "ADR", "architecture decision", "document this decision", "create ADR", "review ADR", editing ADR files (docs/adr/, doc/adr/, .adr/), or discussing architectural choices and tradeoffs.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

joaquimscosta/arkhe-claude-plugins212026년 10월 16일 업데이트

architect

무료

Analyze system architecture, module structure, API contracts, data models, and code patterns. Use when designing systems, reviewing module boundaries, evaluating API designs, analyzing data models, checking pattern conformance, tracing decisions, or reviewing frontend architecture. Triggers: "architecture", "module design", "API design", "data model", "boundaries", "patterns", "decisions", "frontend architecture".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

joaquimscosta/arkhe-claude-plugins212026년 10월 16일 업데이트

Converts natural-language descriptions or UI spec files into optimized Google Stitch prompts. Use when creating, refining, or validating design directives for Google Stitch. Use when user says "create a Stitch prompt", "optimize this for Stitch", "convert this spec to a Stitch prompt", "write a UI prompt", or mentions Google Stitch prompt authoring. Follows Stitch best practices with short, directive prompts focused on screens, structure, and visual hierarchy.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

joaquimscosta/arkhe-claude-plugins212026년 10월 16일 업데이트

Zero-dependency live-preview server providing an agent↔browser bidirectional companion. Watches a content directory, wraps HTML fragments in a frame template, broadcasts live-reload over WebSocket, and captures browser-side click events to a JSONL file. Use when an agent needs to show HTML to the user in a browser and react to clicks — mockups, design exploration, gallery browsing, multi-select choices, prototype iteration. Triggered by "live preview", "browser companion", "preview server", "browser mockup", "show in browser", "arkhe-preview", or any skill that wants to write HTML fragments and have the user see them reload in real time.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

joaquimscosta/arkhe-claude-plugins212026년 10월 16일 업데이트

Deletes merged git branches (local and remote) and flags stale unmerged branches for manual review. Use when user mentions "cleanup branches", "delete merged branches", "prune old branches", "remove stale branches", "branch cleanup", or runs /cleanup-branches command.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

joaquimscosta/arkhe-claude-plugins212026년 10월 16일 업데이트

Interactive Claude Code environment setup wizard. Detects existing configuration, guides through best-practice setup for Global CLAUDE.md, project scaffolding, MCP servers, hooks, custom agents, keybindings, and settings. Use when user runs /devtools:code-env-setup, mentions "setup claude code", "configure claude", "claude code setup", "environment setup", or "initialize claude code".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

joaquimscosta/arkhe-claude-plugins212026년 10월 16일 업데이트

joaquimscosta의 스킬 모두 보기

이 스킬의 문제 신고