frontend-design

git ls-files frontend-design/ = LICENSE.txt + SKILL.md（71 行，无 scripts/references/templates）；全文 grep 无 URL/命令/代码围栏

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.

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

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.

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.

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.

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.

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.