web design guidelines

Name: web design guidelines
Author: antfu

by antfu·2mo ago

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit…

Design & VisualClaude CodeMedium risk · 中风险open source · 开源

Before you install安装前须知

✓No special access needs declared未声明特殊权限需求

Editor's verdict· 编辑结论

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
— Editorial team · 编辑团队

Install via Skills CLI

Use npx skills add to install this skill into the selected agent. Phase 0 commands are generated from source rules, not verified.

Codex

npx skills add https://github.com/antfu/skills/blob/main/skills/web-design-guidelines/SKILL.md -g -a codex -y

Drop `-g` to install project-locally

✓

Best for适合什么场景

提示词优化
Agent 行为约束
上下文管理

✗

Not for不适合什么场景

Workflows that require stronger human review than this catalog entry documents.需要比当前目录条目更严格人工复核的工作流。

vs alternativesvs 其他选择

Full compare table完整对比表 →

#1algorithmic art

algorithmic art: agent skill — from anthropics/skills.

132k stars

diff · 差异Best for procedural / generative visual production — patterns, abstract backgrounds, design system motifs that need many variants. Built around iteration: generate, pick favorites, refine prompt, regenerate. Strongest when the visual is supporting decoration (cards, headers, slide backgrounds). Skip it for representational illustration or character art; those need a different toolchain.

#2ckm:brand

ckm:brand: agent skill — from nextlevelbuilder/ui-ux-pro-max-skill.

76k stars

diff · 差异Best for keeping brand voice and visual identity consistent across teams that don't have a dedicated brand lead. Outputs a style guide ready to hand to design + marketing + docs, not just abstract principles. Strongest at catching gradual drift (color shifts, tone shifts, logo placement). Weakest on initial brand creation — bring a separate research phase for that.

#3ckm:banner design

ckm:banner design: agent skill — from nextlevelbuilder/ui-ux-pro-max-skill.

76k stars

diff · 差异Best for the banner / hero / OG-image production line — generating brand-aligned visual headers at scale without designers manually composing each one. Takes brand guidelines as input, outputs multiple variants reviewers can pick from. Skip it for body illustrations and complex compositions; ckm:design or algorithmic-art fit those better.

Side-by-side compare维度对比

Key differences with same-lane alternatives

	this skill · 当前web design guidelines	algorithmic art	ckm:brand	ckm:banner design
Rating · 评分	—	—	—	—
Stars · 星标	4.9k	132k	76k	76k
Risk · 风险	Medium risk · 中风险	Low risk · 低风险	Low risk · 低风险	Low risk · 低风险
Best for · 最适合	提示词优化	algorithmic art: agent skill — from anthropics/skills.	ckm:brand: agent skill — from nextlevelbuilder/ui-ux-pro-max-skill.	ckm:banner design: agent skill — from nextlevelbuilder/ui-ux-pro-max-skill.
Not for · 不适合	Workflows that require stronger human review than this catalog entry documents.	Workflows that require stronger human review than this catalog entry documents.	Workflows that require stronger human review than this catalog entry documents.	Workflows that require stronger human review than this catalog entry documents.

Audit notes审计备注

not individually audited · 未独立审计

Source源码open on GitHub · 公开✓

Author作者community · 社区!

Network网络访问not individually audited · 未独立审计!

Filesystem文件写入not individually audited · 未独立审计!

Dependencies依赖not individually audited · 未独立审计!

Telemetry遥测none · 无✓