hermes-hub/.agents/skills/frontend-design

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."

7,842 lines. 18 files. 22 sub-styles. Zero purple-to-blue gradients.

Russian version →

---

📖 Contents

• The problem
• The solution
• Screenshot examples
• What's inside
• Quick start
• Usage guide
• Loading strategies
• Code quality
• Who this is for
• Contributing
• 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	212	Core principles, process, identity. Agent Skills frontmatter
aesthetics.md	320	7 high-level aesthetics
minimal-ui-patterns.md	924	11 SaaS sub-styles (Linear, Stripe, Vercel, ...)
editorial-patterns.md	476	6 editorial sub-styles (Pentagram, NYT Mag, ...)
brutalist-patterns.md	437	5 brutalist sub-styles (Bandcamp, Working Format, ...)
product-ui-patterns.md	1434	10 Linear-style components with code
typography.md	351	Typefaces, scale, pairs, anti-patterns
color.md	303	Tokens, palettes, contrast, dark mode
layout.md	295	Containers, spacing scale, grids, responsive strategy
anti-patterns.md	376	28 AI-slop patterns with before/after
components.md	420	Buttons, forms, cards, states
motion.md	293	Animation, easing, accessibility
content.md	272	Headlines, copy, microcopy
accessibility.md	269	Semantics, keyboard, focus, ARIA, testing protocol
performance.md	210	Budgets, fonts, images, Core Web Vitals
imagery.md	226	CSS/SVG compositions, photo direction, icons, favicon/og
code-style.md	850	Code quality, no GPT-slop, comments
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/ 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	Editorial (NYT Magazine)	editorial-patterns.md + typography.md + color.md
2		example-saas.html	Refined Minimal dark (Linear)	minimal-ui-patterns.md + product-ui-patterns.md
3		example-brutalist.html	Brutalist (Working Format)	brutalist-patterns.md + typography.md
4		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

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 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. 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 (11 sub-styles)
• Editorial → editorial-patterns.md (6 sub-styles)
• Brutalist → 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 and typography.md. Set up:

: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. 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. 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
Product chrome (sidebar, command palette)	product-ui-patterns.md
Icons, images, favicon/og	imagery.md
Animations	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. 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. 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 and 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. 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 — 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

---

👥 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), Chinese, Spanish, Japanese all welcome

What we don't accept: generic advice ("use whitespace"), patterns without examples, marketing language.

Details: CONTRIBUTING.md

---

📜 License

MIT — 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.