菜单
Distinctive visual UI design: research the subject's own visual vernacular, build a token system (color, type, layout, signature), critique against defaults, then code. Use when building or reshaping a user-facing UI where templated defaults won't do.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Smart commit with Conventional Commits: groups logical changes, infers type + scope from file paths, and generates messages in `<type>(<scope>): <description>` format.
Iterative quality gate hardening loop — run the gate, parse failures, fix each failing category with a fresh-context delegate, re-run until all gates pass or diminishing returns are hit.
Relentless quality loop: alternate between a fresh-context implementer and a fresh-context reviewer until only diminishing-return issues remain. The reviewer is advisory-only (no state changes). The implementer starts fresh each cycle, unanchored from prior attempts. Terminates when max severity ≤ 3 for two consecutive cycles or the severity trend is flat.
Compact the current conversation into a handoff document for a fresh agent to pick up next session. Includes current phase, workspace state, memory state, and suggested skills.
Investigate a question against primary sources (official docs, arXiv papers, Semantic Scholar, source code, specs, first-party APIs) using the web_search tool. Writes structured findings as a Markdown file. Use when the user wants a topic researched, docs gathered, API facts investigated, or reading legwork delegated. Maps to P1 Explore phase.
Meta-cognitive improvement loop: reflect on errors, learn patterns, codify guardrails. The skill that rewrites skills. Always loaded.
| name | frontend-design |
| description | Distinctive visual UI design: research the subject's own visual vernacular, build a token system (color, type, layout, signature), critique against defaults, then code. Use when building or reshaping a user-facing UI where templated defaults won't do. |
| license | Apache-2.0 (see LICENSE.txt) |
| source | Anthropic Skills — frontend-design (https://github.com/anthropics/skills) |
Leading word: vernacular — every subject has its own visual language: materials, instruments, artifacts. The design grows from the subject's world, not from a palette library.
Approach this as the design lead at a small studio known for giving each client a visual identity that could not be mistaken for anyone else's. Take one real aesthetic risk you can justify.
Create a compact token system with four axes:
| Axis | Output | Description |
|---|---|---|
| Color | 4–6 named hex values | Palette from the subject's world, not a template |
| Type | 2+ typeface roles | A characterful display face (used with restraint), a complementary body face, a utility face |
| Layout | 1-sentence prose + ASCII wireframe | A layout concept tested against the content |
| Signature | Single unique element | The one thing this page will be remembered by |
Review the plan against the brief. If any part reads like the generic default you'd produce for any similar page (the warm cream + terracotta, the near-black + acid green, the broadsheet columns), revise it. Say what you changed and why. Only after confirming uniqueness should you code.
Hero is a thesis — Open with the most characteristic thing in the subject's world: a headline, image, animation, live demo. A big number with gradient is the template answer — use it only if it's genuinely the best option.
Typography carries personality — Pair display and body deliberately. Make the type treatment itself memorable, not a neutral delivery vehicle.
Structure is information — Numbered markers (01/02/03) only belong if the content is actually a sequence where order carries information. Don't decorate — encode.
Motion serves the subject — Page-load sequences, scroll-triggered reveals, hover micro-interactions. One orchestrated moment beats scattered effects. Extra animation signals AI-generation.
Complexity matches the vision — Maximalist directions need elaborate execution. Minimal needs precision in spacing, type, and detail. Elegance is executing the chosen vision well.
Copy is design material — Words exist to make the experience easier. Write from the user's side of the screen. Name things by what people control, not how the system is built. Use active voice. Treat failure as direction, not mood. See references/writing-in-design.md for the full guide.
AI-generated design clusters around three looks. All are legitimate for some briefs; none should be the default choice:
Where the brief specifies one, follow it exactly. Where it leaves an axis free, don't spend that freedom on a default.
Be careful with selector specificity — it's easy to generate classes that cancel each other out (.section type selector vs .cta element selector). This happens often with paddings/margins between sections.
Source: Anthropic Skills — frontend-design — Apache 2.0 License. Adapted for LemonHarness using progressive disclosure (writing guide extracted to reference).
