# Generating Stitch Screens

> >

- **Type:** Skill
- **Install:** `agentstack add skill-joaquimscosta-arkhe-claude-plugins-generating-stitch-screens`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [joaquimscosta](https://agentstack.voostack.com/s/joaquimscosta)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [joaquimscosta](https://github.com/joaquimscosta)
- **Source:** https://github.com/joaquimscosta/arkhe-claude-plugins/tree/main/plugins/google-stitch/skills/generating-stitch-screens

## Install

```sh
agentstack add skill-joaquimscosta-arkhe-claude-plugins-generating-stitch-screens
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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 `` and `` 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](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 prompt text]

---

[component prompt text]

---

[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](WORKFLOW.md) for detailed steps, error handling, and retry logic.

## Examples

See [EXAMPLES.md](EXAMPLES.md) for end-to-end generation scenarios.

## Troubleshooting

See [TROUBLESHOOTING.md](TROUBLESHOOTING.md) for MCP-specific issues.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [joaquimscosta](https://github.com/joaquimscosta)
- **Source:** [joaquimscosta/arkhe-claude-plugins](https://github.com/joaquimscosta/arkhe-claude-plugins)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-joaquimscosta-arkhe-claude-plugins-generating-stitch-screens
- Seller: https://agentstack.voostack.com/s/joaquimscosta
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.