Menu
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.
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.
Check for Google Stitch updates and refresh the local knowledge base. Use when the user asks "what's new with Stitch", "are there any updates", or wants to know about current Stitch capabilities, models, or quotas. Searches official docs, blogs, and forums.
| name | dg-preview |
| description | 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. |
Preview generated Stitch screens.
Check for screens in the screens/ directory. If none exist, tell the user to run /dg-generate first.
If a screen name was provided as argument, find the matching .html file in screens/.
If no argument, list available screens and ask the user which one to preview.
Get the screen image by calling mcp__stitch__get_screen_image with the project ID and screen ID from .guardrc.json. This returns a base64-encoded PNG.
Display the image inline so the user can see the screen preview directly in the conversation.
Also mention that the user can open the HTML file in their browser: "You can also open screens/{name}.html in your browser for a full interactive preview."
Next step: "Refine with /dg-generate or build with /dg-build"
