Generate Semantic Design Systems for AI UI

This skill generates DESIGN.md files optimized for Google Stitch screen generation, translating anti-generic frontend engineering directives into Stitch's semantic design language - descriptive natural-language rules paired with precise values Stitch's AI agent can interpret. The generated file becomes the single source of truth for prompting Stitch, encoding seven areas: visual atmosphere (mood/density/philosophy), color calibration (neutrals, accents, banned patterns with hex codes), typographic architecture (font stacks, scale hierarchy, anti-patterns), component behaviors (buttons/cards/inputs with interaction states), layout principles (grid systems, spacing, responsive strategy), motion philosophy (spring-physics specs, perpetual micro-interactions), and an explicit anti-pattern list. It defines the atmosphere along three taste axes - Density (Art Gallery Airy 1-3 to Cockpit Dense 8-10), Variance (Predictable Symmetric to Artsy Chaotic), Motion (Static Restrained to Cinematic Choreography) - with a default baseline of Variance 8, Motion 6, Density 4, adapted to the project's described vibe. Color rules mandate a maximum of one accent color under 80% saturation, strictly ban the "AI Purple/Blue Neon" aesthetic, require absolute neutral bases (Zinc/Slate), forbid mixing warm/cool grays, and ban pure black in favor of Off-Black/Zinc-950/Charcoal. Typography rules ban Inter for premium contexts (forcing Geist/Outfit/Cabinet Grotesk/Satoshi instead), ban generic serifs like Times New Roman or Georgia (allowing only distinctive modern serifs like Fraunces or Instrument Serif, and banning serif entirely in dashboards), and require monospace for all numbers above density 7. Hero section rules mandate a signature "inline image typography" technique (small photos embedded between words at type-height), ban filler scroll prompts and bouncing chevrons, ban centered layouts above variance 4, and cap primary CTAs at one with no secondary "Learn more" links. Component rules specify tactile button feedback with no neon glows, cards used only when elevation genuinely communicates hierarchy (replaced by border-top dividers at high density), skeletal loaders matching layout dimensions instead of generic spinners, and composed empty/error states. Layout rules ban the generic "3 equal cards" feature row and require CSS Grid over Flexbox percentage math, min-h-[100dvh] instead of h-screen for full-height sections, and max-width containment. Responsive rules enforce mobile-first single-column collapse below 768px, zero horizontal scroll tolerance, clamp()-based type scaling, 44px minimum touch targets, and proportionally reduced section spacing. Motion philosophy specifies spring physics (stiffness: 100, damping: 20) over linear easing, perpetual micro-interactions on active components, staggered cascade reveals for lists, and animating only transform/opacity for performance. A comprehensive anti-pattern list bans emojis, Inter, generic serifs, pure black, neon glows, oversaturated accents, gradient-heavy headers, custom cursors, overlapping elements, equal 3-column grids, generic placeholder names, fake round statistics, AI copywriting clichés ("Elevate," "Seamless," "Unleash"), filler scroll UI text, and broken Unsplash links (recommending picsum.photos or SVG avatars instead). The output follows a fixed 7-section DESIGN.md template with a worked example for each section.

Use it when generating a Google Stitch-compatible DESIGN.md or semantic design system for AI screen generation, or when translating premium frontend taste rules into Stitch-friendly visual descriptions before screens are generated. It produces semantic design-system guidance for Stitch - it does not guarantee Stitch will render every constraint exactly, generated DESIGN.md files still need review against the actual product brief, brand constraints, accessibility needs, and screen content, and motion sections document implementation intent for later coding agents since Stitch itself may generate static screens.

Inputs: a project's intended vibe/atmosphere description and any existing brand constraints (colors, fonts) to incorporate.
Outputs: a DESIGN.md file with visual atmosphere, color palette with hex codes and functional roles, typography rules, component stylings, layout principles, motion philosophy, and an explicit anti-pattern ban list, ready to prompt Google Stitch.

• Canvas White (#F9FAFB) - Primary background surface
• Charcoal Ink (#18181B) - Primary text, Zinc-950 depth
  (Max 1 accent. Saturation < 80%. No purple/neon.)

Frontend and design teams generating screens with Google Stitch who want a premium, non-generic design system encoded as explicit rules and hex values rather than leaving Stitch to default to generic AI UI patterns.