design-guard

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.

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.

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.