메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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"
