# Web Design

> Design and build front-end web pages — landing pages, simple marketing sites, and conversion-focused layouts — with a clear aesthetic direction and clean, responsive markup. Use for "design a landing page", "build me a website", "make this page look good", or any front-end / web design request.

- Skill: `vellum-ai/web-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add vellum-ai/web-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/vellum-ai/web-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: vellum-ai (https://skillmd.com/u/vellum-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/vellum-ai/web-design

---


Build the page well **the first time** — read the brief closely, lock the aesthetic direction up front, then execute. The reviewer flagged needing too many iterations to land the look; the fix is fewer, sharper passes, not more.

## Step graph

### Step 1: Read the brief closely
Before designing anything, pin down: **purpose** (the one action the page must drive), **audience**, **brand** (existing site, colors, type, logo — run **brand-voice** / **visual-assets** if these aren't set), **content** (the actual copy — write it with **draft-content** if it doesn't exist), and any **references** the user likes. If the user gave a reference or brand, match it — don't improvise a different direction.

### Step 2: Lock the aesthetic direction up front
State the design direction in 2–3 lines *before* building — layout, type system, color, density, mood — so the user can redirect cheaply now instead of after a full build. Tie it to the brand and the references. Get a quick yes, then build.

### Step 3: Use the proven landing-page shape
For a landing page, structure for conversion: **headline (value, not feature) → subhead → proof → benefits → objection handling → one clear CTA.** One primary CTA, repeated; remove competing actions. Match the page's promise to where traffic is coming from.

### Step 4: Build clean, responsive front-end
Produce semantic, responsive markup (HTML/CSS, or the host's web-build path / framework if one is in use). Mobile-first; accessible (contrast, alt text, focus states, real headings); fast (no heavy dependencies for a simple page). Keep the visual system consistent — a small set of type sizes, spacing steps, and colors.

### Step 5: Ship and tighten
Deliver the page, then offer the next steps: deploy it, wire the form/CTA to its destination (use the integration setup principles — check the user's account, serve the signup/API link, collect secrets securely), and instrument it (analytics, a conversion event). Hand off pixel/conversion-tracking notes if paid traffic is coming.

End with: the live/previewable page, the one CTA it drives, and the 2–3 things that would lift conversion next.