Claude Design小贴士：产品设计心法、生活妙招、Claude操作技巧
Claude Design 的小贴士很有意思：
### 第一部分：产品设计心法
1. 交互的本质
- EN: A prototype nobody clicks is just a painting.
- CN: 没人点击交互的产品原型，充其量只是一幅画罢了。
2. 设计的最高境界
- EN: The best design system is the one nobody notices.
- CN: 最好的设计系统，是自然到让人察觉不到它的存在。
3. 字体搭配
- EN: You cannot unsee a bad font pairing. Choose carefully.
- CN: 糟糕的字体搭配一旦入眼，就再也忘不掉了。挑选时请务必慎重。
4. 像素级克制
- EN: Every pixel argues for attention. Most should lose.
- CN: 屏幕上的每一个像素都在疯狂争夺用户的注意力，但绝大部分像素都应该学会“让步”。
5. 发布的意义
- EN: The fastest way to finish a design is to ship it.
- CN: 完成一个设计的绝对捷径，就是把它发布上线。
6. 留白的艺术
- EN: Whitespace is not empty. It is the silence between the notes.
- CN: 留白并不代表空洞。它是乐谱上音符之间那迷人的停顿。
7. 色彩法则
- EN: If you need more than three colors, you have zero colors.
- CN: 如果你觉得需要三种以上的颜色才能把控画面，那说明你完全失去了对颜色的掌控。
8. 核心规范
- EN: The user's mental model is the only spec that matters.
- CN: 用户的心理模型 (mental model)，才是唯一真正重要的产品规范。
---
### 第二部分：日常实用小妙招 (Info)
9. 去除鞋底口香糖
- EN: Freeze gum with an ice cube for 2 minutes. It peels right off shoes.
- CN: 用冰块冷敷口香糖 2 分钟，就能把它从鞋底轻松撕下来。
10. 清洁微波炉
- EN: Microwave a damp paper towel for 30 seconds. Crud wipes right off the inside.
- CN: 把湿纸巾放进微波炉里加热 30 秒。微波炉内壁的顽固污垢立刻就能一擦就掉。
11. 拧开滑丝的螺丝
- EN: A rubber band over a stripped screw head gives enough grip to turn it.
- CN: 把一根橡皮筋垫在滑丝的螺丝头上，就能增加足够的摩擦力把它拧出来。
12. 修复木家具划痕
- EN: Run walnuts over scratched wood furniture. The oils fill the scratches.
- CN: 拿核桃仁在被划伤的木质家具上摩擦。核桃的天然油脂会完美填补那些划痕。
13. 面包保鲜秘诀
- EN: Store bread in the freezer. Toasting it from frozen tastes better than fresh.
- CN: 把面包存在冷冻室里。冷冻后再拿去烤，口感甚至比新鲜出炉的还要好。
14. 砧板除味
- EN: Rub a wooden cutting board with lemon and salt to deodorize it completely.
- CN: 用柠檬和盐摩擦木质砧板，可以彻底去除难闻的异味。
15. 防止沸水溢出
- EN: Put a wooden spoon across a boiling pot. It won't boil over.
- CN: 在沸腾的锅面上横放一把木勺，汤汁就不会溢出来了。
16. 炒出蓬松鸡蛋
- EN: Adding a splash of water instead of milk makes fluffier eggs. Milk makes them dense.
- CN: 炒鸡蛋时加一点水而不是牛奶，煎出来的鸡蛋会更蓬松。加牛奶反而会让鸡蛋变紧实。
---
### 第三部分：Claude 操作与交互技巧
17. 语音控制
- EN: Talk to Claude: tap ⌘G to start voice input, or hold Space in a comment to dictate.
- CN: 语音对话 Claude：按下 ⌘G 即可启动语音输入，或者在写评论时按住空格键直接口述。
18. 智能识图
- EN: Drop images here — they auto-attach to your next message as context.
- CN: 直接把图片拖到这里——它们会自动附加到你的下一条消息中，作为上下文（Context，即帮助 AI 理解你意图的背景信息）使用。
19. 快捷截图
- EN: ⌘V pastes screenshots straight from your clipboard into the chat view.
- CN: 按 ⌘V 可以将剪贴板里的截图直接粘贴到聊天界面中。
20. 代码库读取
- EN: Mount a local folder from the Import menu — Claude reads your codebase live, no copying.
- CN: 从“导入”(Import) 菜单挂载本地文件夹——Claude 能实时读取你的代码库 (codebase)，再也不用你手动来回复制粘贴代码了。
21. 导入专业知识
- EN: Attach skills or reference design systems from the Import menu.
- CN: 从“导入”菜单中添加特定技能，或者引入你需要参考的设计系统。
22. 精准批注
- EN: Click "Comment" in the toolbar, then click any element to annotate it.
- CN: 点击工具栏上的“评论”(Comment)，然后点击界面上的任何元素，就可以给它添加批注了。
23. 批量发送
- EN: Leave multiple comments before sending — they all batch into one message.
- CN: 你可以在发送前留下多条评论——它们会被打包合并成一条消息一起发给 Claude。
24. 原地修改文本
- EN: Text edit mode lets you click text in the preview and rewrite it in-place.
- CN: 开启文本编辑模式后，你只需在预览区域点击文字，就能原地修改它。
25. 输入框管理
- EN: Comments and text edits appear as chips in the composer. Remove any you don't want.
- CN: 你的评论和文本修改会变成输入框里的一块块小标签 (chips)。遇到不满意的，随时点叉删掉就行。
26. 实时 UI 调试
- EN: Knobs mode lets you drag-adjust CSS values live — sizes, colors, spacing. Use a prompt to control the UI.
- CN: 在“旋钮模式”(Knobs mode) 下，你可以像拧收音机旋钮一样，通过拖拽来实时调整 CSS（层叠样式表，网页外观设计的代码语言）数值，比如大小、颜色和间距。你也可以直接用提示词 (prompt) 来控制用户界面 (UI)。
27. 产品原型进化
- EN: "Prototype" starts at wireframes, moves to hi-fi, and ends as a working interactive app.
- CN: “原型”(Prototype) 功能带你走完产品设计的全流程：从简单的线框图开始，进化到高保真设计图，最终变成一个真正能点、能用的交互式应用。
28. 生成演讲稿
- EN: Turn on speaker notes when creating decks to get a full presenter script.
- CN: 让 AI 帮你制作幻灯片 (decks) 时，记得打开“演讲者备注”(speaker notes)，这样你就能直接获得一份完整的演讲稿。
29. 沉淀工作流
- EN: Ask Claude to "save this as a template" — it packages the workflow for reuse.
- CN: 告诉 Claude“把这个保存为模板”——它就会把这套工作流 (workflow) 打包，方便你下次直接复用。
30. 多格式导出
- EN: The Share menu lets you export as PPTX, PDF, or a folder to give to Claude Code.
- CN: 通过“分享”(Share) 菜单，你可以把作品导出为 PPTX、PDF，或者打包成一个文件夹交给 Claude Code（Anthropic 推出的面向开发者的命令行 AI 编程助手）。
31. 无缝对接开发
- EN: "Handoff to Claude Code" creates a dev-ready package with specs and structure. Download it, then tell Claude Code "create this design."
- CN: “移交至 Claude Code”(Handoff to Claude Code) 功能会为你生成一个包含规范和结构的“开发就绪”数据包。下载它，然后直接告诉 Claude Code：“帮我把这个设计写成代码。”
32. 切换模型大脑
- EN: Use the Gear next to the Send button to change model.
- CN: 点击发送按钮旁边的齿轮图标，即可随时切换不同的大语言模型 (LLM)。
33. 原型内嵌 API
- EN: Claude can call the Claude API from inside your prototypes. No backend needed.
- CN: Claude 甚至可以直接在你的产品原型中调用 Claude API（应用程序编程接口，相当于连接 AI 大脑的通道）。完全不需要写任何后端代码！
34. 网页语音交互
- EN: Ask Claude to use the Web Speech API for interactive voice input and output.
- CN: 试试让 Claude 调用 Web Speech API（浏览器内置的语音合成与识别接口），让你的网页直接实现可以对话的语音输入与输出。
35. 手绘草图
- EN: The napkin sketch tool lets you draw freehand — great for rough layouts.
- CN: “餐巾纸草图”(napkin sketch) 工具允许你随心所欲地手绘涂鸦——非常适合用来勾勒粗略的排版布局。
36. 捕获真实网页
- EN: Import → Web Capture lets you copy elements from real web pages and paste them to Claude.
- CN: 使用“导入”→“网页捕获”(Web Capture)，你可以直接从真实的网页上复制元素，然后原封不动地粘贴给 Claude。
### 第一部分：产品设计心法
1. 交互的本质
- EN: A prototype nobody clicks is just a painting.
- CN: 没人点击交互的产品原型，充其量只是一幅画罢了。
2. 设计的最高境界
- EN: The best design system is the one nobody notices.
- CN: 最好的设计系统，是自然到让人察觉不到它的存在。
3. 字体搭配
- EN: You cannot unsee a bad font pairing. Choose carefully.
- CN: 糟糕的字体搭配一旦入眼，就再也忘不掉了。挑选时请务必慎重。
4. 像素级克制
- EN: Every pixel argues for attention. Most should lose.
- CN: 屏幕上的每一个像素都在疯狂争夺用户的注意力，但绝大部分像素都应该学会“让步”。
5. 发布的意义
- EN: The fastest way to finish a design is to ship it.
- CN: 完成一个设计的绝对捷径，就是把它发布上线。
6. 留白的艺术
- EN: Whitespace is not empty. It is the silence between the notes.
- CN: 留白并不代表空洞。它是乐谱上音符之间那迷人的停顿。
7. 色彩法则
- EN: If you need more than three colors, you have zero colors.
- CN: 如果你觉得需要三种以上的颜色才能把控画面，那说明你完全失去了对颜色的掌控。
8. 核心规范
- EN: The user's mental model is the only spec that matters.
- CN: 用户的心理模型 (mental model)，才是唯一真正重要的产品规范。
---
### 第二部分：日常实用小妙招 (Info)
9. 去除鞋底口香糖
- EN: Freeze gum with an ice cube for 2 minutes. It peels right off shoes.
- CN: 用冰块冷敷口香糖 2 分钟，就能把它从鞋底轻松撕下来。
10. 清洁微波炉
- EN: Microwave a damp paper towel for 30 seconds. Crud wipes right off the inside.
- CN: 把湿纸巾放进微波炉里加热 30 秒。微波炉内壁的顽固污垢立刻就能一擦就掉。
11. 拧开滑丝的螺丝
- EN: A rubber band over a stripped screw head gives enough grip to turn it.
- CN: 把一根橡皮筋垫在滑丝的螺丝头上，就能增加足够的摩擦力把它拧出来。
12. 修复木家具划痕
- EN: Run walnuts over scratched wood furniture. The oils fill the scratches.
- CN: 拿核桃仁在被划伤的木质家具上摩擦。核桃的天然油脂会完美填补那些划痕。
13. 面包保鲜秘诀
- EN: Store bread in the freezer. Toasting it from frozen tastes better than fresh.
- CN: 把面包存在冷冻室里。冷冻后再拿去烤，口感甚至比新鲜出炉的还要好。
14. 砧板除味
- EN: Rub a wooden cutting board with lemon and salt to deodorize it completely.
- CN: 用柠檬和盐摩擦木质砧板，可以彻底去除难闻的异味。
15. 防止沸水溢出
- EN: Put a wooden spoon across a boiling pot. It won't boil over.
- CN: 在沸腾的锅面上横放一把木勺，汤汁就不会溢出来了。
16. 炒出蓬松鸡蛋
- EN: Adding a splash of water instead of milk makes fluffier eggs. Milk makes them dense.
- CN: 炒鸡蛋时加一点水而不是牛奶，煎出来的鸡蛋会更蓬松。加牛奶反而会让鸡蛋变紧实。
---
### 第三部分：Claude 操作与交互技巧
17. 语音控制
- EN: Talk to Claude: tap ⌘G to start voice input, or hold Space in a comment to dictate.
- CN: 语音对话 Claude：按下 ⌘G 即可启动语音输入，或者在写评论时按住空格键直接口述。
18. 智能识图
- EN: Drop images here — they auto-attach to your next message as context.
- CN: 直接把图片拖到这里——它们会自动附加到你的下一条消息中，作为上下文（Context，即帮助 AI 理解你意图的背景信息）使用。
19. 快捷截图
- EN: ⌘V pastes screenshots straight from your clipboard into the chat view.
- CN: 按 ⌘V 可以将剪贴板里的截图直接粘贴到聊天界面中。
20. 代码库读取
- EN: Mount a local folder from the Import menu — Claude reads your codebase live, no copying.
- CN: 从“导入”(Import) 菜单挂载本地文件夹——Claude 能实时读取你的代码库 (codebase)，再也不用你手动来回复制粘贴代码了。
21. 导入专业知识
- EN: Attach skills or reference design systems from the Import menu.
- CN: 从“导入”菜单中添加特定技能，或者引入你需要参考的设计系统。
22. 精准批注
- EN: Click "Comment" in the toolbar, then click any element to annotate it.
- CN: 点击工具栏上的“评论”(Comment)，然后点击界面上的任何元素，就可以给它添加批注了。
23. 批量发送
- EN: Leave multiple comments before sending — they all batch into one message.
- CN: 你可以在发送前留下多条评论——它们会被打包合并成一条消息一起发给 Claude。
24. 原地修改文本
- EN: Text edit mode lets you click text in the preview and rewrite it in-place.
- CN: 开启文本编辑模式后，你只需在预览区域点击文字，就能原地修改它。
25. 输入框管理
- EN: Comments and text edits appear as chips in the composer. Remove any you don't want.
- CN: 你的评论和文本修改会变成输入框里的一块块小标签 (chips)。遇到不满意的，随时点叉删掉就行。
26. 实时 UI 调试
- EN: Knobs mode lets you drag-adjust CSS values live — sizes, colors, spacing. Use a prompt to control the UI.
- CN: 在“旋钮模式”(Knobs mode) 下，你可以像拧收音机旋钮一样，通过拖拽来实时调整 CSS（层叠样式表，网页外观设计的代码语言）数值，比如大小、颜色和间距。你也可以直接用提示词 (prompt) 来控制用户界面 (UI)。
27. 产品原型进化
- EN: "Prototype" starts at wireframes, moves to hi-fi, and ends as a working interactive app.
- CN: “原型”(Prototype) 功能带你走完产品设计的全流程：从简单的线框图开始，进化到高保真设计图，最终变成一个真正能点、能用的交互式应用。
28. 生成演讲稿
- EN: Turn on speaker notes when creating decks to get a full presenter script.
- CN: 让 AI 帮你制作幻灯片 (decks) 时，记得打开“演讲者备注”(speaker notes)，这样你就能直接获得一份完整的演讲稿。
29. 沉淀工作流
- EN: Ask Claude to "save this as a template" — it packages the workflow for reuse.
- CN: 告诉 Claude“把这个保存为模板”——它就会把这套工作流 (workflow) 打包，方便你下次直接复用。
30. 多格式导出
- EN: The Share menu lets you export as PPTX, PDF, or a folder to give to Claude Code.
- CN: 通过“分享”(Share) 菜单，你可以把作品导出为 PPTX、PDF，或者打包成一个文件夹交给 Claude Code（Anthropic 推出的面向开发者的命令行 AI 编程助手）。
31. 无缝对接开发
- EN: "Handoff to Claude Code" creates a dev-ready package with specs and structure. Download it, then tell Claude Code "create this design."
- CN: “移交至 Claude Code”(Handoff to Claude Code) 功能会为你生成一个包含规范和结构的“开发就绪”数据包。下载它，然后直接告诉 Claude Code：“帮我把这个设计写成代码。”
32. 切换模型大脑
- EN: Use the Gear next to the Send button to change model.
- CN: 点击发送按钮旁边的齿轮图标，即可随时切换不同的大语言模型 (LLM)。
33. 原型内嵌 API
- EN: Claude can call the Claude API from inside your prototypes. No backend needed.
- CN: Claude 甚至可以直接在你的产品原型中调用 Claude API（应用程序编程接口，相当于连接 AI 大脑的通道）。完全不需要写任何后端代码！
34. 网页语音交互
- EN: Ask Claude to use the Web Speech API for interactive voice input and output.
- CN: 试试让 Claude 调用 Web Speech API（浏览器内置的语音合成与识别接口），让你的网页直接实现可以对话的语音输入与输出。
35. 手绘草图
- EN: The napkin sketch tool lets you draw freehand — great for rough layouts.
- CN: “餐巾纸草图”(napkin sketch) 工具允许你随心所欲地手绘涂鸦——非常适合用来勾勒粗略的排版布局。
36. 捕获真实网页
- EN: Import → Web Capture lets you copy elements from real web pages and paste them to Claude.
- CN: 使用“导入”→“网页捕获”(Web Capture)，你可以直接从真实的网页上复制元素，然后原封不动地粘贴给 Claude。