Stats
Actions
Tags
From cc-design
Preview Stitch screens by downloading HTML locally and opening in browser.
How this command is triggered — by the user, by Claude, or both
Slash command
/cc-design:previewcommands/The summary Claude sees in its command listing — used to decide when to auto-load this command
# cc-design preview Preview Stitch screens without leaving Claude Code. ## Usage ## How It Works Stitch URLs require Google auth — screenshot URLs 403 in browser, the local `stitch-mcp serve` proxy times out on asset fetches. The working approach: 1. Call `get_screen` via MCP to get `htmlCode.downloadUrl` 2. Fetch HTML with `x-goog-api-key: $STITCH_API_KEY` header — returns 200 3. Save to `/tmp/stitch-preview-[screenId].html` 4. Open local file in browser ## Implementation 1. Check for `.cc-design/stitch.json` — if missing, say "No Stitch project found. Run `/cc-design:extract <url...
Preview Stitch screens without leaving Claude Code.
/cc-design:preview # Preview all screens in .cc-design/stitch.json
/cc-design:preview <screen-id> # Preview a specific screen
Stitch URLs require Google auth — screenshot URLs 403 in browser, the local stitch-mcp serve proxy times out on asset fetches. The working approach:
get_screen via MCP to get htmlCode.downloadUrlx-goog-api-key: $STITCH_API_KEY header — returns 200/tmp/stitch-preview-[screenId].html.cc-design/stitch.json — if missing, say "No Stitch project found. Run /cc-design:extract <url> first."projectId from .cc-design/stitch.json. If a screen ID was passed, process only that screen; otherwise use all screens listed in stitch.json.get_screen to get htmlCode.downloadUrlcurl -s -o /tmp/stitch-preview-[screenId].html \
-H "x-goog-api-key: $STITCH_API_KEY" \
"[downloadUrl]"
open /tmp/stitch-preview-[screenId].htmlOpened 3 screens:
• Main Landing Page → /tmp/stitch-preview-d6d7d4d9.html
• Dark Variant C → /tmp/stitch-preview-9cbbbb9f.html
• Get Your Blueprint → /tmp/stitch-preview-a1a74df9.html
Tell the user Stitch isn't connected and refer them to references/stitch-setup.md.
npx claudepluginhub zm2231/cc-design --plugin cc-design/previewLaunches interactive preview for HTML document editing: starts local HTTP server, sets up control panel, opens wrapper in Playwright browser.
/previewStarts Slidev dev server to preview slides.md presentation with hot reload, presenter mode, drawing tools, and auto-opens browser on localhost:3030.
/previewPreviews corrections for grammar, tone, and clarity on input text (prompts, commits, PRs) without submitting, logging, or modifying. Shows dry-run report with verbatim review, change diff, stats, and recommendation.
/previewCreates ephemeral preview environment in AWS EKS for feature branch with unique URL, Keycloak client, TTL auto-cleanup, and PR linking.