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的情况，优先问用户要，而不是硬上。

design-context.md 6.5 KB Permalink Verlauf Originalformat