1.6 KiB
Short
Frontend Design Skill — 7,842 lines of modular markdown that teach AI agents how to build websites a senior designer would actually ship.
18 files. Each loadable independently. Built around one principle: restraint over decoration.
Includes:
- 7 aesthetic directions, 22 sub-styles with real references (Linear, Pentagram, Müller-Brockmann, NYT Mag)
- 28 specific AI-slop patterns to reject, with before/after
- Complete type system (typefaces, scale, pairs, code)
- Complete color system (tokens, palettes, contrast)
- Layout system (containers, spacing scale, grids, responsive)
- Component patterns (buttons, forms, cards, states) + 10 product UI components in code
- Motion principles (one entrance system, accessibility)
- Accessibility (semantics, keyboard, focus, ARIA, testing protocol)
- Performance (budgets, fonts, images, Core Web Vitals)
- Imagery & icons (no stock, CSS/SVG compositions, icon systems)
- Content rules (headlines, body, CTAs, microcopy)
- Pre-ship checklist of 70+ items
MIT licensed. Use it, modify it, redistribute it.
If your AI agent produces purple-to-blue gradient heroes, three-card feature grids, and "Empowering businesses to thrive" copy — this fixes that.
[link]
Even shorter (one paragraph)
I curated 7,842 lines of markdown to stop AI agents from shipping purple-to-blue gradient heroes. It's a modular skill file for any AI agent that builds websites — 18 files, each independently loadable, covering aesthetics, typography, color, layout, anti-patterns, components, motion, accessibility, performance, imagery, content, and a pre-ship checklist. MIT licensed. [link]