From aradotso-trending-skills-37
Transforms AI-generated HTML/CSS/JS web pages from functional/generic to stunning using design system prompts, oklch color theory, curated font pairings, and anti-cliché rules.
npx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-1 --plugin aradotso-trending-skills-37This skill uses the workspace's default tool permissions.
```markdown
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
---
name: web-design-skill
description: Transform AI-generated web pages from functional to stunning using structured design system prompts, oklch color theory, curated font pairings, and anti-cliché rules.
triggers:
- make this page look better
- improve the design of this webpage
- transform this into a beautiful UI
- apply web design skill to this
- generate a stunning landing page
- use design system for this HTML
- make the UI less generic
- apply professional design to this component
---
# Web Design Engineer Skill
> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.
A reusable **SKILL.md** for AI coding agents (Claude Code, Cursor, Codex, etc.) that injects professional design taste into AI-generated HTML/CSS/JS artifacts. Inspired by the Claude Design system prompt, this skill transforms "functional but generic" output into editorial, high-quality visual work.
---
## What This Skill Does
When installed, this skill gives your AI agent:
- **Anti-cliché enforcement** — blocks overused AI design patterns (purple-pink gradients, emoji icons, Inter font, fake testimonials)
- **Design system declaration** — forces the agent to define tokens (colors, fonts, spacing, motion) in Markdown *before* writing code
- **oklch color theory** — perceptually uniform color derivation instead of arbitrary hex values
- **Curated font × color pairings** — six validated visual system starting points
- **Six-step structured workflow** — from requirements gathering to delivery verification
- **Placeholder philosophy** — `[icon]` markers instead of poorly drawn inline SVGs
---
## Installation
Copy the skill directory into your project:
your-project/ ├── .agents/skills/web-design-engineer/ │ ├── SKILL.md # Main skill (~400 lines) │ └── references/ │ └── advanced-patterns.md # Code template library (~520 lines) └── src/ └── ...
For Claude Code specifically:
your-project/ └── .claude/skills/web-design-engineer/ ├── SKILL.md └── references/ └── advanced-patterns.md
Clone the repo and copy:
```bash
git clone https://github.com/ConardLi/web-design-skill.git
cp -r web-design-skill/.agents/skills/web-design-engineer your-project/.agents/skills/
Or for Claude Code:
cp -r web-design-skill/.agents/skills/web-design-engineer your-project/.claude/skills/
When triggered, the agent follows this structured process:
1. Understand requirements → Ask only when truly insufficient
2. Gather design context → Look at existing code/screenshots; never start blind
3. Declare design system → Colors, fonts, spacing, motion — in Markdown, before code
4. Show v0 draft early → Layout + tokens + placeholders; let user course-correct
5. Full build → Components, states, motion; pause at key decisions
6. Verify → Pre-delivery checklist; no console errors, no rogue hues
Colors must be derived in oklch space for perceptual uniformity. Same L value = same perceived brightness across hues.
:root {
/* Primary palette — blue-violet */
--color-primary-50: oklch(97% 0.02 270);
--color-primary-100: oklch(93% 0.05 270);
--color-primary-200: oklch(86% 0.10 270);
--color-primary-300: oklch(76% 0.15 270);
--color-primary-400: oklch(65% 0.20 270);
--color-primary-500: oklch(55% 0.24 270); /* brand */
--color-primary-600: oklch(46% 0.22 270);
--color-primary-700: oklch(38% 0.18 270);
--color-primary-800: oklch(28% 0.13 270);
--color-primary-900: oklch(18% 0.08 270);
/* Neutrals — warm-tinted to avoid clinical grey */
--color-neutral-50: oklch(98% 0.005 80);
--color-neutral-100: oklch(95% 0.008 80);
--color-neutral-200: oklch(88% 0.010 80);
--color-neutral-500: oklch(58% 0.010 80);
--color-neutral-900: oklch(14% 0.008 80);
/* Semantic */
--color-bg: var(--color-neutral-50);
--color-surface: oklch(100% 0 0);
--color-text: var(--color-neutral-900);
--color-muted: var(--color-neutral-500);
--color-accent: var(--color-primary-500);
}
/* Import — never use Inter, Roboto, Arial, system-ui, or Fraunces */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Newsreader:ital,opsz,wght@0,6..72,300..800;1,6..72,300..800&display=swap');
:root {
--font-display: 'Newsreader', Georgia, serif;
--font-body: 'Space Grotesk', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Fluid type scale */
--text-xs: clamp(0.70rem, 0.65rem + 0.25vw, 0.75rem);
--text-sm: clamp(0.85rem, 0.80rem + 0.25vw, 0.875rem);
--text-base: clamp(1.00rem, 0.95rem + 0.25vw, 1.0625rem);
--text-lg: clamp(1.15rem, 1.05rem + 0.50vw, 1.25rem);
--text-xl: clamp(1.30rem, 1.15rem + 0.75vw, 1.5rem);
--text-2xl: clamp(1.60rem, 1.35rem + 1.25vw, 2.00rem);
--text-3xl: clamp(2.00rem, 1.60rem + 2.00vw, 2.75rem);
--text-4xl: clamp(2.50rem, 1.90rem + 3.00vw, 3.75rem);
--text-5xl: clamp(3.00rem, 2.10rem + 4.50vw, 5.00rem);
}
:root {
/* 4px base grid */
--space-1: 0.25rem;
--space-2: 0.50rem;
--space-3: 0.75rem;
--space-4: 1.00rem;
--space-6: 1.50rem;
--space-8: 2.00rem;
--space-12: 3.00rem;
--space-16: 4.00rem;
--space-24: 6.00rem;
--space-32: 8.00rem;
/* Layout */
--max-w-content: 72rem;
--max-w-prose: 65ch;
--max-w-narrow: 42rem;
/* Grid */
--grid-cols-12: repeat(12, 1fr);
--grid-gap: clamp(1rem, 2vw, 2rem);
/* Radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 1.0rem;
--radius-full: 9999px;
/* Motion */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 400ms;
}
| Style | Primary Color | Fonts | Best For |
|---|---|---|---|
| Modern tech | oklch(55% 0.24 270) blue-violet | Space Grotesk + Inter | SaaS, dev tools |
| Elegant editorial | oklch(42% 0.12 55) warm brown | Newsreader + Outfit | Content, blogs |
| Premium brand | oklch(20% 0.04 270) near-black | Sora + Plus Jakarta Sans | Luxury, finance |
| Lively consumer | oklch(62% 0.22 25) coral | Plus Jakarta Sans + Outfit | E-commerce, social |
| Minimal professional | oklch(52% 0.14 200) teal-blue | Outfit + Space Grotesk | Dashboards, B2B |
| Artisan warmth | oklch(58% 0.14 65) caramel | Caveat + Newsreader | Food, education |
Before delivering any artifact, the agent must verify it does NOT contain:
✗ Purple-to-pink-to-blue gradient backgrounds
✗ Left-border accent cards
✗ Inter / Roboto / Arial / Fraunces / system-ui fonts
✗ Emoji used as icons (🚀 ✨ 💡 🎯 etc.)
✗ Fabricated statistics ("10,000+ users", "99.9% uptime")
✗ Fake logo walls ("Trusted by Google, Apple, Meta...")
✗ Dummy testimonials with generated avatar circles
✗ Rounded rectangles with drop shadows as the only card style
✗ Generic hero: big centered headline + subtitle + two buttons
✗ Hamburger menus that don't actually function
✗ Horizontal scrolling carousels on desktop
✗ "Glassmorphism" cards on gradient backgrounds
Before writing any code, the agent outputs a declaration like:
## Design System: Nordic Photographer Portfolio
**Concept:** Paper-warm minimalism. Ink on vellum. Film-era restraint.
**Colors (oklch):**
- Background: oklch(96% 0.008 80) — warm paper
- Surface: oklch(100% 0 0) — pure white panels
- Ink: oklch(14% 0.008 80) — near-black
- Accent: oklch(52% 0.18 200) — muted teal
- Muted: oklch(58% 0.008 80) — mid-grey
**Typography:**
- Display: Instrument Serif, italic weight, optical size 32–72
- UI: Space Grotesk 300–600
- Caption: Space Grotesk 300, tracked +0.08em
**Spacing:** 4px base, major sections 6rem–12rem vertical rhythm
**Motion:** 400ms ease-out-expo; Ken Burns hero at 24s cycle
**Radius:** 0 (zero) — no rounded corners; editorial flatness
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio — Mira Høst</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: oklch(96% 0.008 80);
--ink: oklch(14% 0.008 80);
--accent: oklch(52% 0.18 200);
--muted: oklch(58% 0.008 80);
--font-display: 'Instrument Serif', Georgia, serif;
--font-ui: 'Space Grotesk', sans-serif;
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-ui);
font-weight: 300;
line-height: 1.6;
}
/* Navigation */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 3rem;
mix-blend-mode: difference;
color: white;
}
.nav__logo {
font-family: var(--font-display);
font-style: italic;
font-size: 1.25rem;
letter-spacing: -0.01em;
}
.nav__links {
display: flex;
gap: 2.5rem;
list-style: none;
font-size: 0.8125rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.nav__links a {
color: inherit;
text-decoration: none;
}
/* Hero */
.hero {
position: relative;
height: 100svh;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
}
.hero__image {
grid-column: 1 / -1;
position: absolute;
inset: 0;
background: oklch(30% 0.02 200);
/* Ken Burns */
animation: kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns {
from { transform: scale(1.00) translate(0, 0); }
to { transform: scale(1.08) translate(-2%, -1%); }
}
.hero__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 4rem 3rem;
grid-column: 1 / 2;
color: oklch(96% 0.008 80);
}
.hero__eyebrow {
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.7;
margin-bottom: 1rem;
}
.hero__title {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(3rem, 6vw, 5.5rem);
line-height: 1.0;
letter-spacing: -0.02em;
margin-bottom: 1.5rem;
}
.hero__meta {
display: flex;
align-items: center;
gap: 2rem;
font-size: 0.8125rem;
opacity: 0.65;
}
.hero__counter {
position: absolute;
bottom: 4rem;
right: 3rem;
z-index: 2;
color: oklch(96% 0.008 80);
font-size: 0.75rem;
letter-spacing: 0.08em;
opacity: 0.5;
}
/* Section rail */
.section {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 3rem;
padding: 6rem 3rem;
border-top: 1px solid oklch(80% 0.008 80);
}
.section__label {
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
padding-top: 0.25rem;
}
.section__number {
font-family: var(--font-display);
font-style: italic;
font-size: 0.875rem;
color: var(--accent);
display: block;
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<nav class="nav">
<div class="nav__logo">Mira Høst</div>
<ul class="nav__links">
<li><a href="#work">Work</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section class="hero">
<div class="hero__image"></div>
<div class="hero__content">
<p class="hero__eyebrow">Documentary · Landscape · Portrait</p>
<h1 class="hero__title">Light<br>finds<br>form.</h1>
<div class="hero__meta">
<span>Oslo, Norway</span>
<span>Est. 2014</span>
</div>
</div>
<div class="hero__counter">001 / 012</div>
</section>
<section class="section" id="work">
<div class="section__label">
<span class="section__number">01</span>
Selected Work
</div>
<div>
<!-- [photo grid] -->
</div>
</section>
</body>
</html>
.card {
background: oklch(100% 0 0);
border: 1px solid oklch(90% 0.008 80);
padding: var(--space-6);
/* No border-radius unless explicitly designed */
border-radius: var(--radius-md);
transition: box-shadow var(--duration-base) var(--ease-out-expo),
transform var(--duration-base) var(--ease-out-expo);
}
.card:hover {
box-shadow: 0 8px 32px oklch(14% 0.008 80 / 0.08);
transform: translateY(-2px);
}
.card__metric {
font-family: var(--font-display);
font-size: var(--text-4xl);
font-variant-numeric: tabular-nums;
letter-spacing: -0.03em;
color: var(--color-accent);
line-height: 1;
}
.card__label {
font-size: var(--text-sm);
color: var(--color-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: var(--space-2);
}
<!-- CORRECT: honest placeholders -->
<div class="icon-slot">[icon: arrow-right]</div>
<div class="avatar-slot">[photo: team member Sarah]</div>
<figure class="image-slot">[image: hero — coastal landscape, wide format]</figure>
<!-- WRONG: never do this -->
<svg><!-- badly drawn attempt at an icon --></svg>
<div style="background: #ccc; border-radius: 50%; width: 40px; height: 40px;"></div>
| Type | Description |
|---|---|
| Web pages & landing pages | Marketing sites, product pages, portfolios |
| Interactive prototypes | Clickable mockups with device frames |
| Slide decks | HTML presentations (1920×1080, keyboard nav) |
| Data visualizations | Dashboards with Chart.js or D3.js |
| Animations | CSS/JS motion design, timeline-driven demos |
| Design systems | Token exploration, component variants |
Agent ignores the skill and produces generic output
.agents/skills/ vs .claude/skills/)SKILL.md is not empty or truncatedoklch colors not rendering
color: #4f46e5; /* fallback */
color: oklch(55% 0.24 270);
Fonts not loading in self-contained HTML files
@font-facerel="preconnect" for performanceDesign system declaration step is skipped
Agent uses emoji as icons despite the rule
[icon: name] placeholders instead"web-design-skill/
├── .agents/skills/web-design-engineer/
│ ├── SKILL.md # Main skill definition (~400 lines)
│ └── references/
│ └── advanced-patterns.md # Code templates & patterns (~520 lines)
├── demo/
│ ├── demo1.html # Space museum — without skill
│ ├── demo1-with-skill.html # Space museum — with skill
│ └── demo2-with-skill.html # Photographer portfolio — with skill
└── prompt/
└── system.md # Claude Design reference system prompt
MIT — freely copy, modify, and embed in any project.