How do I install the Web Design skill?

Run npx skillmds@latest add vellum-ai/web-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Web Design safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Web Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Web Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Web Design?

vellum-ai (@vellum-ai) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Web Design by vellum-ai — Agent Skill

Name: Web Design
Author: vellum-ai

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.

vellum-ai 95c6e4e 2.5 KB Updated Sep 17, 2026

File contents

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.

---name: web-designdescription: 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.---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 closelyBefore 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 frontState 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 shapeFor 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-endProduce 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 tightenDeliver 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.

Frequently asked questions