# Setup Guide — Professional Web Design with AI Agents (2026 Edition)

This guide condenses research into 2026 web design trends and shows how to set up Claude Code (or any AI coding agent) so its design output looks professional and **not AI-generated**. Read sections 1–3 once during setup; sections 4–8 are working references you'll come back to per project.

---

## 1. Why AI output looks "AI-made" (and how to fight it)

AI models generate "on-distribution" design — the statistically most common choices from their training data. The telltale signs:

| AI-slop sign | Fix |
|---|---|
| Inter/Roboto everywhere | Define a specific font pairing per project (see section 5) |
| Purple-to-blue gradient hero | Define the palette in hex values drawn from the subject's world |
| Empty headlines: "Elevate Your Business" | Write concrete copy that names what the product actually does |
| Uniform padding & border-radius on everything | Vary spacing rhythm; radius must follow the style, not an 8px default |
| Three icon cards in a row + emoji icons | Structure must encode information, not decorate |
| Small animations scattered everywhere | A few orchestrated moments (page-load sequence, one scroll moment) |

Anthropic's official `frontend-design` skill also names **three "default looks"** to avoid unless the brief demands them:

1. **Warm cream + high-contrast serif + terracotta accent**
2. **Near-black background + one acid-green/vermilion accent**
3. **Broadsheet style**: hairline rules, zero border-radius, dense newspaper columns

All 20 prompts in the `prompts/` folder are engineered to avoid every pattern above.

---

## 2. Skill setup for Claude Code

Skills are markdown instruction files that Claude loads automatically when relevant. For design work, three skills matter most in 2026 — one official, two community favorites. They complement each other:

| Skill | Role | Stars/adoption |
|---|---|---|
| `frontend-design` (Anthropic, official) | Design *process*: plan → critique → build, aesthetic intent, copywriting rules | 277k+ installs |
| `ui-ux-pro-max` (nextlevelbuilder) | Design *knowledge base*: 84 UI styles, 192 palettes, 74 font pairings, GSAP presets, design-system generator | ~100k GitHub stars, the most popular community design skill |
| `taste-skill` (Leonxlnx) | Anti-slop *guardrails*: bans generic three-card rows and fake stats; VARIANCE/MOTION/DENSITY dials | ~60k GitHub stars |

**Recommended setup: install `frontend-design` + `ui-ux-pro-max`.** Add `taste-skill` if outputs still feel templated. Don't install every design skill you find — overlapping skills dilute each other.

### 2a. Anthropic `frontend-design` (official — install this first)

**Option 1 — plugin marketplace (recommended):**

```
/plugin marketplace add anthropics/claude-code
/plugin install frontend-design
```

(Commands vary slightly between Claude Code versions — if these fail, run `/plugin` and use the menu.)

**Option 2 — manual, as a project skill:**

1. Open https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design/skills/frontend-design
2. Copy `SKILL.md` into your project as:
   ```
   <project>/.claude/skills/frontend-design/SKILL.md
   ```
   or globally for all projects:
   ```
   C:\Users\<you>\.claude\skills\frontend-design\SKILL.md
   ```

### 2b. UI/UX Pro Max (community — the design knowledge base)

Repo: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

**Via CLI (recommended by the author):**

```
npm install -g ui-ux-pro-max-cli
cd path\to\your\project
uipro init --ai claude
```

**Via plugin marketplace:**

```
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
```

What you get: a searchable local database of 84 UI styles (glassmorphism, brutalism, bento, claymorphism…), 192 color palettes mapped to 192 product types, 74 font pairings with Google Fonts imports, 16 GSAP motion presets, 25 chart types, and 22 tech stacks. Its v2 **Design System Generator** analyzes your request and outputs a tailored design system (structure, style priorities, palette, typography, animations, anti-patterns, pre-delivery checklist) before any code is written. It activates automatically on UI/UX requests.

### 2c. Taste skill (community — anti-slop guardrails)

Repo: https://github.com/Leonxlnx/taste-skill · Docs: https://tasteskill.dev

```
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
```

Or simply copy its `SKILL.md` into `.claude/skills/design-taste-frontend/`. It adds a "taste checklist" the agent calibrates on every frontend task (VARIANCE, MOTION, DENSITY dials) and hard rules against templated layouts. Framework-agnostic (React, Vue, Svelte, plain HTML).

### 2d. Finding more skills

- **awesome-claude-skills** curated lists: https://github.com/travisvn/awesome-claude-skills and https://github.com/ComposioHQ/awesome-claude-skills
- For Claude.ai (not Code): enable the **web-artifacts-builder** skill for building artifacts.
- Roundups worth reading: [Composio's top skills](https://composio.dev/content/top-design-skills), [Superdesign's design skills review](https://superdesign.dev/blog/design-skills-reviewed).

### 2e. (Optional) Build your own brand-system skill

If you repeatedly build sites for the same brand, encode its design system as a skill so every session stays consistent. Save as `.claude/skills/brand-system/SKILL.md`:

```markdown
---
name: brand-system
description: Design system for all Brand X web projects — use when building or modifying UI for Brand X.
---

# Brand X Design System

## Typography
- Display: Bricolage Grotesque (700–800), tracking -2%
- Body: Schibsted Grotesk (400/500), line-height 1.6
- Data/captions: JetBrains Mono (400), uppercase, tracking +8%

## Colors (CSS variables)
--ink: #16130F; --paper: #FAF8F4; --brand: #1F5AF0; --accent: #E8590C;

## Rules
- Radius: 2px on cards, full pill on buttons. No other values.
- Section spacing: 128px desktop / 72px mobile.
- Entrance animation: fade + translateY(24px), 500ms, cubic-bezier(0.22,1,0.36,1), 80ms stagger.
- Never use: Inter, purple gradients, emoji as icons, lorem ipsum.
```

### 2f. Project-level context

Create a `CLAUDE.md` in your web project's root with the facts that never change (audience, brand tone, copy language). Claude reads it automatically every session, so you never repeat it in prompts.

---

## 3. Recommended stack

### Project structure

For landing pages / company profiles, **start with a single self-contained `index.html`** (embedded CSS & JS). Fast to preview, easy to iterate, and every prompt in this collection asks for exactly that. Migrate to a framework later if needed.

For apps / larger sites: Next.js or Astro + Tailwind CSS v4.

### Animation stack (pick per need)

| Need | Use | Notes |
|---|---|---|
| Scroll reveals, scroll progress | **CSS scroll-driven animations** (`animation-timeline: view()`) | Native, no JS, runs on the compositor. Fallback: IntersectionObserver |
| Page/state transitions | **View Transitions API** | Shipped in Chrome/Edge/Safari; treat as progressive enhancement |
| React UI animation | **Motion** (formerly Framer Motion) | Declarative, small bundle, spring physics |
| Complex scroll storytelling, pinning, scrubbing | **GSAP + ScrollTrigger** | The industry standard for Awwwards-grade sites; now 100% free |
| Designer-authored vector animation | **Lottie / Rive** | For animated illustrations/icons |

**Animation performance rules (always apply):**
- Animate only `transform` and `opacity` (stays on GPU, never triggers layout).
- Always wrap large animations in `@media (prefers-reduced-motion: no-preference)`.
- Scroll-driven animations must never move elements with large magnitude — users can't "pause" scrolling.
- Premium-feeling easing: `cubic-bezier(0.22, 1, 0.36, 1)`, 400–800ms for reveals, 150–250ms for hovers.

---

## 4. Video backgrounds — the correct specs

A badly done background video = a heavy page that looks cheap. Research-backed specs (Mux, MDN, practitioners):

**File:**
- Resolution **720p** (1280×720) — sharp enough for a background, light on bandwidth. Never 4K.
- Loop length **6–10 seconds**, target size **2–5 MB** (10 MB absolute max).
- **Strip the audio track** from the file (saves ~20%, better than just muting).
- Format: MP4 (H.264) minimum; add WebM (VP9/AV1) as the first source for extra savings.

**Compression with ffmpeg:**

```bash
ffmpeg -i source.mp4 -an -vf "scale=1280:-2" -c:v libx264 -crf 28 -preset slow -movflags +faststart hero-720p.mp4
ffmpeg -i source.mp4 -an -vf "scale=1280:-2" -c:v libvpx-vp9 -crf 38 -b:v 0 hero-720p.webm
```

**Correct markup:**

```html
<video class="hero-video" autoplay muted loop playsinline
       poster="hero-poster.webp" preload="metadata" aria-hidden="true">
  <source src="hero-720p.webm" type="video/webm">
  <source src="hero-720p.mp4" type="video/mp4">
</video>
```

- `muted` + `playsinline` are mandatory — without them autoplay is blocked (especially iOS Safari).
- `poster` = first frame as WebP, so the hero is never blank.
- **Mobile**: hide the video below 768px via media query and show a static image (the poster) — saves data and battery.
- **Pause when offscreen** with IntersectionObserver so the CPU isn't burned for nothing.
- Always add a **dark/light overlay** (e.g. `rgba(10,10,10,0.55)`) so text stays readable on any frame.
- Respect `prefers-reduced-motion`: show the poster only.

**Free video sources (commercial use, no attribution):**

| Source | Strength |
|---|---|
| [Pexels Videos](https://www.pexels.com/videos/) | Largest library, up to 4K |
| [Coverr](https://coverr.co/) | Curated specifically for website backgrounds |
| [Mixkit](https://mixkit.co/free-stock-video/) | Tight curation — nearly every clip is usable |

Search for b-roll keywords that read "expensive": *aerial*, *slow motion*, *macro*, *silhouette*, *golden hour*.

---

## 5. Typography — professional (free) font shortlist

2026 typography is moving away from sterile geometric sans toward more expressive type. Everything below is free (Google Fonts / [Fontshare](https://www.fontshare.com/)) and rotated across the 20 prompts:

**Characterful display / headlines:**
Fraunces · Bricolage Grotesque · Clash Display* · Cabinet Grotesk* · Syne · Unbounded · Archivo Black · Cormorant Garamond · Marcellus · Prata · Spectral · Gilda Display · Newsreader · Petrona · Sora · Saira Condensed · Caprasimo

**Clean-but-not-generic body:**
Schibsted Grotesk · General Sans* · Satoshi* · Instrument Sans · Archivo · Hanken Grotesk · Figtree · Albert Sans · Epilogue · Mulish · Public Sans · IBM Plex Sans · Red Hat Display

**Mono / data / captions:**
JetBrains Mono · IBM Plex Mono · Space Mono · Fragment Mono · Red Hat Mono

*\* = Fontshare (fontshare.com); everything else is on Google Fonts.*

**Pairing rule:** one characterful display face (used sparingly, headlines only) + one neutral body face + optionally one mono for labels/data. Never more than 3 families. Use variable fonts (one file, many weights).

---

## 6. Workflow for using the 20 prompts

1. **Pick a prompt** from the table in [README.md](README.md) matching your project type.
2. **Replace the `[bracketed]` variables**: brand name, business description, copy language, and anything else specific. The more concrete the subject, the less generic the result.
3. **Run it in Claude Code.** Each prompt instructs Claude to produce a *design plan* first (palette, type scale, wireframes, signature element) before writing code — let that happen; don't skip to code.
4. **Review the design plan.** If any part feels templated, say: *"Section X still feels generic — replace it with a bolder choice."*
5. **Iterate with screenshots.** Open the result in a browser, screenshot it, paste it back, and ask: *"Critique this screenshot as a design director. List the 5 weakest points and fix them."* This single step raises quality more than anything else.
6. **Run the quality floor checklist** (section 7) AND the boldness floor checklist (section 9a) before calling it done — pages must pass both.

**Iteration tips:**
- One major change per iteration, not a batch.
- Save good versions (`git commit` or copy the file) before the next experiment.
- If the result gets busy: *"Follow Chanel's advice — remove one accessory. Cut the weakest decorative element."*

---

## 7. Quality floor checklist (test before shipping)

- [ ] Responsive down to 360px, no rogue horizontal scroll
- [ ] Background video: ≤5 MB, muted+playsinline, poster, static image fallback on mobile
- [ ] `prefers-reduced-motion` respected (big animations off, content still visible)
- [ ] Keyboard focus visible on every interactive element (tab through the whole page)
- [ ] Text contrast ≥ 4.5:1 (text over video/images needs an overlay)
- [ ] Semantic HTML: one `h1`, correct heading hierarchy, `alt` filled in, landmarks (`header/main/footer`)
- [ ] No lorem ipsum or "Your text here" placeholders
- [ ] Fonts load with `font-display: swap`; below-fold images use `loading="lazy"`
- [ ] Page feels fast: LCP < 2.5s (preload the hero image/poster)
- [ ] Tested in Chrome + Safari/Firefox, and on a real phone

## 8. Anti-AI-slop checklist (taste test)

- [ ] Could this design be mistaken for any other AI template? (If yes → not done)
- [ ] What is the **one signature element**? Name it in one sentence.
- [ ] Is the font Inter/Roboto? (It shouldn't be)
- [ ] Any purple-blue gradients, or three emoji-icon cards in a row? (There shouldn't be)
- [ ] Does the headline say something concrete about *this* product/brand?
- [ ] Does section spacing have rhythm (some tight, some spacious)?
- [ ] Does the copy sound like a human who understands the business?

---

## 9. If results come out too plain (boldness playbook)

Anti-slop rules remove clichés. Executed alone, they also remove personality — the page ends up clean, tidy and forgettable. Every prompt in this collection now carries a `GRAPHIC LANGUAGE` block and a `BOLDNESS FLOOR` to prevent that. If output still feels stiff:

### 9a. Boldness floor checklist (the counterpart of section 7)

- [ ] Does the hero make you stop within 1 second? (If you'd scroll past it on someone else's site, it fails)
- [ ] Is there at least one moment of real SCALE (display type ≥ 8–14vw, a giant ghost numeral/word)?
- [ ] Is there TEXTURE (grain, noise, paper, halftone, blueprint grid) instead of flat perfect surfaces?
- [ ] Are photos ART-DIRECTED (duotone, brand-color overlay, blend mode) — never raw stock/placeholder?
- [ ] Is there COLOR BLOCKING — at least one full-bleed section in a strong color, not 90% neutral + shy accent?
- [ ] Does anything BREAK THE GRID (bleed off the edge, overlap another element, sit at an angle)?
- [ ] Is there ONE choreographed scroll set-piece (pin, scrub, mask reveal, outline-fill)?
- [ ] Do hovers TRANSFORM things (fill sweeps, color floods, scale, image swaps) — not just underline?

### 9b. Ready-to-paste iteration prompts

When a generated page is too tame, iterate with these (one at a time):

```text
Turn this design up 40%. Double the display type scale, add a film-grain texture
over the whole page, set section [X] as a full-bleed [color] block with inverted
type, give every photo a [color] duotone treatment, and add one giant ghost
numeral/word behind section [Y]. Do not add clutter; add scale, texture and
contrast. Keep accessibility and reduced-motion intact.
```

```text
The motion is too timid. Choreograph a 3-step hero entrance, add one scroll
set-piece (pinned scrub or outline-text fill), and give primary hovers a full
color-flood state. Everything stays transform/opacity and respects
prefers-reduced-motion.
```

```text
Critique this screenshot as an Awwwards juror. Score composition, typography,
color, motion and boldness out of 10 each. Fix the two lowest scores.
```

### 9c. Skill-stack tuning for bold output

- The taste-skill ban list targets clichés, **never scale, texture or color**. Every prompt now instructs the agent to resolve conflicts toward the bolder instruction. If output is still conservative, state dials explicitly in your message: `VARIANCE 9, MOTION 8, DENSITY 3`.
- For maximum-boldness runs, drop taste-skill entirely and keep `frontend-design` + `ui-ux-pro-max` — the prompts' own guardrails already cover the worst clichés.
- Restraint-by-design briefs (02 Swiss, 10 Monochrome, 13 Corporate, 16 Museum) express boldness through **scale and color blocking**, not ornament. Don't ask them for stickers; ask them for bigger type and braver color fields.

---

## Research sources

- [Improving frontend design through Skills — Anthropic](https://claude.com/blog/improving-frontend-design-through-skills)
- [frontend-design SKILL.md — anthropics/claude-code (GitHub)](https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md)
- [UI/UX Pro Max skill — nextlevelbuilder (GitHub)](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) · [Taste skill — Leonxlnx (GitHub)](https://github.com/Leonxlnx/taste-skill)
- [awesome-claude-skills — travisvn](https://github.com/travisvn/awesome-claude-skills) · [Superdesign: design skills reviewed](https://superdesign.dev/blog/design-skills-reviewed) · [Composio: top design skills](https://composio.dev/content/top-design-skills)
- [Top Web Design Trends 2026 — Figma](https://www.figma.com/resource-library/web-design-trends/) · [Wix](https://www.wix.com/blog/web-design-trends) · [TheeDigital](https://www.theedigital.com/blog/web-design-trends) · [Elementor](https://elementor.com/blog/web-design-trends-2026/)
- [AI Slop Web Design Guide — 925 Studios](https://www.925studios.co/blog/ai-slop-web-design-guide)
- [GSAP vs Motion — motion.dev](https://motion.dev/docs/gsap-vs-motion) · [Best React animation libraries — LogRocket](https://blog.logrocket.com/best-react-animation-libraries/)
- [CSS scroll-driven animations — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) · [Scroll-driven, scroll-triggered & View Transitions — CSS-Tricks](https://css-tricks.com/scroll-driven-scroll-triggered-scroll-states-and-view-transitions/)
- [Guidelines for Better Website Background Videos — Mux](https://www.mux.com/articles/guidelines-for-better-website-background-videos) · [Optimize silent hero video — Design TLC](https://designtlc.com/how-to-optimize-a-silent-background-video-for-your-websites-hero-area/)
- [50 fonts popular in 2026 — Creative Boom](https://www.creativeboom.com/resources/top-50-fonts-in-2026/) · [Typography Trends 2026 — IK Agency](https://www.ikagency.com/graphic-design-typography/typography-trends-2026/)
- [Neubrutalism — Bejamas](https://bejamas.com/blog/neubrutalism-web-design-trend) · [Glassmorphism vs Neo-Brutalist — StyleKit](https://www.stylekit.top/en/blog/glassmorphism-vs-neo-brutalist)
- Free video sources: [Pexels](https://www.pexels.com/videos/) · [Coverr](https://coverr.co/) · [Mixkit](https://mixkit.co/free-stock-video/)