Menu
Sync local files with a Google Stitch project. Downloads all screens and updates local config. Use when the user has made changes in Stitch's web UI and wants to pull them into their local project.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Generate a screen using Google Stitch or Claude Code from a text description. Use when the user wants to create a new web page, landing page, dashboard, pricing page, about page, or any UI design. Also use when the user says "design a page", "create a screen", or "build a webpage". Requires DESIGN.md for visual consistency — blocks generation if missing.
Build a deployable site from generated Stitch screens. Use when the user wants to export, ship, publish, or turn their screens into a real website. Maps screens to routes and generates a static HTML, Astro, or Next.js project.
Research a business and generate a tailored DESIGN.md. Use when the user wants to redesign a website, create a design system, or build a web presence for a specific business. Investigates the business model, analyzes competitors, understands the audience, and only generates when confident enough. The recommended entry point for any real business project.
Generate a DESIGN.md from a brand brief. Use when the user wants to create a visual identity, design system, or brand style guide for a web project. Also use when starting a new website from scratch. Asks for company name, industry, target audience, and aesthetic direction. Outputs an 8-section design spec with colors, typography, and anti-slop rules.
Deep design quality evaluation of AI-generated HTML against DESIGN.md. Use when the user wants to check if a generated screen looks like obvious AI output, assess design fidelity, or get actionable improvement suggestions. Produces a scored evaluation report with evidence-backed findings.
Preview generated Stitch screens. Use when the user says "show me the page", "what does it look like", or wants to see a screenshot of a screen they generated. Displays screen images inline or opens HTML files in the browser.
| name | dg-sync |
| description | Sync local files with a Google Stitch project. Downloads all screens and updates local config. Use when the user has made changes in Stitch's web UI and wants to pull them into their local project. |
Sync local files with a Google Stitch project.
Find the project to sync from:
mcp__stitch__list_projects and show available projectsList all screens in the project using mcp__stitch__list_screens.
Show what will be synced:
Project: [name] ([id])
Screens to sync: [count]
- Screen Name 1
- Screen Name 2
...
Confirm with the user before downloading.
Download each screen using mcp__stitch__get_screen_code and save the HTML to screens/[screen-name].html.
Update .guardrc.json with:
projectId: the synced project IDscreens: array of synced screen records (id, name, lastSynced timestamp)lastSync: current timestampReport results:
screens/Check for design system using mcp__stitch__list_design_systems. If one exists and no local DESIGN.md is found, suggest running /dg-design to create one.
Next step: "Run /dg-preview to see synced screens."