Design MD
Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
Design & UI
Google Labs8.7k
Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a specific UI state, share a static version of a page, or prepare assets for Stitch upload, even if the user just asks to 'save the HTML' or 'mock the view'.
Install
Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.
$ npx skills add google-labs-code/stitch-skills --skill stitch::extract-static-htmlNeeds Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.
How to use Stitch Extract Static Html
Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name.
It includes scripts that Claude may run on your computer, so skim them on GitHub before you install.
What the instructions cover
- 1Which Strategy to Use
- 2Strategy A: Puppeteer Snapshot (Recommended)
- 3Strategy B: Browser Subagent Capture
- 4Appendix: Static Fallback (MockPage.jsx)
Section headings from the skill's SKILL.md file.
What's inside · 4 files
- SKILL.md
- scripts/extract_inline_html.ts
- scripts/post_process.ts
- scripts/snapshot.ts
More from Google Labs
See all →Enhance Prompt
Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better…
AI & AgentsGoogle Labs8.7k
React Vite Dashboard
Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).
FrontendGoogle Labs8.7k
Remotion
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
Video & MotionGoogle Labs8.7k
More Claude skills for design
See all →Frontend DesignTop pick
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't…
Design & UI
Anthropic187k
UI UX Pro MaxTop pick
UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design…
Design & UI
NextLevelBuilder145k
Taste SkillTop pick
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals…
Design & UI
Leon110k
Impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise improve a frontend interface: websites, landing pages…
Design & UI
Paul Bakaus103k