wizz-method 1.0.2 → 1.1.0

package/src/skills-lib/huashu-design/references/content-guidelines.md

@@ -0,0 +1,260 @@
+# Content Guidelines：反AI slop、内容准则、Scale规范
+
+AI设计里最容易掉进去的陷阱。这是一份「不做什么」的清单，比「做什么」更重要——因为AI slop是默认值，你不主动避免就会发生。
+
+## AI Slop 完整黑名单
+
+### 视觉陷阱
+
+**❌ 激进渐变背景**
+- 紫色 → 粉色 → 蓝色 全屏渐变（AI生成网页的典型味道）
+- 任何方向的rainbow gradient
+- Mesh gradient铺满背景
+- ✅ 如果要用渐变：subtle、单色系、有意图地点缀（比如button hover）
+
+**❌ 圆角卡片 + 左border accent色**
+```css
+/* 这是AI味卡片的典型签名 */
+.card {
+  border-radius: 12px;
+  border-left: 4px solid #3b82f6;
+  padding: 16px;
+}
+```
+这种卡片在AI生成的Dashboard里泛滥。想做强调？用更有设计感的方式：背景色对比、字重/字号对比、plain分隔线、或者干脆不分卡片。
+
+**❌ Emoji 装饰**
+除非品牌本身使用emoji（比如Notion、Slack），否则不要在UI上放emoji。**尤其不要**：
+- 标题前的 🚀 ⚡️ ✨ 🎯 💡
+- Feature列表的 ✅
+- CTA按钮里的 →（箭头单独出现OK，emoji箭头不行）
+
+没图标用真icon库（Lucide/Heroicons/Phosphor），或者用placeholder。
+
+**❌ SVG 画 imagery**
+不要试图用SVG画：人物、场景、设备、物品、抽象艺术。AI画的SVG imagery一眼就是AI味，幼稚且廉价。**一个灰色矩形+"插画位 1200×800"的文字标签，比一个拙劣的SVG hero illustration强100倍**。
+
+唯一可以用SVG的场景：
+- 真正的icon（16×16到32×32级别）
+- 几何图形做装饰元素
+- Data viz的chart
+
+**❌ 过多iconography**
+不是每个标题/feature/section都需要icon。滥用icon会让界面像toy。Less is more。
+
+**❌ "Data slop"**
+编造的stats装饰：
+- "10,000+ happy customers" （你都不知道有没有）
+- "99.9% uptime" （没有真数据就别写）
+- 用图标+数字+词组成的装饰"metric cards"
+- Mock table里的假数据装点得花里胡哨
+
+如果没真数据，留placeholder或问用户要。
+
+**❌ "Quote slop"**
+编造的用户评价、名人名言装饰页面。留placeholder问用户要真quote。
+
+### 字体陷阱
+
+**❌ 避免这些烂大街字体**：
+- Inter（AI生成的网页默认）
+- Roboto
+- Arial / Helvetica
+- 纯system font stack
+- Fraunces（AI发现了这个就用滥了）
+- Space Grotesk（最近AI的最爱）
+
+**✅ 用有特点的display+body配对**。灵感方向：
+- 衬线display + 无衬线body（editorial feel）
+- Mono display + sans body（technical feel）
+- Heavy display + light body（contrast）
+- Variable font做hero的粗细动画
+
+字体资源：
+- Google Fonts的冷门好选项（Instrument Serif、Cormorant、Bricolage Grotesque、JetBrains Mono）
+- 开源字体站（Fraunces的兄弟字体、Adobe Fonts）
+- 不要凭空发明字体名
+
+### 色彩陷阱
+
+**❌ 凭空发明颜色**
+不要从头设计一整套不熟悉的色彩。这通常不和谐。
+
+**✅ 策略**：
+1. 有品牌色 → 用品牌色，缺的color token用oklch插值
+2. 没有品牌色但有参考 → 从参考产品截图吸色
+3. 完全从零 → 选一个known的配色系统（Radix Colors / Tailwind默认palette / Anthropic brand），不要自己调
+
+**oklch定义色彩**是最现代的做法：
+```css
+:root {
+  --primary: oklch(0.65 0.18 25);      /* 温暖的terracotta */
+  --primary-light: oklch(0.85 0.08 25); /* 同色系浅色 */
+  --primary-dark: oklch(0.45 0.20 25);  /* 同色系深色 */
+}
+```
+oklch能保证调整亮度时色相不漂移，比hsl好用。
+
+**❌ 夜间模式随手加反色**
+不是简单invert颜色。好的dark mode需要重新调整饱和度、对比度、accent色。不想做dark mode就别做。
+
+### Layout陷阱
+
+**❌ Bento grid 过度泛滥**
+每个AI生成的landing page都想搞bento。除非你的信息structure确实适合bento，否则用其他layout。
+
+**❌ 大hero + 3-column features + testimonials + CTA**
+这个landing page模板被用烂了。想创新就真创新。
+
+**❌ Card grid里每个card长一样**
+Asymmetric、不同大小的cards、有的带image有的只有文字、有的跨列——这才像真设计师做的。
+
+## 内容准则
+
+### 1. Don't add filler content
+
+每个元素都必须earn its place。空白是设计问题，用**构图**解决（对比、节奏、留白），**不是**靠内容填满。
+
+**判断filler的问题**：
+- 如果去掉这段内容，设计会变差吗？答案若是"不会"，就去掉。
+- 这个元素解决了什么真问题？如果是"让页面不那么空"，删掉。
+- 这个stats/quote/feature有真数据支持吗？没有就不要凭空写。
+
+「One thousand no's for every yes」。
+
+### 2. Ask before adding material
+
+你觉得多加一段/一页/一个section会更好？先问用户，不要单方面加。
+
+原因：
+- 用户知道他的受众比你清楚
+- 加内容有成本，用户可能不想要
+- 单方面加内容违反了"junior designer汇报工作"的关系
+
+### 3. Create a system up front
+
+探索完design context后，**先口头说出你要用的系统**，让用户确认：
+
+```markdown
+我的设计系统：
+- 色彩：#1A1A1A主体 + #F0EEE6背景 + #D97757 accent（来自你的品牌）
+- 字型：Instrument Serif做display + Geist Sans做body
+- 节奏：section title用full-bleed彩色背景 + 白字；普通section用白背景
+- 图像：hero用full-bleed照片，feature section用placeholder等你提供
+- 最多用2种背景色，避免杂乱
+
+确认这个方向我就开始做。
+```
+
+用户确认后再动手。这个check-in能避免"做完一半发现方向错"。
+
+## Scale 规范
+
+### 幻灯片（1920×1080）
+
+- 正文最小 **24px**，理想 28-36px
+- 标题 60-120px
+- Section title 80-160px
+- Hero headline 可以用 180-240px 的大字
+- 永远不要用 <24px 的字放幻灯片
+
+### 印刷文档
+
+- 正文最小 **10pt**（≈13.3px），理想 11-12pt
+- 标题 18-36pt
+- Caption 8-9pt
+
+### Web和移动端
+
+- 正文最小 **14px**（老年人友好用16px）
+- 移动端正文 **16px**（避免iOS自动缩放）
+- Hit target（可点击元素）最小 **44×44px**
+- 行高 1.5-1.7（中文1.7-1.8）
+
+### 对比度
+
+- 正文 vs 背景 **至少 4.5:1**（WCAG AA）
+- 大字 vs 背景 **至少 3:1**
+- 用Chrome DevTools的accessibility工具检查
+
+## CSS 神器
+
+**高级CSS特性**是设计师的好朋友，大胆用：
+
+### 排版
+
+```css
+/* 让标题换行更自然，不会最后一行孤单单一个词 */
+h1, h2, h3 { text-wrap: balance; }
+
+/* 正文换行，避免寡孀和孤儿 */
+p { text-wrap: pretty; }
+
+/* 中文排版神器：标点挤压、行首行尾控制 */
+p { 
+  text-spacing-trim: space-all;
+  hanging-punctuation: first;
+}
+```
+
+### Layout
+
+```css
+/* CSS Grid + named areas = 可读性爆表 */
+.layout {
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "sidebar main"
+    "footer footer";
+  grid-template-columns: 240px 1fr;
+  grid-template-rows: auto 1fr auto;
+}
+
+/* Subgrid对齐卡片内容 */
+.card { display: grid; grid-template-rows: subgrid; }
+```
+
+### 视觉效果
+
+```css
+/* 有设计感的滚动条 */
+* { scrollbar-width: thin; scrollbar-color: #666 transparent; }
+
+/* 玻璃拟态（克制使用） */
+.glass {
+  backdrop-filter: blur(20px) saturate(150%);
+  background: color-mix(in oklch, white 70%, transparent);
+}
+
+/* View transitions API让页面切换丝滑 */
+@view-transition { navigation: auto; }
+```
+
+### 交互
+
+```css
+/* :has()选择器让条件样式变容易 */
+.card:has(img) { padding-top: 0; } /* 有图片的卡片无顶padding */
+
+/* container queries让组件真的响应式 */
+@container (min-width: 500px) { ... }
+
+/* 新的color-mix函数 */
+.button:hover {
+  background: color-mix(in oklch, var(--primary) 85%, black);
+}
+```
+
+## 决策速查：当你犹豫时
+
+- 想加个渐变？→ 大概率不加
+- 想加个emoji？→ 不加
+- 想给卡片加圆角+border-left accent？→ 不加，换其他方式
+- 想用SVG画个hero插画？→ 不画，用placeholder
+- 想加一段quote装饰？→ 先问用户有没有真quote
+- 想加一排icon features？→ 先问要不要icon，可能不需要
+- 用Inter？→ 换一个更有特点的
+- 用紫色渐变？→ 换一个有根据的配色
+
+**当你觉得"加一下会更好看"的时候——那通常是AI slop的征兆**。先做最简的版本，只在用户要求时加。

package/src/skills-lib/huashu-design/references/critique-guide.md

@@ -0,0 +1,199 @@
+# 设计评审深度指南
+
+> Phase 7 的详细参考。提供评分标准、场景侧重点、常见问题清单。
+
+---
+
+## 评分标准详解
+
+### 1. 哲学一致性（Philosophy Alignment）
+
+| 分数 | 标准 |
+|------|------|
+| 9-10 | 设计完美体现了选定哲学的核心精神，每个细节都有哲学依据 |
+| 7-8 | 整体方向正确，核心特征到位，个别细节偏离 |
+| 5-6 | 能看出意图，但执行时混入了其他风格元素，不够纯粹 |
+| 3-4 | 仅在表面模仿，未理解哲学内核 |
+| 1-2 | 与选定哲学基本无关 |
+
+**评审要点**：
+- 是否使用了该设计师/机构的标志性手法？
+- 色彩、字体、布局是否符合该哲学体系？
+- 有没有「自相矛盾」的元素？（如选了Kenya Hara却塞满内容）
+
+### 2. 视觉层级（Visual Hierarchy）
+
+| 分数 | 标准 |
+|------|------|
+| 9-10 | 用户视线自然沿设计者意图流动，信息获取零摩擦 |
+| 7-8 | 主次关系清晰，偶有1-2处层级模糊 |
+| 5-6 | 能分出标题和正文，但中间层级混乱 |
+| 3-4 | 信息平铺，没有明确的视觉入口 |
+| 1-2 | 混乱，用户不知道先看哪里 |
+
+**评审要点**：
+- 标题与正文的字号对比是否足够？（至少2.5倍）
+- 颜色/粗细/大小是否建立了3-4个清晰层级？
+- 留白是否在引导视线？
+- 「眯眼测试」：眯起眼看，层级是否仍然清晰？
+
+### 3. 细节执行（Craft Quality）
+
+| 分数 | 标准 |
+|------|------|
+| 9-10 | 像素级精确，对齐、间距、颜色无任何瑕疵 |
+| 7-8 | 整体精致，有1-2处微小对齐/间距问题 |
+| 5-6 | 基本对齐，但间距不统一，颜色使用不够系统 |
+| 3-4 | 明显的对齐错误、间距混乱、颜色过多 |
+| 1-2 | 粗糙，看起来像草稿 |
+
+**评审要点**：
+- 是否使用了统一的间距系统（如8pt网格）？
+- 同类元素的间距是否一致？
+- 颜色数量是否受控？（通常不超过3-4种）
+- 字体家族是否统一？（通常不超过2种）
+- 边缘对齐是否精确？
+
+### 4. 功能性（Functionality）
+
+| 分数 | 标准 |
+|------|------|
+| 9-10 | 每个设计元素都服务于目标，零冗余 |
+| 7-8 | 功能导向明确，有少量可删减的装饰 |
+| 5-6 | 基本可用，但有明显的装饰性元素分散注意力 |
+| 3-4 | 形式大于功能，用户需要努力寻找信息 |
+| 1-2 | 完全被装饰淹没，失去了传达信息的能力 |
+
+**评审要点**：
+- 删掉任何一个元素，设计会变差吗？（如果不会，就应该删）
+- CTA/关键信息是否在最显眼的位置？
+- 是否有「因为好看所以加上去」的元素？
+- 信息密度与载体是否匹配？（PPT不宜太密，PDF可以更密）
+
+### 5. 创新性（Originality）
+
+| 分数 | 标准 |
+|------|------|
+| 9-10 | 令人耳目一新，在该哲学框架内找到了独特表达 |
+| 7-8 | 有自己的想法，不是简单的模板套用 |
+| 5-6 | 中规中矩，看起来像模板 |
+| 3-4 | 大量使用了cliché（如渐变圆球代表AI） |
+| 1-2 | 完全是模板或素材拼凑 |
+
+**评审要点**：
+- 是否避免了常见cliché？（见下方「常见问题清单」）
+- 在遵循设计哲学的同时是否有个人表达？
+- 是否有「意想不到但很合理」的设计决策？
+
+---
+
+## 场景评审侧重
+
+不同输出类型的评审重点不同：
+
+| 场景 | 最重要维度 | 次重要 | 可放宽 |
+|------|-----------|--------|--------|
+| 公众号封面/配图 | 创新性、视觉层级 | 哲学一致性 | 功能性（单图不涉及交互） |
+| 信息图 | 功能性、视觉层级 | 细节执行 | 创新性（准确优先） |
+| PPT/Keynote | 视觉层级、功能性 | 细节执行 | 创新性（清晰优先） |
+| PDF/白皮书 | 细节执行、功能性 | 视觉层级 | 创新性（专业优先） |
+| 落地页/官网 | 功能性、视觉层级 | 创新性 | —（全面要求） |
+| App UI | 功能性、细节执行 | 视觉层级 | 哲学一致性（可用性优先） |
+| 小红书配图 | 创新性、视觉层级 | 哲学一致性 | 细节执行（氛围优先） |
+
+---
+
+## 常见设计问题 Top 10
+
+### 1. AI科技cliché
+**问题**：渐变圆球、数字雨、蓝色电路板、机器人脸
+**为什么是问题**：用户已经对这些视觉疲劳，无法区分你和其他人
+**修复**：用抽象隐喻替代直白符号（如用「对话」的隐喻而非聊天气泡图标）
+
+### 2. 字号层级不足
+**问题**：标题和正文差距太小（<2.5倍）
+**为什么是问题**：用户无法快速定位关键信息
+**修复**：标题至少为正文的3倍（如正文16px → 标题48-64px）
+
+### 3. 颜色过多
+**问题**：使用5种以上颜色，没有主次
+**为什么是问题**：视觉混乱，品牌感弱
+**修复**：限制为1个主色+1个辅色+1个强调色+灰阶
+
+### 4. 间距不统一
+**问题**：元素间距随意，没有系统
+**为什么是问题**：看起来不专业，视觉节奏混乱
+**修复**：建立8pt网格系统（间距只用8/16/24/32/48/64px）
+
+### 5. 留白不足
+**问题**：所有空间都被内容填满
+**为什么是问题**：信息拥挤导致阅读疲劳，反而降低信息传达效率
+**修复**：留白至少占总面积40%（极简风格60%+）
+
+### 6. 字体过多
+**问题**：使用3种以上字体
+**为什么是问题**：视觉噪音，削弱统一感
+**修复**：最多2种字体（1种标题+1种正文），用字重和大小创造变化
+
+### 7. 对齐不一致
+**问题**：有的左对齐，有的居中，有的右对齐
+**为什么是问题**：破坏视觉秩序感
+**修复**：选定一种对齐方式（推荐左对齐），全局统一
+
+### 8. 装饰大于内容
+**问题**：背景图案/渐变/阴影抢了主要内容的风头
+**为什么是问题**：本末倒置，用户来看信息不是看装饰
+**修复**：「如果删掉这个装饰，设计会变差吗？」如果不会，就删
+
+### 9. 赛博霓虹滥用
+**问题**：深蓝底(#0D1117) + 霓虹色发光效果
+**为什么是问题**：默认审美禁区（本 skill 的品位基线），且已成为最大 cliché 之一——用户可按自己品牌 override
+**修复**：选择更有辨识度的配色方案（参考20种风格的色彩系统）
+
+### 10. 信息密度与载体不匹配
+**问题**：PPT里放了一整页文字 / 封面图里塞了10个元素
+**为什么是问题**：不同载体的最佳信息密度不同
+**修复**：
+- PPT：每页1个核心观点
+- 封面图：1个视觉焦点
+- 信息图：分层展示
+- PDF：可以更密，但需要清晰的导航
+
+---
+
+## 评审输出模板
+
+```
+## 设计评审报告
+
+**总体评分**：X.X/10 [优秀(8+)/良好(6-7.9)/需改进(4-5.9)/不合格(<4)]
+
+**分项评分**：
+- 哲学一致性：X/10 [一句话说明]
+- 视觉层级：X/10 [一句话说明]
+- 细节执行：X/10 [一句话说明]
+- 功能性：X/10 [一句话说明]
+- 创新性：X/10 [一句话说明]
+
+### 优点（Keep）
+- [具体指出做得好的地方，用设计语言描述]
+
+### 问题（Fix）
+[按严重程度排序]
+
+**1. [问题名称]** — ⚠️致命 / ⚡重要 / 💡优化
+- 当前：[描述现状]
+- 问题：[为什么这是问题]
+- 修复：[具体操作，含数值]
+
+### 快速修复清单（Quick Wins）
+如果只有5分钟，优先做这3件事：
+- [ ] [最有影响力的修复]
+- [ ] [第二重要的修复]
+- [ ] [第三重要的修复]
+```
+
+---
+
+**版本**：v1.0
+**更新日期**：2026-02-13

package/src/skills-lib/huashu-design/references/design-context.md

@@ -0,0 +1,213 @@
+# 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或让用户提供截图。
+
+```bash
+# 用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`）：
+
+```markdown
+1. 你有现成的design system/UI kit/组件库吗？在哪？
+2. 有品牌指南、色彩/字体规范吗？
+3. 可以给我现有产品的截图或URL吗？
+4. 有codebase我可以读吗？
+```
+
+### Step 2：用户说"没有"时，帮他找
+
+别直接放弃。尝试：
+
+```markdown
+让我看看有没有线索：
+- 你之前的项目有相关设计吗？
+- 公司的marketing网站用什么色彩/字型？
+- 你产品的Logo什么风格？能给我一张吗？
+- 有什么你欣赏的产品作为参考？
+```
+
+### Step 3：Read所有能找到的context
+
+如果用户给了codebase路径，你读：
+1. **先list文件结构**：找style/theme/component相关的文件
+2. **读theme/token文件**：lift具体的hex/px values
+3. **读2-3个代表性组件**：看视觉vocabulary（hover state、shadow、border、padding node pattern）
+4. **读global stylesheet**：基础重置、font loading
+5. **如果有Figma链接/截图**：看图，但**更相信代码**
+
+**重要**：**不要**看了一眼就凭印象做。读下来有30+个具体values才真的lift到了。
+
+### Step 4：Vocalize你要用的系统
+
+看完context后，告诉用户你要用的系统：
+
+```markdown
+根据你的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）
+
+**强烈警告**：这种情况下的产出质量会显著下降。明确告诉用户。
+
+```markdown
+你没有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里写：
+
+```html
+<!--
+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的情况，优先问用户要，而不是硬上**。