skills.rest
macCesar
macCesarCOMMUNITY
Explore all skills by this author →
Website𝕏@codigomovilGitHub

stitch-showcase

Convert Google Stitch design exports into navigable HTML showcase galleries.

Updated Mar 11, 2026
Search Tags:#automation#design-system#showcase#stitch#zip-processing#stitch-exports
One-click install
npx skills add https://github.com/macCesar/aiskills --skill stitch-showcase
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-showcase
Source: https://github.com/macCesar/aiskills/tree/main/skills/stitch-showcase
Command: npx skills add https://github.com/macCesar/aiskills --skill stitch-showcase

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps teams convert Google Stitch design exports (zips containing code.html and screen.png) into a fully navigable, browsable showcase without manual UI assembly.

Core Features & Use Cases

  • Build a complete gallery from Stitch exports using pre-built templates (index.html, viewer.html, catalog.html).
  • Enrich metadata by extracting screen titles and descriptions and organizing screens into sections.
  • Update showcases as new Stitch zips arrive, assigning new screens to the proper sections.
  • Toggle between mobile and web viewers automatically based on per-screen type, ensuring the right presentation.

Quick Start

Run the Stitch showcase workflow on a folder containing Stitch zips to generate index.html, viewer.html, and catalog.html.

Frequently Asked Questions about stitch-showcase

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a navigable gallery from Google Stitch design exports?▼

You can generate a showcase from Stitch exports by running the workflow on a folder of zips. It uses pre-built templates to output index.html, viewer.html, and catalog.html for navigation.

What is included in a Stitch export zip file?▼

Stitch export zips contain code.html and screen.png files. The workflow extracts these components, pulls screen titles and descriptions, and organizes screens into browsable sections.

Does the showcase automatically handle mobile and web viewer formats?▼

Yes, the generated showcase automatically toggles between mobile and web viewers based on per-screen type. This ensures each Stitch design export is presented in the appropriate viewer format.

Can I update an existing design showcase when new Stitch zips arrive?▼

You can update existing showcases when new Stitch zips arrive. The workflow processes new design exports and automatically assigns the new screens to the proper sections within your gallery.

Do I need Python to generate a showcase from Stitch exports?▼

Yes, Python is required. The workflow uses Python scripts in the scripts directory and prebuilt templates to process the Stitch export zips and generate the showcase HTML files.

How does the showcase organize design screens into sections?▼

The showcase organizes screens by extracting screen titles and descriptions from the Stitch exports. This AI-assisted metadata enrichment automatically categorizes and sections the design assets.

Related Skills

Explore More Design & Creative Skills→
pjcaupjcau
2

release-prep

Generate PCB files, run DFM/DFA checks, and export gerbers to a release directory.

Community
Intermediate
moonseokchoi-krmoonseokchoi-kr

stitch-loop

Orchestrate baton-driven Stitch page generation and integration from .stitch/next-prompt.md.

Community
Advanced
leadmind-aileadmind-ai

designer

Transform functional descriptions into stitched maquettes and a documented design system.

Official
Advanced
Zoomma1Zoomma1
3

claude-design-to-code

Convert Claude Design HTML mockups into Angular standalone components with templates and SCSS.

Community
Intermediate