Stitch → Registry Pipeline
Generate UI screens in Gemini Stitch, export HTML, and publish to the @vandoko component registry
Generate a complete UI mockup in Gemini Stitch, export the HTML, feed it through HTML → Registry Ingestion, and publish the result to the @vandoko component registry — all in one pipeline.
Prerequisites
Gemini CLI
Verify with: gemini --version
Stitch extension
~/.gemini/extensions/Stitch/gemini-extension.json configured
Stitch API key
API key set in the Stitch extension config
html-to-registry skill
Skill loaded for the 5-phase conversion pipeline
vandoko-registry repo
Checked out locally with pnpm dependencies installed
Command Sequence
Step 1: Generate a screen in Stitch
Run the Stitch generate command with a detailed prompt describing the UI:
Capture the project_id and screen_id from the output:
PROJECT_ID=$(echo "$SCREEN_OUTPUT" | grep -oP '(?<=project_id: )\S+')
SCREEN_ID=$(echo "$SCREEN_OUTPUT" | grep -oP '(?<=screen_id: )\S+')Step 2: Review the generated screen
Inspect the screen before downloading to confirm it matches the prompt intent:
gemini -p "/stitch get screens $PROJECT_ID" --output-format text -yVerify the layout looks correct. If not, regenerate with a refined prompt before proceeding.
Step 3: Download HTML export
Create the output directory and download the HTML:
mkdir -p ./stitch-exports
gemini -p "/stitch download html $PROJECT_ID $SCREEN_ID --output ./stitch-exports/pricing-saas.html" --output-format text -yStep 4: Feed through html-to-registry
Load the html-to-registry skill and provide the exported file path:
Convert ./stitch-exports/pricing-saas.html to a registry componentThe 5-phase pipeline runs automatically:
- Extract — parse HTML, identify sections (pricing cards, toggle, trust badges)
- Analyze — map inline styles to Tailwind classes, colors to oklch tokens
- Convert — generate TSX with Props interface,
cn()utility, shadcn primitives - Validate — run 10-check validation
- Registry output — generate all 7 artifacts
Step 5: Publish to registry
From the vandoko-registry repo root:
pnpm registry:build
pnpm build
git add -A && git commit -m "feat: add pricing-saas component from Stitch"
git push vandoko mainStep 6: Verify publication
Confirm the component is live and installable:
# Registry JSON
curl https://registry.vandoko.com/r/pricing-saas.json
# Install test
npx shadcn@latest add @vandoko/pricing-saas --dry-runFull Pipeline Diagram
Stitch generate screen (text prompt)
→ /stitch download html → ./stitch-exports/pricing-saas.html
→ html-to-registry Phase 1-5
→ registry/new-york/blocks/pricing-saas/pricing-saas.tsx
→ registry.json manifest entry
→ preview wrapper + component registry + MDX docs + sidebar
→ pnpm registry:build + pnpm build
→ git push vandoko main → Vercel deploy
→ Live at registry.vandoko.com/r/pricing-saas.json
→ Installable: npx shadcn@latest add @vandoko/pricing-saasVerification Checklist
- Stitch screen generated successfully (project_id + screen_id captured)
- HTML file exists at
./stitch-exports/pricing-saas.html - Converted TSX passes all 10 validation checks
- All 7 registry artifacts generated
- Component live at
registry.vandoko.com npx shadcn@latest add @vandoko/pricing-saas --dry-runresolves
Troubleshooting
| Symptom | Likely Cause | Fix |
|---|---|---|
| "Extension not found" | Stitch not installed | Confirm ~/.gemini/extensions/Stitch/ exists and gemini CLI >= 1.0 |
| Generation takes >30 seconds | Full-page screens are slow | Normal; -y flag skips confirmation; wait for completion |
| HTML export has inline styles only | Expected behavior | html-to-registry handles normalization; inline styles are the input format |
| screen_id parsing fails | Output format varies | Inspect raw output before scripting; adjust grep pattern |
| oklch conversion inaccurate | Inline hex values ambiguous | Manual review of token mapping; use the oklch Token Map table as reference |