frontend-master

Frontend Master

Complete frontend tasks to the standard of a design engineer: first understand the content and constraints, then form a clear visual direction, and finally verify with real running results. Do not treat database recommendations, popular styles, or fixed page structures as the answer.

Workflow

1. Recon: Read the current state

Before starting design, check:

Framework, CSS approach, UI library, icon library, and existing components
CSS variables, theme tokens, fonts, spacing, and responsive conventions
Existing design system, as well as the layout and interaction patterns of similar pages
Project instructions, verification commands, and accessibility requirements

Prefer the existing system. Unless the user explicitly requests a rebrand, do not overturn mature conventions just to be "unique."

2. Frame: Define the problem

Before coding, clarify:

Purpose: What problem does the page solve
Audience: Who uses or views it
Content hierarchy: What content matters most
Primary action: What you want users to complete
Tone: What temperament the interface should convey
Signature element: The one design feature most worth remembering
Constraints: Technical, content, performance, accessibility, and brand constraints

When creating a new homepage, personal brand page, portfolio, or platform template, you must read template-design.md, first output a brief template brief, then begin implementation.

3. Research: Treat search results as candidates

Use the built-in search tool when you need to explore directions:

python3 scripts/search.py "<项目类型> <行业> <关键词>" --design-system -p "<项目名>"
python3 scripts/search.py "<关键词>" --domain style
python3 scripts/search.py "<动效需求>" --domain gsap
python3 scripts/search.py "<App 交互问题>" --domain app
python3 scripts/search.py "<字体需求>" --domain google-fonts
python3 scripts/search.py "<关键词>" --stack nextjs

Search results must be filtered by audience, brand, language, existing system, and implementation cost. Do not mechanically adopt the first result, and do not invariably converge on a certain font, gradient, or Hero > Features > CTA。

When you need to actively control the scope of exploration, you can use three 1–10 design dials:

python3 scripts/search.py "<项目描述>" --design-system \
  --variance 8 \
  --motion 6 \
  --density 7

variance: From restrained symmetry to bold asymmetry
motion: From subtle feedback to complex choreography; Reduced Motion must still be respected
density: From spacious content layouts to high-density dashboards

4. Craft: Implement and refine

Visual decisions follow design-philosophy.md。
Component states and feedback follow interaction-craft.md。
When animation is involved, read motion-quality.md。
Reuse the project's existing components and theme tokens; do not hard-code a parallel design system.
Keep it semantic, mobile-first, WCAG AA, and match the project's existing code style.

Invoke specialized Skills according to the scenario; do not invoke all capabilities serially every time:

Scenario	Specialized Skill
Deeply inspect component states, feedback, and micro-texture	`emil-design-eng`
Drag, swipe, sheet, spring, momentum, interruptible interactions	`apple-design`
The user only describes the effect and needs confirmation of motion terminology	`animation-vocabulary`
The page appears static and needs to find motion that is truly worth adding	`find-animation-opportunities`
There is already a lot of motion and a systematic audit and remediation plan is needed	`improve-animations`

When a specialized Skill is unavailable, continue the task using this Skill's references as the minimum quality baseline.

5. Persist: Carefully maintain the design system

Existing design system: prioritize reading and following it; update only with explicit changes.
First-time setup: show the design direction and get confirmation before persisting.
Do not overwrite existing files by default; when the user explicitly updates, use --force。

python3 scripts/search.py "<项目描述>" \
  --design-system \
  --persist \
  -p "<项目名>" \
  --page "<页面名>"

Generated structure:

design-system/<project-slug>/MASTER.md
design-system/<project-slug>/pages/<page-slug>.md

Page rules override MASTER; other rules inherit from MASTER.

6. Verify: complete delivery with evidence

Before delivery, read verification.md：

Run the project's existing lint, typecheck, test, and build
Actually open the page and check real content and key interactions
Verify mobile, desktop, keyboard, and Reduced Motion
Check the console, resource loading, overflow, clipping, and fixed-layer occlusion

Projects that cannot be run must clearly state which items were not verified. Reading only the source code or only checking off a list does not equal completing visual verification.

Quality Bar

The design direction is clear and serves the content, not relying on stacked decorations to create a "premium feel"
There are structural differences between templates, rather than just changing colors, corner radii, or shadows
Only real interactive elements present an interaction affordance
Motion is purposeful, restrained, interruptible, or degradable
Typography fits the brand, language coverage, performance, and reading scenarios
Desktop and mobile organize information separately, rather than scaling down proportionally
All completion claims have the latest verification evidence