跳到主要内容

Claude Design 使用指南

写一份详细的需求说明是产出高质量 UI 的基础。需求描述越详尽，最终的 UI 质量就越高。本指南总结了撰写需求说明的策略、必备 Prompt 模板以及高级交互技巧。

一、 撰写需求说明的两个方向​

根据你对页面的构思成熟度，可以从以下两个方向向 Claude Design 描述需求：

  • 方向一：以功能为主导（适用于无明确 UI 构思时）

只需把功能表达清楚。详细描述这是一个什么项目，用来解决什么具体问题，以及包含哪些核心的功能模块。

  • 方向二：以结构为主导（适用于有明确 UI 构思时）

直接从页面结构和布局的角度进行描述，这样产出的设计会更贴近你的心理预期。强烈建议提供简单的产品原型图或手绘草图，Claude Design 会直接参考草图结构进行视觉化。

  • 辅助输入：你可以在配色网站上寻找喜欢的主题色让其参考，也可以直接提供优秀的参考 UI 截图。

二、 必备 Prompt 模板库​

在实际使用中，可以直接套用以下模板并替换关键信息。

1. 结构化开场 Prompt 参考​

用于在对话初始阶段，精准定义产品的定位、受众和视觉基调。

为一个面向美股, Crypto市场的 AI Native 金融认知操作系统（FinClaw）设计一套核心工作流的 Web UI。目标受众是个人投资者。语气：极致专业、冷静客观、高度结构化。视觉风格：深色模式（背景深海军黑 #0F1119），追求极高的数据信息密度（彭博终端风格，拒绝过度留白），实用优先的模块化组件库风格（参考 shadcn/ui）。使用低饱和度点缀色，绝对不使用高亮霓虹色或厚重阴影，利用清晰的细实线分割数据区块。正文和标题使用干净的现代无衬线字体（如 Inter），所有金融指标数字严格使用等宽字体（Monospace）。界面需包括：弱化了文本输入框的动态联动任务表单（涵盖事件解读、标的认知、交易前判断等条件域）、瀑布流式的认知结果看板（Cognition Feed），以及展示白盒推理链、情景推演与风险失效点的结构化洞察卡片。严禁设计成类 ChatGPT 的对话框形态。

2. 通用美学优化 Prompt (Anthropic 官方最佳实践)​

建议在你的每一轮设计任务中都附带加上这段 Prompt，以避免产出同质化、陈词滥调的 UI 界面。

避免使用通用的 AI 生成美学：过于常用的字体（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是在白色或深色背景上的紫色渐变）、可预测的布局、千篇一律的组件。做出独特的、特定于上下文的选择。选择一种决定性的字体并自信地使用它。坚持统一的美学，采用主导色彩和鲜明的强调色，而不是 timid 均匀分布的调色板。

三、 社区使用技巧​

  • 提供具体替代方案，避免纯否定表述

“不要使用奶油色背景”往往会把模型推向另一个难以预测的默认选项。更有效的做法是直接指明替代方案，例如：“使用浅银灰色调渐变为蓝灰色，角半径为 4px，搭配方形角的无衬线字体”。

  • 参考文化美学，而非具体的网站名称

给模型提供“太阳朋克”、“瑞士编辑风格”、“日本极简主义”或“2000年代早期的小册子”等文化美学词汇，比直接说“让它看起来像 Linear”能激发出更丰富的创作空间。

  • 善用“三变体”命令探索灵感

当你不确定自己想要什么样的设计时，请始终使用要求展示变体的命令。例如：“给我展示三个版本的仪表板：一个以编辑风格和字体为主导，一个信息密集且以数据为主，一个色块鲜明且富有趣味”。

  • 修改旧消息，而非发送新消息

在长时间的迭代会话中，直接返回并编辑你之前的消息（这会替换旧的会话上下文，而不是叠加它），这样可以为你节省大量的 Token，避免模型逐渐“遗忘”最初的设定。

四、 从设计到开发的无缝交付 (Handoff)​

当 UI 设计确认完成后，整个工作流可以丝滑对接开发阶段。只需要在界面的 Share 功能中，将项目 Handoff 给 Claude Code 即可。Claude Code 接收后，会自动基于你当前项目的前端技术栈（如 React/Vue/Tailwind 等）进行代码实现。