Design Context：从已有上下文出发
这是这个skill最重要的one thing。
好的hi-fi设计一定是从已有design context长出来的。凭空做hi-fi是last resort，一定会产出generic的作品。所以每次设计任务开始，先问：有没有可以参考的东西？
什么是Design Context
按优先级从高到低：
1. 用户的Design System/UI Kit
用户自己产品已有的组件库、色彩token、字型规范、icon系统。最完美的情况。
2. 用户的Codebase
如果用户给了代码库，里面就有活生生的组件实现。Read那些组件文件：
theme.ts/colors.ts/tokens.css/_variables.scss- 具体的组件（Button.tsx、Card.tsx）
- Layout scaffold（App.tsx、MainLayout.tsx）
- Global stylesheets
读代码抄exact values：hex codes、spacing scale、font stack、border radius。不要凭记忆重画。
3. 用户已发布的产品
如果用户有上线的产品但没给代码，用Playwright或让用户提供截图。
# 用Playwright截图一个公开URL
npx playwright screenshot https://example.com screenshot.png --viewport-size=1920,1080让你看到真实的视觉vocabulary。
4. 品牌指南/Logo/已有素材
用户可能有：Logo文件、品牌色规范、营销物料、slide模板。这些都是context。
5. 竞品参考
用户说"像XX网站那样"——让他提供URL或截图。不要凭你训练数据里的模糊印象做。
6. 已知的design system（fallback）
如果以上都没有，用公认的设计系统作为base：
- Apple HIG
- Material Design 3
- Radix Colors（配色）
- shadcn/ui（组件）
- Tailwind默认palette
明确告诉用户你用的什么，让他知道这是起点不是定稿。
获取Context的流程
Step 1：问用户
任务开始时的必问清单（来自workflow.md）：
1. 你有现成的design system/UI kit/组件库吗？在哪？
2. 有品牌指南、色彩/字体规范吗？
3. 可以给我现有产品的截图或URL吗？
4. 有codebase我可以读吗？Step 2：用户说"没有"时，帮他找
别直接放弃。尝试：
让我看看有没有线索：
- 你之前的项目有相关设计吗？
- 公司的marketing网站用什么色彩/字型？
- 你产品的Logo什么风格？能给我一张吗？
- 有什么你欣赏的产品作为参考？Step 3：Read所有能找到的context
如果用户给了codebase路径，你读：
- 先list文件结构：找style/theme/component相关的文件
- 读theme/token文件：lift具体的hex/px values
- 读2-3个代表性组件：看视觉vocabulary（hover state、shadow、border、padding node pattern）
- 读global stylesheet：基础重置、font loading
- 如果有Figma链接/截图：看图，但更相信代码
重要：不要看了一眼就凭印象做。读下来有30+个具体values才真的lift到了。
Step 4：Vocalize你要用的系统
看完context后，告诉用户你要用的系统：
根据你的codebase和产品截图，我提炼的设计系统：
**色彩**
- Primary: #C27558（从tokens.css）
- Background: #FDF9F0
- Text: #1A1A1A
- Muted: #6B6B6B
**字型**
- Display: Instrument Serif（从global.css的@font-face）
- Body: Geist Sans
- Mono: JetBrains Mono
**Spacing**（来自你的scale系统）
- 4, 8, 12, 16, 24, 32, 48, 64
**Shadow pattern**
- `0 1px 2px rgba(0,0,0,0.04)`（subtle card）
- `0 10px 40px rgba(0,0,0,0.1)`（elevated modal）
**Border-radius**
- 小组件 4px，卡片 12px，按钮 8px
**component vocabulary**
- Button：filled primary，outlined secondary，ghost tertiary，全部圆角8px
- Card：白色背景，subtle shadow，无border
我按这套系统开始做。确认没问题？用户确认后再动手。
凭空做设计（没Context时的 fallback）
强烈警告：这种情况下的产出质量会显著下降。明确告诉用户。
你没有design context，我就只能基于通用直觉做。
产出会是"看起来OK但缺乏独特性"的东西。
你愿意继续，还是先补一些参考材料？用户执意要你做，按这个顺序做决策：
1. 选一个aesthetic direction
不要给generic结果。挑一个明确方向：
- brutally minimal
- editorial/magazine
- brutalist/raw
- organic/natural
- luxury/refined
- playful/toy
- retro-futuristic
- soft/pastel
告诉用户你选了哪个。
2. 选一个known design system作为骨架
- 用Radix Colors做配色（https://www.radix-ui.com/colors）
- 用shadcn/ui做组件vocabulary（https://ui.shadcn.com）
- 用Tailwind spacing scale（4的倍数）
3. 选有特点的字体配对
不要用Inter/Roboto。建议组合（从Google Fonts白嫖）：
- Instrument Serif + Geist Sans
- Cormorant Garamond + Inter Tight
- Bricolage Grotesque + Söhne（付费）
- Fraunces + Work Sans（注意Fraunces已经被AI用烂）
- JetBrains Mono + Geist Sans（technical feel）
4. 每个关键决策都有reasoning
不要默默选。在HTML的comment里写：
<!--
Design decisions:
- Primary color: warm terracotta (oklch 0.65 0.18 25) — fits the "editorial" direction
- Display: Instrument Serif for humanist, literary feel
- Body: Geist Sans for cleanness contrast
- No gradients — committed to minimal, no AI slop
- Spacing: 8px base, golden ratio friendly (8/13/21/34)
-->Import策略（用户给了codebase）
如果用户说"import这个codebase做参考"：
小型（<50文件）
全部Read，把context内化。
中型（50-500文件）
Focus在：
src/components/或components/- 所有styles/tokens/theme相关的文件
- 2-3个代表性的整页组件（Home.tsx、Dashboard.tsx）
大型（>500文件）
让用户指明focus：
- "我要做settings页面" → 读现有的settings相关
- "我要做一个新的feature" → 读整体shell + 最接近的参考
- 不求全，求准
和Figma/设计稿的配合
如果用户给了Figma链接：
- 不要期望你能直接"转Figma为HTML"——那需要额外工具
- Figma链接通常不公开可访问
- 让用户：导出为截图发给你 + 告诉你具体的color/spacing values
如果只给了Figma截图，告诉用户：
- 我能看到视觉，但取不到精确values
- 关键数字（hex、px）请告诉我，或者export as code（Figma支持）
最后的提醒
一个项目的设计质量上限，由你拿到的context质量决定。
花10分钟收集context，比花1小时凭空画hi-fi更有价值。
遇到没context的情况，优先问用户要，而不是硬上。