541 lines
22 KiB
Markdown
541 lines
22 KiB
Markdown
# Frontend Design Skill
|
||
|
||
> A modular skill for AI agents building websites and digital interfaces. Output that reads as if made by a senior designer at a top studio — not as if generated by an LLM guessing at "modern web design."
|
||
|
||
[](LICENSE)
|
||
[](#-whats-inside)
|
||
[](#-whats-inside)
|
||
[](#-whats-inside)
|
||
[](CONTRIBUTING.md)
|
||
[](anti-patterns.md)
|
||
|
||
**7,842 lines. 18 files. 22 sub-styles. Zero purple-to-blue gradients.**
|
||
|
||
[Russian version →](README.md)
|
||
|
||
---
|
||
|
||
## 📖 Contents
|
||
|
||
- [The problem](#-the-problem)
|
||
- [The solution](#-the-solution)
|
||
- [Screenshot examples](#-screenshot-examples)
|
||
- [What's inside](#-whats-inside)
|
||
- [Quick start](#-quick-start)
|
||
- [Usage guide](#-usage-guide)
|
||
- [Loading strategies](#-loading-strategies)
|
||
- [Code quality](#-code-quality)
|
||
- [Who this is for](#-who-this-is-for)
|
||
- [Contributing](#-contributing)
|
||
- [License](#-license)
|
||
|
||
---
|
||
|
||
## 🎯 The problem
|
||
|
||
Ask any AI agent to build you a landing page. You will get:
|
||
|
||
- 🔮 A purple-to-blue gradient hero
|
||
- 🎯 Centered headline, two CTA buttons, a "Trusted by 10,000+" logo bar
|
||
- 📦 Three identical feature cards in a row, repeated three times
|
||
- 🎠 A testimonial carousel with stock headshots
|
||
- 💬 Lorem-ipsum-level copy that says nothing
|
||
|
||
This is **AI slop** — the visual shorthand for "an LLM made this." It is what every AI defaults to, because it is what every AI has seen ten thousand times in its training set. It is the gravitational center of generative output, and everything has to actively push against it.
|
||
|
||
**The skills in this repo push against it.**
|
||
|
||
---
|
||
|
||
## ✨ The solution
|
||
|
||
```
|
||
7,842 lines · 18 files · 22 sub-styles · 0 purple-to-blue gradients
|
||
```
|
||
|
||
| File | Lines | What's inside |
|
||
|---|---:|---|
|
||
| **[SKILL.md](SKILL.md)** | 212 | Core principles, process, identity. Agent Skills frontmatter |
|
||
| **[aesthetics.md](aesthetics.md)** | 320 | 7 high-level aesthetics |
|
||
| **[minimal-ui-patterns.md](minimal-ui-patterns.md)** | 924 | 11 SaaS sub-styles (Linear, Stripe, Vercel, ...) |
|
||
| **[editorial-patterns.md](editorial-patterns.md)** | 476 | 6 editorial sub-styles (Pentagram, NYT Mag, ...) |
|
||
| **[brutalist-patterns.md](brutalist-patterns.md)** | 437 | 5 brutalist sub-styles (Bandcamp, Working Format, ...) |
|
||
| **[product-ui-patterns.md](product-ui-patterns.md)** | 1434 | 10 Linear-style components with code |
|
||
| **[typography.md](typography.md)** | 351 | Typefaces, scale, pairs, anti-patterns |
|
||
| **[color.md](color.md)** | 303 | Tokens, palettes, contrast, dark mode |
|
||
| **[layout.md](layout.md)** | 295 | Containers, spacing scale, grids, responsive strategy |
|
||
| **[anti-patterns.md](anti-patterns.md)** | 376 | 28 AI-slop patterns with before/after |
|
||
| **[components.md](components.md)** | 420 | Buttons, forms, cards, states |
|
||
| **[motion.md](motion.md)** | 293 | Animation, easing, accessibility |
|
||
| **[content.md](content.md)** | 272 | Headlines, copy, microcopy |
|
||
| **[accessibility.md](accessibility.md)** | 269 | Semantics, keyboard, focus, ARIA, testing protocol |
|
||
| **[performance.md](performance.md)** | 210 | Budgets, fonts, images, Core Web Vitals |
|
||
| **[imagery.md](imagery.md)** | 226 | CSS/SVG compositions, photo direction, icons, favicon/og |
|
||
| **[code-style.md](code-style.md)** | 850 | Code quality, no GPT-slop, comments |
|
||
| **[checklist.md](checklist.md)** | 174 | Pre-ship QA |
|
||
|
||
---
|
||
|
||
## 📸 Screenshot examples
|
||
|
||
Six sites built using these skills — from warm typography to cold dark SaaS, Swiss grids, and raw brutalism.
|
||
|
||
### Style previews (composition examples)
|
||
|
||
The first two are design compositions demonstrating the styles:
|
||
|
||
#### Example 1: Design studio *Halftone* (Editorial / Warm / Light)
|
||
|
||
Built with `aesthetics.md` §2 (Editorial) + `editorial-patterns.md` (Pentagram archive).
|
||
|
||
**What was applied from the skills:**
|
||
- Warm paper `#FAF6F0` + ink `#1A1714` + editorial red `#C8281C` (`color.md`)
|
||
- Fraunces display + Inter text + JetBrains Mono kickers (`typography.md`)
|
||
- Asymmetric hero, not centered-everything (`anti-patterns.md` §6)
|
||
- Hero headline `clamp(3.5rem, 9vw, 8.5rem)` — massive, not default (`typography.md`)
|
||
- 6 works as magazine index, not "3-card grid" (`anti-patterns.md` §12)
|
||
- Specific names: "Mira Almeida", "Q3 2026", "14,000 shelves" (`content.md`)
|
||
- No emoji, no stock photos (`anti-patterns.md` §10)
|
||
- Footer with colophon — real editorial pattern (`aesthetics.md` §2)
|
||
|
||
|
||
|
||
---
|
||
|
||
#### Example 2: SaaS product *Tempo* (Refined Minimal / Dark / Linear-style)
|
||
|
||
Built with `minimal-ui-patterns.md` §1 (Linear).
|
||
|
||
**What was applied from the skills:**
|
||
- Dark surface `#0A0A0A` + ink `#F5F5F5` + Linear purple `#7B85E6` (`color.md` §Dark Mode)
|
||
- **Not** pure black, **not** pure white — skill explicitly forbids (`color.md`)
|
||
- Accent purple slightly brightened for dark (`color.md`)
|
||
- Asymmetric hero: text left, dashboard right (`anti-patterns.md` §6)
|
||
- Hero headline makes a claim, not "Welcome to Tempo" (`content.md`)
|
||
- Dashboard mockup in CSS/SVG — no stock screenshots (`anti-patterns.md` §10)
|
||
- Real metrics: P95 latency, concrete commits with hash + impact (`content.md`)
|
||
- 3 asymmetric features: metrics / replay / install — three different formats (`anti-patterns.md` §11/12)
|
||
- Pricing: 2 honest tiers, not 3 with middle highlighted (`anti-patterns.md` §13)
|
||
- Footer with build info: `v2.4.7 · build a3f9c2 · uptime 99.98%` (`aesthetics.md` §6)
|
||
|
||
|
||
|
||
---
|
||
|
||
### Working examples (ready-made single-file sites)
|
||
|
||
Four full sites in the [`examples/`](examples/) folder. Each is a single HTML file with inline CSS and minimal JS. Open in any browser — no build step.
|
||
|
||
| # | Screenshot | File | Style | Skills applied |
|
||
|---|---|---|---|---|
|
||
| 1 |  | [`example-magazine.html`](examples/example-magazine.html) | **Editorial** (NYT Magazine) | `editorial-patterns.md` + `typography.md` + `color.md` |
|
||
| 2 |  | [`example-saas.html`](examples/example-saas.html) | **Refined Minimal dark** (Linear) | `minimal-ui-patterns.md` + `product-ui-patterns.md` |
|
||
| 3 |  | [`example-brutalist.html`](examples/example-brutalist.html) | **Brutalist** (Working Format) | `brutalist-patterns.md` + `typography.md` |
|
||
| 4 |  | [`example-swiss.html`](examples/example-swiss.html) | **Swiss** (Müller-Brockmann) | `aesthetics.md` §3 + `layout.md` + `accessibility.md` |
|
||
|
||
#### Example 3: Literary magazine *The Common Review* (Editorial)
|
||
|
||
A quarterly journal of essays, criticism, and letters. Issue 14, Winter 2026, theme: "On Repair."
|
||
|
||
**What was applied from the skills:**
|
||
- ✅ Source Serif 4 throughout (display + body — one family) (`typography.md`)
|
||
- ✅ JetBrains Mono for metadata (issue numbers, page numbers, dates) (`typography.md`)
|
||
- ✅ **B/W minimal** + editorial red `#C8281C` accent (`color.md`)
|
||
- ✅ Asymmetric hero with SVG cover-art "after Ruskin" (`anti-patterns.md` §10)
|
||
- ✅ **Drop cap** on the lede paragraph — true editorial pattern (`editorial-patterns.md` §3)
|
||
- ✅ Pull quote with rules above/below (`editorial-patterns.md` §3)
|
||
- ✅ Section markers (§01, §02, §03) with rules (`editorial-patterns.md` §1)
|
||
- ✅ Real-feeling content: "Marta Bellucci spent three months with one of the youngest, who is sixty-three" (`content.md`)
|
||
- ✅ Colophon in footer (`editorial-patterns.md` §1)
|
||
|
||
---
|
||
|
||
#### Example 4: Feature flag system *Latch* (SaaS / Linear-style)
|
||
|
||
Developer tool for product teams. Sub-style: Linear.
|
||
|
||
**What was applied from the skills:**
|
||
- ✅ Dark surface `#0A0A0B` + ink `#F4F4F5` (NOT pure black/white — `color.md` explicitly forbids)
|
||
- ✅ Mint accent `#6EE7B7` — used <10% of pixels (`color.md` §"How to Use the Accent")
|
||
- ✅ Hero asymmetric: text left, dashboard right (`anti-patterns.md` §6)
|
||
- ✅ Hero headline: "Feature flags that don't get in the way." — specific claim (`content.md`)
|
||
- ✅ **Dashboard mockup in CSS-only**: panel chrome, segmented control, flag rows with toggle (`product-ui-patterns.md` §1, §6)
|
||
- ✅ 3 asymmetric features: install (with code block) / targeting (with viz) / speed (with viz) (`anti-patterns.md` §11/12)
|
||
- ✅ Pricing: 2 honest tiers (Hobby + Production) (`anti-patterns.md` §13)
|
||
- ✅ Footer with build info: `v3.2.7 · build 8f4a12 · uptime 99.99%` (`aesthetics.md` §6)
|
||
- ✅ Tabular numerals everywhere (font-variant-numeric) (`typography.md`)
|
||
- ✅ JavaScript: segmented control + interactive toggle (`components.md`)
|
||
|
||
---
|
||
|
||
#### Example 5: Indie label *Constellation Records* (Brutalist)
|
||
|
||
Independent record label from Montréal. Sub-style: Working Format + Bandcamp.
|
||
|
||
**What was applied from the skills:**
|
||
- ✅ **Marquee** with announcements (60s loop, respects `prefers-reduced-motion`) (`motion.md`)
|
||
- ✅ Pure black `#0A0A0A` + warm cream `#F4F1EB` + electric red `#FF2400` (`brutalist-patterns.md` §2)
|
||
- ✅ **Sharp corners everywhere** (`border-radius: 0`) (`brutalist-patterns.md` §"Anti-patterns")
|
||
- ✅ Hero with massive display type, italic accent in red (`brutalist-patterns.md` §"Hallmarks")
|
||
- ✅ Hero meta column in inverted color (ink background, surface text) (`brutalist-patterns.md` §2)
|
||
- ✅ Album covers as **CSS-only abstract compositions** (concentric circles, squares) (`anti-patterns.md` §10)
|
||
- ✅ Catalog: 8 releases, hover shifts padding + title color (`components.md`)
|
||
- ✅ **Manifesto section** with large typography, italic emphasis in accent (`editorial-patterns.md` §1 + brutalist merge)
|
||
- ✅ Tour dates with status indicators (`ON SALE` / `SOLD OUT`) (`components.md` §"Status indicators")
|
||
- ✅ Footer in inverted color, markers in accent color (`brutalist-patterns.md` §2)
|
||
|
||
---
|
||
|
||
#### Example 6: *Ordnung* exhibition at Haus der Form (Swiss)
|
||
|
||
Museum exhibition of Swiss graphic design, 1950–1980. Sub-style: Müller-Brockmann / International Typographic.
|
||
|
||
**What was applied from the skills:**
|
||
- ✅ **Zero JavaScript** — pure HTML + CSS (`performance.md` §"JavaScript — Ship None If You Can")
|
||
- ✅ One grotesque (Archivo) throughout + IBM Plex Mono for metadata (`aesthetics.md` §3, `typography.md`)
|
||
- ✅ Hero smaller than expected — `clamp(2.75rem, 6vw, 4.5rem)`, Swiss restraint (`aesthetics.md` §3)
|
||
- ✅ **Type as image**: giant "1950→1980" in tabular figures as the visual anchor (`typography.md` §Numerals)
|
||
- ✅ White / pure black / one red #D62828 — "surface: white or black, nothing in between" (`aesthetics.md` §3)
|
||
- ✅ Meta-column pattern (200px + 1fr) in every section (`layout.md` §"The meta-column pattern")
|
||
- ✅ No buttons; the table hover inverts — black background, white text, red catalog number (`layout.md`, `components.md`)
|
||
- ✅ A real catalogue: Müller-Brockmann "Beethoven" 1955, Neue Grafik issues 1–46, Ruder's "Typographie" 1967 (`content.md`)
|
||
- ✅ Skip link, semantic table with caption, `:focus-visible`, `prefers-reduced-motion` (`accessibility.md`)
|
||
- ✅ Map as a CSS grid artifact instead of a stock map embed (`imagery.md` §"The vocabulary")
|
||
|
||
---
|
||
|
||
## 🚀 Quick start
|
||
|
||
### 1. Clone
|
||
|
||
```bash
|
||
git clone https://github.com/AkyRayy/Frontend-Design-SKILLS-for-AI.git
|
||
cd Frontend-Design-SKILLS-for-AI
|
||
```
|
||
|
||
### 2. Load into your agent's context
|
||
|
||
Depends on the platform:
|
||
|
||
| Platform | Where to put it |
|
||
|---|---|
|
||
| **Claude Code / Cursor** | `.claude/skills/frontend-design/` — `SKILL.md` carries Agent Skills frontmatter (`name` + `description`), so the skill is discovered automatically |
|
||
| **Continue** | `.continue/skills/frontend-design/` |
|
||
| **Cline / Roo Code** | `.roo/skills/frontend-design/` |
|
||
| **Custom agent** | Copy the relevant `.md` files into your system prompt |
|
||
|
||
### 3. Use
|
||
|
||
```
|
||
[context: SKILL.md + aesthetics.md + minimal-ui-patterns.md]
|
||
|
||
User: Build me a landing page for an observability SaaS.
|
||
|
||
Agent: [reads SKILL.md, picks "Refined Minimal" → sub-style "Linear"]
|
||
[identifies the job of the page]
|
||
[builds the token system from color.md]
|
||
[sets typography from typography.md]
|
||
[avoids 28 patterns from anti-patterns.md]
|
||
[writes code in style from code-style.md]
|
||
→ outputs a design that reads as a senior designer's work
|
||
```
|
||
|
||
---
|
||
|
||
## 📘 Usage guide
|
||
|
||
### Step 0 — Before you start
|
||
|
||
Read **[SKILL.md](SKILL.md)** end to end. It's the core. Everything else is detail.
|
||
|
||
Remember three questions the agent should ask itself **at every step**:
|
||
|
||
1. **What is the job of this page?** (one sentence)
|
||
2. **Which aesthetic am I in?** (one, not a mix)
|
||
3. **What should dominate?** (one element, not five)
|
||
|
||
### Step 1 — Identify the job of the page
|
||
|
||
Without this, everything else is slop. Ask yourself: **why did the user come here, and what should they do?**
|
||
|
||
```
|
||
❌ "Landing page for our SaaS" → unclear what to do
|
||
✅ "Convince a frontend engineer to try the product → get email signup"
|
||
✅ "Sell a $40 cookbook to design-minded home cooks"
|
||
✅ "Get a designer to apply to our 4-person studio"
|
||
```
|
||
|
||
Write one sentence. Every section must serve that job.
|
||
|
||
### Step 2 — Pick the aesthetic
|
||
|
||
Open **[aesthetics.md](aesthetics.md)**. Seven high-level aesthetics:
|
||
|
||
| Aesthetic | When to pick |
|
||
|---|---|
|
||
| **Refined Minimal** | SaaS, fintech, dev tools, B2B |
|
||
| **Editorial / Magazine** | Publishing, premium content, manifestos |
|
||
| **Swiss / Typographic** | Galleries, museums, archives |
|
||
| **Brutalist / Raw** | Music, fashion, art, counterculture |
|
||
| **Soft / Hand-crafted** | Lifestyle, hospitality, indie SaaS |
|
||
| **Technical / Mono** | Dev tools, API, documentation |
|
||
| **Playful / Geometric** | Consumer, kids, gaming, creative |
|
||
|
||
**Commit. Don't blend two.**
|
||
|
||
### Step 3 — Drill into a sub-style
|
||
|
||
Open the corresponding sub-style file:
|
||
|
||
- **Refined Minimal** → [minimal-ui-patterns.md](minimal-ui-patterns.md) (11 sub-styles)
|
||
- **Editorial** → [editorial-patterns.md](editorial-patterns.md) (6 sub-styles)
|
||
- **Brutalist** → [brutalist-patterns.md](brutalist-patterns.md) (5 sub-styles)
|
||
|
||
Pick a specific sub-style (Linear, Stripe, Vercel, NYT Magazine, Bandcamp, ...) and commit. Don't blend two.
|
||
|
||
### Step 4 — Build the token system
|
||
|
||
Open **[color.md](color.md)** and **[typography.md](typography.md)**. Set up:
|
||
|
||
```css
|
||
:root {
|
||
/* Palette from color.md, specific hex */
|
||
--surface: ...
|
||
--ink: ...
|
||
--accent: ...
|
||
|
||
/* Typography from typography.md */
|
||
--font-display: ...
|
||
--font-text: ...
|
||
--font-mono: ...
|
||
|
||
/* Scale 1.25 or 1.333 */
|
||
--text-base: 1rem;
|
||
--text-2xl: 1.953rem;
|
||
/* ... */
|
||
}
|
||
```
|
||
|
||
**No raw hex in components.** All colors through tokens.
|
||
|
||
### Step 4½ — Set the page skeleton
|
||
|
||
Open **[layout.md](layout.md)**. Container (`1200–1280px`), spacing scale (`4/8/12/16/24/32/48/64/96/128`), asymmetric splits (`5/7`, `3/9` — not equal thirds), the meta-column pattern, breakpoints at `480/768/1024`. Grid and spacing are decided before the first component exists.
|
||
|
||
### Step 5 — Avoid slop
|
||
|
||
Open **[anti-patterns.md](anti-patterns.md)**. **28 specific patterns** to reject. Each with a "before" and "after" example.
|
||
|
||
Before writing the next section, check: **am I repeating one of these 28?**
|
||
|
||
### Step 6 — Build components right
|
||
|
||
| What you're building | Where the rules are |
|
||
|---|---|
|
||
| Buttons, forms, navigation | [components.md](components.md) |
|
||
| Product chrome (sidebar, command palette) | [product-ui-patterns.md](product-ui-patterns.md) |
|
||
| Icons, images, favicon/og | [imagery.md](imagery.md) |
|
||
| Animations | [motion.md](motion.md) |
|
||
|
||
**Every component needs 8 states:** default, hover, focus-visible, active, disabled, loading, empty, error. Without them, the design breaks on the edges.
|
||
|
||
### Step 7 — Write specific content
|
||
|
||
Open **[content.md](content.md)**. Main rules:
|
||
|
||
| ❌ Slop | ✅ Specific |
|
||
|---|---|
|
||
| "Welcome to [Brand]" | "Design that doesn't need explaining." |
|
||
| "Empowering businesses to thrive" | "Ship features 3x faster" |
|
||
| "Trusted by 10,000+" | "Used by Linear, Vercel, Stripe" |
|
||
| "Lorem ipsum" | Real names, dates, numbers |
|
||
|
||
### Step 8 — Write quality code
|
||
|
||
Open **[code-style.md](code-style.md)**. This is the skill for code — no GPT-slop in comments, no bloated functions, no `any`, no magic numbers.
|
||
|
||
**Main rule:** names are the design. Spend more time choosing a name than writing the line of code.
|
||
|
||
### Step 8½ — Accessibility and speed
|
||
|
||
Open **[accessibility.md](accessibility.md)** and **[performance.md](performance.md)**.
|
||
|
||
- **A11y:** semantics, a keyboard pass, `:focus-visible`, ARIA minimalism, AA contrast — plus the 15-minute testing protocol before shipping.
|
||
- **Perf:** budgets (LCP < 2.5s, CLS < 0.1, ≤ 4 font files, zero blocking JS). An HTML+CSS page with no JS is the norm, not an achievement.
|
||
|
||
### Step 9 — Run the checklist
|
||
|
||
Open **[checklist.md](checklist.md)**. **70+ items** across typography, color, layout, components, motion, accessibility, edge cases.
|
||
|
||
**Final tests:**
|
||
|
||
1. Would Massimo Vignelli approve?
|
||
2. Could you ship this at Linear / Pentagram / NYT?
|
||
3. Would you screenshot this for design inspiration?
|
||
4. Would you be proud to put your name on this?
|
||
|
||
If 6+ answers are "no" — keep iterating.
|
||
|
||
---
|
||
|
||
## 🎯 Loading strategies
|
||
|
||
### Minimum viable (fast, fewer tokens)
|
||
|
||
```
|
||
1. SKILL.md ← core
|
||
2. aesthetics.md ← pick aesthetic
|
||
3. checklist.md ← before shipping
|
||
```
|
||
|
||
### Standard load (recommended)
|
||
|
||
```
|
||
1. SKILL.md
|
||
2. aesthetics.md
|
||
3. typography.md
|
||
4. color.md
|
||
5. layout.md
|
||
6. checklist.md
|
||
```
|
||
|
||
### B2B SaaS (Linear / Stripe / Vercel)
|
||
|
||
```
|
||
1. SKILL.md
|
||
2. minimal-ui-patterns.md ← instead of aesthetics.md §1
|
||
3. typography.md
|
||
4. color.md
|
||
5. layout.md
|
||
6. product-ui-patterns.md ← for sidebar, command palette, etc
|
||
7. accessibility.md ← interactive products raise the a11y bar
|
||
8. checklist.md
|
||
```
|
||
|
||
### Editorial (Pentagram / NYT Mag)
|
||
|
||
```
|
||
1. SKILL.md
|
||
2. editorial-patterns.md ← instead of aesthetics.md §2
|
||
3. typography.md
|
||
4. color.md
|
||
5. layout.md
|
||
6. checklist.md
|
||
```
|
||
|
||
### Brutalist (Bandcamp / Working Format)
|
||
|
||
```
|
||
1. SKILL.md
|
||
2. brutalist-patterns.md ← instead of aesthetics.md §4
|
||
3. typography.md
|
||
4. checklist.md
|
||
```
|
||
|
||
### Product / interactive app
|
||
|
||
```
|
||
1. SKILL.md
|
||
2. minimal-ui-patterns.md
|
||
3. typography.md + color.md + layout.md
|
||
4. product-ui-patterns.md ← chrome: sidebar, ⌘K, list items, modals
|
||
5. accessibility.md ← focus traps, ARIA, keyboard
|
||
6. performance.md ← INP/CLS under load
|
||
7. checklist.md
|
||
```
|
||
|
||
### Full load (deep work)
|
||
|
||
All 18 files. Used when the project demands maximum specificity.
|
||
|
||
---
|
||
|
||
## 💎 Code quality
|
||
|
||
Beyond design, the repo includes **[code-style.md](code-style.md)** — a skill for the code that AI agents write.
|
||
|
||
**Core principles:**
|
||
|
||
| Principle | Anti-pattern |
|
||
|---|---|
|
||
| **Names are the design** | `processData`, `doSomething`, `result` — all broken |
|
||
| **Comments explain WHY, not WHAT** | `// This function adds two numbers` above `add(a, b)` |
|
||
| **Errors are values** | `catch (e) {}` silently swallows errors |
|
||
| **Small functions** | A 200-line function with 8 parameters |
|
||
| **No `any`** | TypeScript lying to itself |
|
||
| **Delete first** | Before adding code, ask: can I delete something? |
|
||
|
||
**GPT-slop in code** (catalog of 30+ patterns):
|
||
- Comments like "This function does X" (the code already does that)
|
||
- Empty `catch {}`
|
||
- `any`, `as any`, `@ts-ignore` without justification
|
||
- Magic numbers (`0.5`, `3600`, `100`) without names
|
||
- Functions with boolean flags: `doThing(x, true, false)`
|
||
- Dependencies for a single function
|
||
|
||
**Full catalog and rules** → [code-style.md](code-style.md)
|
||
|
||
---
|
||
|
||
## 👥 Who this is for
|
||
|
||
- **AI agent builders** — to raise the quality of frontend output
|
||
- **Designers using AI** — to stop fixing the same 5 patterns every time
|
||
- **Developers without a designer** — so AI-generated sites look considered, not generated
|
||
- **Founders shipping fast** — so they don't ship ugly
|
||
|
||
**This is not for:** designers who already produce great work — you don't need it. It's for everyone downstream of an LLM who wants to upgrade the output.
|
||
|
||
---
|
||
|
||
## 🚫 What this is NOT
|
||
|
||
- **❌ Not a Figma plugin.** It's a markdown skill for AI agents, not a design tool for humans.
|
||
- **❌ Not a CSS framework.** It produces no code; it shapes the code the agent writes.
|
||
- **❌ Not a replacement for taste.** The skill raises the floor. The ceiling is still up to you.
|
||
- **❌ Not magic.** A skill is a set of instructions. If the agent doesn't follow them, the output is still slop.
|
||
|
||
---
|
||
|
||
## 🤝 Contributing
|
||
|
||
PRs welcome. Especially:
|
||
|
||
- **New anti-patterns** with before/after examples (format in CONTRIBUTING.md)
|
||
- **New sub-styles** in `minimal-ui-patterns.md` / `editorial-patterns.md` / `brutalist-patterns.md`
|
||
- **New components** in `product-ui-patterns.md` (HTML + CSS + all states)
|
||
- **Translations** — repo is English-first currently, but Russian ([README.md](README.md)), Chinese, Spanish, Japanese all welcome
|
||
|
||
**What we don't accept:** generic advice ("use whitespace"), patterns without examples, marketing language.
|
||
|
||
Details: **[CONTRIBUTING.md](CONTRIBUTING.md)**
|
||
|
||
---
|
||
|
||
## 📜 License
|
||
|
||
**[MIT](LICENSE)** — use it, modify it, redistribute it. If you ship something good with it, that's the thanks.
|
||
|
||
---
|
||
|
||
## 🙏 Credits
|
||
|
||
Patterns observed in:
|
||
|
||
**Product design:** Linear, Stripe, Vercel, Arc, Cron, Mercury, Pitch, Height, Figma, Notion, Sublime
|
||
|
||
**Studio work:** Pentagram, &Walsh, DIA Studio, Manual, Working Format, Locomotive, Bureau Mirko Borsche, Studio Dumbar
|
||
|
||
**Editorial:** NYT Magazine, Bloomberg Businessweek, It's Nice That, Wallpaper*, Apartamento, The Gentlewoman, Kinfolk
|
||
|
||
**Swiss / International Typographic:** Müller-Brockmann, Massimo Vignelli, Jan Tschichold, Wim Crouwel, Erik Spiekermann
|
||
|
||
**Type design:** Stefan Sagmeister, Paula Scher, Tibor Kalman, Michael Bierut
|
||
|
||
If you recognize the patterns — that's the point. If you don't — read the references, then read the code.
|
||
|
||
---
|
||
|
||
> **If the design is good, you won't notice the design. If it's bad, you notice immediately.**
|
||
>
|
||
> Your job is the first. Slop is the second.
|