KairaxisKairaxis
Freetaste skilllow risk

Capability · rank 07

web-design-guidelines

Apply practical web design rules for layout, hierarchy, copy, and polish.

Provides practical web design rules for layout, hierarchy, copy, interaction, and polish.

Listed owner

vercel-labs/agent-skills

Package source

GitHub

Category

Design

Package validatedTaste calibratedDesign
$npx skills add vercel-labs/agent-skills --skill web-design-guidelines
OverviewSandboxUsageExamplesLimitationsVersionsRelated Skills

Overview

Provides practical web design rules for layout, hierarchy, copy, interaction, and polish. Review the sandbox comparison, limitations, permissions, and pinned version before install.

Outcome

Apply practical web design rules for layout, hierarchy, copy, and polish.

Who it is for

Agents polishing marketing and product web surfaces.

What it is not for

Native mobile design systems or print.

Runtime export

codex_skill · markdown_export

TASTE domain: ui_ux_taste

Sandbox comparison
Generic baseline vs web-design-guidelines on the same sample input · pinned v1.3.1

Sample input

Docs homepage with equal-weight cards and weak CTA.

Model: gpt-4.1-mini · temp 0.2

Generic baseline

57/100
Add more whitespace and a bigger button.

Skill-enhanced

86/100
Prioritize: one primary path (Get started), secondary path (API reference).
Reduce card equality, increase scan lines, tighten supporting copy to outcome statements.

Rubric scores

+29 lift
Coverage of failure modes2 → 5
Actionable recommendations3 → 5
Measurable next steps2 → 4
Risk / limitation awareness2 → 4

Assumptions

  • Sample input is representative of a real production task
  • Same model and temperature for baseline and skill-enhanced runs

Comparison runs through the shared sandbox engine on registry sample cases (deterministic v0 path).

Usage

  1. 1. Inspect trust badges, limitations, and permissions on this page.
  2. 2. Run the sandbox comparison to see baseline vs skill-enhanced output.
  3. 3. Install the pinned version with the command below for your agent runtime.
  4. 4. Agents can also fetch /api/v1/skills/web-design-guidelines/manifest.
$npx skills add vercel-labs/agent-skills --skill web-design-guidelines

Example prompts & use cases

1 / Prompt

Apply web design guidelines to this pricing page

2 / Prompt

Fix hierarchy and copy density on this docs landing page

Limitations

  • Guidelines are general; brand systems may differ.
  • Does not measure conversion impact.

Audience

Agents polishing marketing and product web surfaces.

Not for

Native mobile design systems or print.

Version history

v1.3.1

Jan 15, 2026current

Interaction polish checklist