---
name: extracting-stitch-mockups
description: >
  Extracts generated mockup images from Google Stitch project pages.
  Use when user provides a Stitch project URL (stitch.withgoogle.com/projects/...),
  mentions extracting/downloading Stitch mockups, saving Stitch designs, or wants to
  archive generated design assets. Requires authenticated Chrome browser profile.
allowed-tools: Read, Write, Bash, Grep, Glob
---

# Extract Stitch Mockups

## Quick Start
1. **Get project URL** - User provides `https://stitch.withgoogle.com/projects/{id}`
2. **Resolve feature directory** - Determine where to save using fallback chain
3. **Run extraction script** - Execute `scripts/extract_images.py` with Playwright
4. **Save to exports** - Images saved to `design-intent/google-stitch/{feature}/exports/`

---

## Feature Directory Resolution

Determine target feature directory using this fallback chain:

1. **User specifies** - Optional `--feature` argument provided
2. **Auto-detect** - Match Stitch project title to existing `design-intent/google-stitch/{feature}/` directories
3. **Prompt user** - List existing directories and ask user to select or create new

### Auto-Detection Logic
- Extract project title from Stitch page (e.g., "Eco-Travel Home Screen")
- Normalize to feature format: lowercase, hyphens, strip special chars
- Search for matching directory in `design-intent/google-stitch/`
- If multiple partial matches, prompt user to select

---

## Extraction Process

### Prerequisites
- Chrome browser with active Google session
- uv installed (https://github.com/astral-sh/uv)
- Playwright browsers: `uv run playwright install chromium`

### Script Execution
```bash
# Basic usage
uv run scripts/extract_images.py "https://stitch.withgoogle.com/projects/123"

# With explicit feature directory
uv run scripts/extract_images.py "https://stitch.withgoogle.com/projects/123" --feature dashboard

# Or run directly (after chmod +x)
./scripts/extract_images.py "https://stitch.withgoogle.com/projects/123"
```

### Image Filtering
- Source: `lh3.googleusercontent.com/aida/...` URLs only
- Size filter: Images with dimensions >= 400px (mockups, not UI elements)
- Excludes: avatars, icons, UI chrome

### Generation Check
Script checks for "Generating..." status on page:
- If detected: Exit with message to retry after generation completes
- If complete: Proceed with extraction

---

## Output Structure

Images saved to existing feature's `exports/` directory:

```
design-intent/google-stitch/{feature}/exports/
├── mockup-1.png
├── mockup-2.png
└── mockup-N.png
```

### File Naming
- Sequential numbering: `mockup-{index}.png`
- Index starts at 1
- Preserves original image format (typically PNG)

---

## Report

After extraction, display summary:

```
Extracted {N} mockups from Stitch project

Project: {project-title}
URL: {project-url}

Saved to: design-intent/google-stitch/{feature}/exports/
  - mockup-1.png (400x800)
  - mockup-2.png (400x800)
  - ...

Feature directory:
  design-intent/google-stitch/{feature}/
  ├── prompt-v{N}.md
  ├── exports/          <- Mockups saved here
  │   ├── mockup-1.png
  │   └── mockup-2.png
  └── wireframes/
```

---

## Common Issues

- **Not authenticated** - Open Chrome, sign into Google, then retry
- **Still generating** - Wait for Stitch to complete, then retry
- **No feature directory** - Run authoring-stitch-prompts first, or specify `--feature`

See [TROUBLESHOOTING.md](TROUBLESHOOTING.md) for detailed solutions.

## Reference Files
- [WORKFLOW.md](WORKFLOW.md) - Detailed browser automation steps
- [EXAMPLES.md](EXAMPLES.md) - Sample extractions
- [TROUBLESHOOTING.md](TROUBLESHOOTING.md) - Error handling


---
Source attribution: joaquimscosta
Original project: https://github.com/joaquimscosta/arkhe-claude-plugins/blob/b030447883dd72549ca090d343f96fb5601861a7/plugins/google-stitch/skills/extracting-stitch-mockups/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Dave AI.

## Upstream license notice

MIT License

Copyright (c) 2025 Joaquim Costa

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Dave AI resource metadata

Creator / publisher: joaquimscosta
Original project: https://github.com/joaquimscosta/arkhe-claude-plugins/blob/b030447883dd72549ca090d343f96fb5601861a7/plugins/google-stitch/skills/extracting-stitch-mockups/SKILL.md
Attribution basis: Recovered original package and original project license at a pinned revision

Fields of work: Design
Roles: Graphic Designer, Product Designer, UX Designer
Specialties: API
Tools: Google Stitch, Playwright
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: 99f1885b0faa7a2b61c53f47ebb1bf8476aa94eb40f7a5f32f965c07dff4c355
Metadata reviewed: 2026-10-27
This metadata supersedes earlier Dave AI catalog attribution. Original instruction and supporting files are preserved.