web-design

name	web-design
description	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.
compatibility	Designed for Vellum personal assistants — part of the marketing-expert plugin
metadata	{"emoji":"🎨","vellum":{"category":"development","display-name":"Web Design","activation-hints":["design / build a landing page","make me a website / web page","front-end design / make this page look good","design the hero / above the fold","turn this copy into a real page"]}}

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.