31 lines
1.6 KiB
Markdown
31 lines
1.6 KiB
Markdown
# 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]
|