intentional-design-guard

What problem does it solve?

Many AI-assisted UI generators converge on bland, identical patterns ("AI slop") that remove product-specific intent and harm differentiation. This Skill detects those generic signals (fonts, gradients, repetitive grids, motion anti-patterns) and provides prescriptive guardrails so designs remain contextual, meaningful, and implementation-ready.

Core Features & Use Cases

• Pattern Detection & Blacklist Enforcement: Identifies and prohibits AI-slop signals such as specific fonts, purple gradients, repeated 3-column card grids, and overused motion utilities.
• Token-first Implementation Guidance: Requires CSS custom properties / Tailwind extend tokens up front and shows how to register and use them across components.
• Structured Workflow & Review: Forces a three-question context checklist, section-by-section implementation flow, and a final self-review checklist to validate typography, color systems, layout, and motion.
• Practical References: Includes concrete guidance for color systems, layout alternatives, and typography pairings to replace generic defaults during front-end coding and Figma → code handoffs.
• Use Cases: Improving AI-generated landing pages, guiding Copilot/Code LLM outputs for component libraries, enforcing brand-unique palettes and typographic contrast in production UIs.

Quick Start

Ask the guard to analyze a UI prompt or generated code, answer the three context questions, produce a token-first CSS variables set, list disallowed patterns found, and return a short remediation plan.