# Claude Design 小贴士：设计心法、日常妙招与操作技巧

- 来源：宝玉 (@dotey)
- 发布时间：2026-06-07 00:08
- AIHOT 分数：51
- AIHOT 链接：https://aihot.virxact.com/items/cmq2kewuw01dvslbvmp09awnl
- 原文链接：https://x.com/dotey/status/2063291945972060525

## AI 摘要

Claude Design 分享系列小贴士，涵盖产品设计心法、日常实用妙招和 Claude 交互技巧。设计心法强调：交互原型需被点击才有意义；设计系统应自然不刻意；像素应克制争夺注意力；留白如乐符停顿；颜色不超过三种；用户心理模型是唯一规范。日常妙招包括：用冰块冻结口香糖去除、湿纸巾加热清洁微波炉、核桃油修复木划痕、木勺防止沸水溢出等。Claude 操作技巧：⌘G 语音输入、⌘V 粘贴截图、挂载本地文件夹实时读取代码库、旋钮模式拖拽调整 CSS 数值、原型功能从线框图到交互应用、保存模板复用工作流。

## 正文

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。