| name | frontend-design |
| description | Create production-grade frontend interfaces with design intelligence database (67 styles, 161 palettes, 57 fonts, 161 industry rules).
TRIGGER: "build a landing page", "create a website", "design a UI", "frontend prototype".
NOT FOR: web-design-review use cases. |
| version | 2.0.0 |
| tier | lazy |
Frontend Design
This skill loads full instructions on activation. Read INSTRUCTIONS.md before proceeding.
TRIGGER: "build a landing page", "create a website", "design a UI", "frontend prototype", "interactive page", "HTML page", "web app mockup"
DO NOT USE: for backend APIs (just code directly) or for reviewing existing UI (use web-design-review)
MANDATORY: Generate Design System Before Coding
Before writing ANY frontend code, run the design system generator to get industry-specific style, color, typography, and anti-pattern recommendations:
python3 scripts/search.py "<product description>" --design-system -p "ProjectName" -f markdown
This is NOT optional. The database has 161 industry-specific reasoning rules that prevent generic AI aesthetics. Skip this step only if the user explicitly provides a complete design system (colors, fonts, style).
