Primary workflow / 核心工作流
Frontend Design Workflow前端设计工作流
My frontend process joins product thinking, visual direction, implementation, and browser evidence. The goal is not a pretty screenshot; it is a clear experience that survives real use.
我的前端流程把产品思考、视觉方向、实现和浏览器证据连接起来。目标不是一张漂亮截图，而是能经受真实使用的清晰体验。
- Stages / 阶段
- 8 connected gates
- Default / 默认
- Static first · Server first
- Evidence / 证据
- Tests · Browser · Production
00 / Working rule
Clarity before decoration. Evidence before claims.
Tools change with the project. The quality gates do not: real content, explicit decisions, restrained dependencies, accessible interaction, and proof in the final environment.
工具会随项目变化，但质量门槛不会：真实内容、明确决策、克制依赖、可访问交互，以及在最终环境中的验证证据。
01–08 / Design to release
The complete frontend loop.
- 01
Classify the product and primary flow
判断产品类型与核心流程
Name the audience, the one action that matters most, the content that already exists, and the boundaries of the first release.
GateThe visitor and main journey fit in two sentences.
- 02
Audit the real source material
盘点真实源码与内容
Find the actual repository, assets, copy, technical constraints, and unfinished states before drawing or rewriting anything.
GateEvery published claim and asset has a traceable source.
- 03
Abstract references into principles
把参考提炼为设计原则
Study a small set of relevant component and website references, then record reusable ideas about hierarchy, rhythm, interaction, and tone without copying an identity.
GateReferences become principles, not pasted layouts.
- 04
Write the design contract
写清设计契约
Lock typography, color tokens, spacing rhythm, breakpoints, content hierarchy, motion rules, and accessibility constraints before large implementation.
GateA new component can be judged against explicit tokens.
- 05
Choose the smallest useful architecture
选择最小而够用的架构
Prefer static server-rendered pages, isolate only necessary client state, avoid duplicate libraries, and add a backend only when the product truly needs persistence.
GateEvery dependency and client boundary has a reason.
- 06
Build vertical slices with tests
用测试完成纵向切片
Define observable behavior, watch its test fail, implement the smallest complete slice, and keep each checkpoint independently reviewable.
GateThe main flow works end to end before decorative expansion.
- 07
Verify in a real browser
在真实浏览器中验证
Check 390, 768, 1024, and 1440 px layouts plus keyboard, reduced motion, Console, Network, and accessibility; fix confirmed defects and run the checks again.
GateNo overflow, broken interaction, serious Axe issue, or unexplained request.
- 08
Release, then verify the public path
发布后验证公开路径
Deploy the tested commit, verify every production route and domain, confirm media and metadata, and record what actually passed rather than assuming deployment equals completion.
GateThe production route and domain return the intended experience.
Tools, when useful