frontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
1How It Works & Mechanism
All functionality is delivered purely via a 71-line single-file instruction text: zero scripts, zero tools, zero external files. The core mechanism is 'encoding anti-template aesthetics into actionable contextual rules', relying on host model execution and disciplined self-critique without any automation.
git ls-files frontend-design/ = LICENSE.txt + SKILL.md（71 行，无 scripts/references/templates）；全文 grep 无 URL/命令/代码围栏
Employs 'negative-sample calibration' to prevent cookie-cutter layouts: condenses common AI-generated visual tropes into a 5-item trait checklist with concrete color values and patterns, enabling the model to self-audit whether outputs fall into template clusters—moving past vague appeals for 'creativity' into concrete, avoidable targets.
For calibration, AI-generated design right now clusters around some traits: 1. a warm cream background (near #F4F1EA) with a high-contrast serif display and a terracotta or warm-clay accent (often near #D97757 — Anthropic's own Claude-interaction accent...); ... 5. template chrome that appears whatever the subject: a tracked-out ALL-CAPS eyebrow label above every heading; meta strings joined with middle dots ('A · B · C'); ... tinted near-black (#0B0B0B, #111) standing in for black; a monospace face for small data labels; a '→' appended to link and button text.
Enforces 'subject-matter positioning' as the source of differentiation: when a brief lacks subject context, proactively identifies subject/audience/primary job for client confirmation; uses the industry, tactile materials, and vernacular of the domain as the mandatory anchor for visual choices.
If the brief does not identify what the product or subject matter is, identify it yourself before designing, and confirm with the client. You can come up with one concrete subject, the design's audience, and the design's primary job, as a proposal. ... The subject's industry, subject matter, materials, and vernacular are where distinctive visual choices come from
Two-pass workflow with a uniqueness self-audit gate: first generates a compact token plan (colors/fonts/layout/principles) that must be reviewed against the brief prior to coding; any choice reading like a 'generic default' must be revised with explicitly logged changes before coding begins.
Work in two passes. First, brainstorm a short design plan based on the client's design brief: create a compact token system with color, type, layout, and principles. ... Then review that plan against the brief before building: if any part of it reads like the generic default you would produce for any similar page ... revise that part, say what you changed and why. Only after you've confirmed the relative uniqueness of your design plan should you start to write the code, following the revised plan.
Embeds typography and typesetting domain knowledge as hard constraints: type scales referenced from The Elements of Typographic Style, line lengths <80 characters, slightly increased serif line heights, and an explicit prohibition checklist targeting common generative typesetting flaws.
set a clear type scale following the default guidance of The Elements of Typographic Style ... Default to line lengths of less than 80 characters. Serif typefaces can have slightly longer line lengths; give serif body text slightly more line-height than a sans-serif. ... Avoid these default typographic treatments; they are the commonest tells of a generated page: - Accenting just a single word or phrase in a headline ... - Using all caps for labels.
Elevates 'interface copy' to a first-class design material: enforces active and precise CTAs ("Save changes," not "Submit"), strict lifecycle consistency in action naming (Publish → toast displays Published), and instructional rather than emotional error/empty states.
Use active voice as default. A CTA says exactly what happens when it is used: "Save changes," not "Submit." An action keeps the same name through the whole flow, so the button that says "Publish" produces a toast that says "Published." ... Treat failure and emptiness as moments for direction, not mood. Explain what went wrong and how to fix it ... Errors don't apologize, and they are never vague about what happened. An empty screen is an invitation to act.
Structural honesty and motion restraint rules: structural cues such as numbering and dividers must convey truthful information (only use 01/02/03 if content is genuinely sequential); non-user-triggered animations are restricted to 'a single choreographed moment,' explicitly penalizing staggered fade-slide-ups and all-card hover states as generic AI tropes.
Many generic designs use numbered markers (01 / 02 / 03), but that's only appropriate if the content actually is a sequence — like a stepped process or a timeline. Before adding numbered markers, check the content really is a sequence. ... A single orchestrated moment — one page-load sequence or one reveal — lands better than scattered effects; fade-and-slide-up entrances on each section and hover transitions on every card are the generic default and read as AI-generated.
Quality baselines and a closed self-critique loop: single focal anchor paired with peripheral restraint ("Spend your boldness in one place"), strict baselines for responsiveness/keyboard focus/reduced motion/accessibility, conditional screenshot self-evaluations ("a picture is worth 1000 tokens"), and the Chanel-inspired 'remove one accessory before leaving' rule of thumb.
Spend your boldness in one place. Let one element be the memorable thing, keep everything around it quiet and disciplined, and cut any decoration that does not serve the brief. Build to a quality floor without announcing it: responsive down to mobile, visible keyboard focus, reduced motion respected, visually accessible ... Critique your own work as you build, taking screenshots to review if your environment supports it — a picture is worth 1000 tokens.
2Core Capabilities
4Recommended Governance & Evidence
- SKILL.md: Composed entirely of pure prompt instructions and rule text, without script execution or external impacts
5Second-Pass Verification
- [ok] 目录文件清单（有无隐藏脚本/数据） — git ls-files frontend-design/ 仅 LICENSE.txt + SKILL.md；glob 无其他文件，无隐藏资源
- [ok] SKILL.md 中 URL/CLI/API/包引用 — 正则扫 http|curl|fetch|exec|api_|npm|pip|gh |git |env[ 等零命中；全文本唯一 URL 是 LICENSE.txt 中官方许可地址 http://www.apache.org/licenses/（非功能依赖）→ external_deps 空数组成立
- [ok] 代码围栏 / 注入标记（```、ignore previous、system-reminder 等） — 零命中；SKILL.md 为纯 markdown 叙述
- [ok] 5 条 AI 特征清单及色值逐字存在 — L39-43 逐字含 #F4F1EA、#D97757、rgba(0,0,0,.1)、#0B0B0B、#111、'A · B · C'、'→'，非编造
- [ok] meta.license / stars / last_push 与源一致 — gh api repos/anthropics/skills：stars 174801、pushed_at 2026-09-03T16:37:14Z、license null（仓库根无 LICENSE，故 meta 以 skill 目录内 Apache-2.0 LICENSE.txt 为准并注明差异）
- [ok] description 与正文能力是否夸大 — description 措辞为 'Guidance/Helps with'，正文确为指南文本，未宣称自动化/保证结果——无吹牛
- [ok] 『两遍流程/截图自批判』是否真被强制 — L47-53 流程顺序明确（评审→修改说明→才写代码），L59 截图附 'if your environment supports it' 条件；但执行严格性依赖宿主模型自律，源码内无强制检查点——此点已在 how_it_works 标注为执行面依赖
- [ok] 行号/引用与文件实际内容对应 — 二次 grep 带行号比对全部引用段落，无张冠李戴；截断引用未扩写
6Verdict & Scenarios
67d68803068d5ae9…