FreeSkillLow riskv1.3.1

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.

Design #web #design #guidelines #ux

Browse topics and task labels

Prompt or reference Build Edit Redesign Critique Design Review Text

Publisher: vercel-labs/agent-skills
Source: GitHub
Category: Design

Package validated
Taste calibrated

Overview

Who it is for: Agents polishing marketing and product web surfaces.
Not intended for: Native mobile design systems or print.
Export formats: codex_skill, markdown_export
TASTE domain: ui_ux_taste

Sandbox comparison

Generic baseline vs web-design-guidelines on the same input, pinned to v1.3.1.

Sample input

gpt-4.1-mini · temp 0.2

Docs homepage with equal-weight cards and weak CTA.

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

+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

Runs on registry sample cases through the shared, deterministic sandbox engine.

Usage

01Review the quality signals, limitations, and permissions on this page.
02Inspect upstream content and license before loading a package.
03Apply relevant guidance within your requested scope and verify the result.
04Agents can also read the machine-readable contract at /api/v1/skills/web-design-guidelines/manifest.

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

Example prompts

Requests that put this skill to work.

Apply web design guidelines to this pricing page
Fix hierarchy and copy density on this docs landing page

Limitations

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

Version history

v1.3.1CurrentJan 15, 2026
Interaction polish checklist

At a glance

Installs: 437.9K
8-week activity: 125K
Evaluation: Registry example only
Last updated: Jan 15, 2026
Version: 1.3.1

Evidence

Source metadata and registry examples. Content and outcome quality require review.

Package validated
Benchmark tested
Taste calibrated
Creator reviewed

Permissions

Read filesNot needed
Write filesNot needed
Web accessNot needed
API accessNot needed
MCP accessNot needed
Code executionNot needed
External actionsNot needed

Environment fit

Runtime compatibility has not been verified.

Resources

Own this skill?

It is listed under vercel-labs/agent-skills. Claim it to manage the listing after review.

False claims may result in permanent bans. Ownership transfer is never automatic.

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.

Publisher

vercel-labs/agent-skills

Source

GitHub

Overview

Generic baseline

Skill-enhanced

Rubric

Assumptions

Usage

Example prompts

Limitations

Version history

Related skills

frontend-design

design-guide

better-interface

Overview

Generic baseline

Skill-enhanced

Rubric

Assumptions

Usage

Example prompts

Limitations

Version history

Related skills

frontend-design

design-guide

better-interface