Agent skill

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.

View SKILL.md on GitHub Repository
Stars 9
Forks 1

Install this agent skill to your Project

npx add-skill https://github.com/joaquimscosta/arkhe-claude-plugins/tree/main/plugins/google-stitch/skills/generating-stitch-screens

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:

markdown
<!-- 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.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

joaquimscosta/arkhe-claude-plugins

Skill Name

What this skill does. Use when user mentions "keyword1", "keyword2", or "keyword3". Keep under 1,024 characters and include specific trigger keywords.

9 1
Explore
joaquimscosta/arkhe-claude-plugins

plugin-release-checker

9 1
Explore
joaquimscosta/arkhe-claude-plugins

skill-validator

Validate skills against Anthropic best practices for frontmatter, structure, content, file organization, hooks, MCP, and security (62 rules in 8 categories). Use when creating new skills, updating existing skills, before publishing skills, reviewing skill quality, or when user mentions "validate skill", "check skill", "skill best practices", "skill review", or "lint skill".

9 1
Explore
joaquimscosta/arkhe-claude-plugins

sync-docs

Sync official Anthropic documentation and analyze impact on project components. Runs docs/reference/update-claude-docs.sh, computes diffs, and reports impacts on the skill validator, plugins, and project documentation. Use when user mentions "sync docs", "update reference docs", "refresh docs", or "check doc changes".

9 1
Explore
joaquimscosta/arkhe-claude-plugins

research-frontmatter

Enforce standard YAML frontmatter on research documents in docs/research/. Use when creating, editing, or promoting research files, when user mentions "research metadata", "research frontmatter", or "research staleness".

9 1
Explore
joaquimscosta/arkhe-claude-plugins

deep-research

Deep research on technical topics using EXA tools with intelligent two-tier caching. Use when user asks to research a topic, investigate best practices, look up information, find patterns, or explore architectures. Also invoked by /research command. Triggers: "research", "look up", "investigate", "deep dive", "find information about", "what are best practices for", "how do others implement".

9 1
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results