#5. 设计界面

点击「Create」后进入项目工作区，整体分为左右两栏。

左栏：上下文输入区

顶部左侧是项目入口图标和项目名，右侧是两个操作按钮：

• 历史记录（时钟图标）：查看和切换该项目的历史版本。
• 新建（加号图标）:新建一个项目。
• 项目入口（左上角调色板图标）:返回 Claude Design 首页。

中间有四个上下文附加按钮，用于在设计前给 Claude 提供参考资料：

• Design System（设计系统）：接入已绑定的设计系统，让产物自动套用品牌色、字体、组件
• Add screenshot（添加截图）：粘贴或上传截图作为视觉参考
• Attach codebase（附加代码库）：接入代码库，让 Claude 复用真实组件和样式
• Drag in a Figma file（拖入 Figma 文件）：以 Figma 文件为参考来源

底部为提示词输入框，上方是上下文标签区，会显示项目当前所有已附加的资源。包括建项目时设定的参数、绘制的草图、上传的截图等。点击「×」可移除，发送时所有标签会随提示词一起传给 Claude。输入框下方有五个按钮：

• 设置（齿轮图标）：切换 Claude 模型，可选 Opus、Sonnet、Haiku 等不同模型。
• 附件（回形针图标）：上传本地文件作为参考资料，如截图、文档、设计稿等。
• 语音（波形图标）：用语音输入提示词，自动转写为文字。
• Import（导入）：从外部来源导入内容，如 Figma 文件、网页 URL、代码仓库等。
• Send（发送）：点击将提示词连同已附加的上下文发送给 Claude。

右栏：设计画布

顶部从左到右依次为：

• 返回（向上箭头图标）：返回上一级。
• 刷新（圆形箭头图标）：刷新当前画布。
• 文件标签（Design Files）：标识当前画布显示的文件类型。
• Share（分享）：分享项目链接给协作者，可选只读、评论、编辑权限。
• 用户头像：账号入口，点击查看个人信息和登出。

画布上方还有两个快捷入口：

• New sketch（新建草图）：在画布上手绘一张草图，作为上下文附加给 Claude。
• Paste（粘贴）：粘贴剪贴板里的截图或链接到画布。

#使用与精修

本节先介绍基础生成流程，再讲解生成后的精修阶段——画布顶部的四个精修工具，以及右上角的演示与分享入口。

生成设计

在左下角输入框描述需求，点击「Send（发送）」即可生成设计。

设计生成过程中，会实时展示 Claude 的工作流。包括思考、构建和迭代的每一步。

生成效果展示。

画布顶部按钮

Claude 完成设计后，画布右侧会渲染出生成的设计成品，顶部同时出现一组精修工具按钮，从左到右依次为：

Tweaks（参数微调）

Tweaks 可以让 Claude 为当前设计创建一个专属的调节面板，里面包含为这个设计量身定制的控件——可以是滑块、开关、调色板、复选框等。在 Tweaks 输入框里描述想调什么参数（如「加深浅模式开关、强调色调色板、圆角滑块」），Claude 会把对应控件组装成面板嵌入设计。面板搭好后，拖动滑块、切换开关都能实时改变设计效果。Tweaks 按钮旁的开关用于显示或隐藏整个面板。

建议首次描述需求时一次性列出所有想调的参数——面板生成后无法直接追加新控件，需要再调节其他维度时只能通过对话让 Claude 重新生成。

Comment（评论）

Comment 用于在画布上对具体元素留下评论或修改建议。开启 Comment 模式后可以分两种方式使用：

画布上：针对元素留评论

点击画布上任意位置或元素，会弹出一个评论输入框，下方有两个按钮决定评论的去向：

• Comment（评论）：把评论作为留言保存到右侧评论面板，不发给 Claude，适合给团队成员留反馈或自己留备注。
• Send to Claude（发送给 Claude）：直接把评论作为修改请求发送给 Claude，由它针对该元素执行修改。

右侧面板：管理和批量发送

所有已创建的评论汇总显示在右侧面板，每条评论显示作者、时间，并附带一个勾选框用于多选。底部工具栏支持批量操作：

• selected（已选中）：显示当前已勾选的评论数量。
• Add note（添加备注）：为本次批量发送追加一句补充说明，比如「以上几处统一处理，保持视觉一致」。
• Send to Claude（发送给 Claude）：把所有勾选的评论一次性发给 Claude，由它在一轮对话里集中处理多条修改。

已有评论上：编辑或删除

点击画布上已存在的评论，会展开评论详情，右上角的「⋯」更多操作图标可展开操作菜单：

• Edit（编辑）：修改评论内容。
• Delete（删除）：删除该评论。

详情卡片底部仍提供 Send to Claude（发送给 Claude）按钮，可以随时把评论作为修改请求发给 Claude。

输入框

面板最下方的输入框用于直接在面板里写一条新评论。与画布上点击元素留评论不同，这里写的评论不绑定到具体元素，适合留全局性的反馈或备注，左侧回形针图标可附加图片或文档，写好后点击 Send 提交到评论列表。

Edit（直接编辑）

Edit 是最直接的精修方式：在右侧自动展开属性面板，无需对话即可修改设计的视觉细节。未选中任何元素时，面板显示页面级属性，如背景色、字体、基础字号等；选中具体元素后，面板切换为该元素的详细属性，覆盖排版、尺寸、间距、边框、圆角等多个维度。所有调整均为本地修改，不触发模型调用，是处理错字校对、像素级调整、样式微调的最快路径。

Draw（画图标注）

Draw 允许直接在画布上手绘标注，把不好用文字描述的修改意图画出来。底部工具栏从左到右依次为：关闭按钮（×） 退出 Draw 模式；撤销按钮（↻） 撤销上一笔涂鸦；Draw 用于绘制涂鸦；Click 用于临时启用产物的真实交互，方便跳转到其他页面后再切回 Draw 继续标注；中间的「Type anywhere to add a note」表示直接敲键盘即可添加文字说明，无需聚焦输入框；旁边的语音图标支持语音输入。标注完成后点击 Send 立即发送，或点击 Queue 把当前标注暂存，继续画下一处，最后一起发送给 Claude。

如何选择合适的工具

四种精修工具各有最适合的场景，按修改类型对照选择：

Present（演示模式）

画布右上角的「Present」按钮提供三种演示方式：

• In this tab（在当前标签页）：在当前标签页内全屏展示
• Fullscreen（全屏）：进入浏览器全屏模式
• New tab（新标签页）：在新标签页打开

Share（分享）

位于画布右上角，集中提供权限管理、项目复制、文件导出和工程交接四类操作。点击展开后从上到下依次为：

Access（访问权限）

下拉选择当前设计的可见范围，并通过 Copy link（复制链接）按钮分享给他人。默认状态显示「Only you can see this design.（仅你可见）」，可切换为团队可查看、可评论、可编辑等权限级别——授予编辑权限后，同事可直接修改设计并与 Claude 在群组对话中协同。

项目复制

• Duplicate project（复制项目）：基于当前项目创建一份独立副本，便于做变体或分支尝试，不影响原项目。
• Duplicate as template（复制为模板）：把当前项目转为模板，之后会出现在「From template」面板的模板列表里供反复复用。

文件导出

• Download project as .zip（下载为 .zip）：打包下载完整项目源文件。
• Export as PDF（导出为 PDF）：导出为 PDF 文档。
• Export as PPTX（导出为 PPTX）：导出为 PowerPoint 演示文稿。
• Send to Canva（发送至 Canva）：把设计推送到 Canva，便于在 Canva 中继续编辑和协作。
• Export as standalone HTML（导出为独立 HTML）：导出为单文件 HTML，可直接打开、托管或嵌入其他页面。

工程交接

• Handoff to Claude Code（交接至 Claude Code）：把设计连同设计意图打包成一份交接 Bundle 交给 Claude Code，工程师可在此基础上继续实现真实代码。

推荐工作流

将上述工具按"成本从低到高、影响从局部到全局"组织起来，可构建一套高效的精修节奏：

1. 首轮 Prompt 写足上下文：依据"提示词技巧"中的四要素（受众、关键信息、组织背景、规模结构）一次性完整描述需求，使首版尽可能贴近预期，从源头减少返工成本。
2. 优先使用 Tweaks 处理可调参数：对圆角、间距、配色、字号等需要反复试值的维度，先通过一次描述生成调节面板，后续调节均为本地实时更新，不再消耗 Token。
3. 按修改范围区分 Chat 与 Comment：结构性变更、风格转向、新增板块等宏观调整通过 Chat 表达；具体元素级修改（按钮、间距、组件）则使用 Comment 点击对应元素留言，并可勾选多条批量提交，由 Claude 在单轮对话中集中处理。
4. 文案与样式细节直接使用 Edit：错字校对、字号、颜色等视觉调整在属性面板内即时生效，无需触发模型重新生成。
5. 难以描述的修改切换至 Draw：在画布上手绘涂鸦、添加箭头与文字说明，配合 Click 模式在多页面间跳转标注，适用于"画一笔比写一段更清晰"的场景。
6. 交付前通过 Present 验收，经 Share 分享或交接：使用演示模式确认整体效果后，通过 Share 复制链接发送团队评审，或交接至 Claude Code 进入工程实施阶段。

核心原则：能直接修改的不进入对话，能拖动滑块的不再发起请求，将对话资源保留给真正需要解释与创造的环节。

#草图模式

草图模式提供轻量绘图区，用于补充文字难以描述的视觉意图。点击画布中央的「Start with a sketch」或右上角的「New sketch」进入手绘工作区，完成后点击「Save」，草图将以 .napkin 文件附加至上下文标签区，随下次的提示词一并发送给 Claude。

画布顶部居中是工具栏，从左到右依次为：

• 选择（指针图标）：选中已绘制的元素，进行移动、缩放或删除。
• 拖动（手掌图标）：拖动整个画布视图，方便在大画布上平移。
• 画笔（铅笔图标）：手绘线条，是草图模式的核心工具。
• 文字（T 图标）：在画布上添加文字标注。
• 形状（圆圈图标）：插入基础几何形状，如矩形、圆形等。
• 箭头（箭头图标）：绘制箭头，常用于指示流程或元素关系。
• 便签（卡片图标）：贴一张便签作为说明或注释。
• Save（保存）：保存当前草图，将其作为 .napkin 文件附加到左侧上下文标签区。

工具切换

编辑与视图操作

示例场景

示例一：登录页布局

草图：左右两个并排的矩形——左边写「图片」，
      右边画三条横线代表表单字段，下面一个
      矩形写「登录」。
提示词：按这个草图做一个登录页，左侧放品牌插画，右侧是邮箱、密码、登录按钮。

示例二：移动端卡片列表

草图：一个竖长矩形代表手机，里面叠三个小矩形当列表卡片
      每个卡片里画一个圆（头像）
      和两条横线（标题和副标题）。
提示词：按这个结构做一个用户消息列表页，每条包含头像、姓名、最新消息、时间。

示例三：页面分区

草图：一个大矩形代表页面，里面用横线切成三块，
      从上到下分别写「Hero」「特性」「价格」。
提示词：按这个分区做一个 SaaS 产品落地页，三个区块分别突出标题语、四个核心特性、和三档价格。

草图绘制要点：

• 基础元素够用：矩形表示区块、圆形表示头像或图标、横线表示文字内容、箭头表示流程或指向，四类元素足以覆盖绝大多数布局表达。
• 善用文字标注：图形不需要画得像，在矩形内直接标注「图片」「按钮」「列表」等关键词，Claude 对文字的识别比对图形更准确。
• 不必追求工整：Claude 解析的是结构关系——元素位置、相对大小、层级顺序——而非线条的精确度，手抖或歪斜不影响结果。
• 草图与提示词分工：草图负责传达"布局与位置"，提示词负责传达"内容与意图"，两者互补可显著提升首轮产出质量。

#文件管理

上传图片、生成设计等操作产生文件后，点击「Design Files（设计文件）」可以切换为文件管理面板，集中展示项目内所有已添加的资源。整个面板分为三个区域：

中间：文件列表

按文件夹分组展示项目内的所有资源，常见的两个内置文件夹为：

• scraps（碎片）：存放手绘的草图，文件以 .napkin 格式保存。
• uploads（上传）：存放通过「附件」「Add screenshot」「Drag in a Figma file」等方式上传的图片、文档和参考资料。

每条记录显示文件名、类型和最近修改时间。点击文件名可在右侧预览，点击文件夹左侧的 ︿ 图标可折叠或展开。

右侧：预览与操作

选中文件或文件夹后，右侧显示该资源的缩略图、名称、类型，并提供两个操作按钮：

• Open（打开）：打开文件查看完整内容。
• Download / Delete（下载 / 删除）：通过悬浮菜单提供下载和删除操作。

顶部：快捷入口

• project（项目根目录）：文件路径标识，点击可返回根目录。
• 返回：返回上一级。
• 刷新：重新加载文件列表。
• New sketch（新建草图）：新建一张草图，自动归入 scraps 文件夹。
• Paste（粘贴）：将剪贴板内容粘贴为新文件。

#Examples（示例）

如果不确定 Claude Design 能做什么，点击首页顶部的「Examples（示例）」标签可进入官方提供的灵感库。该库收录了部分典型场景的成品示例，覆盖文字流式动画、粒子特效等多种类型，可作为能力边界的参考。

每个示例包含三部分：

• 成品预览：左侧区域展示已渲染完成的实际效果，可直接观察视觉表现与交互细节。
• 提示词原文：右侧以斜体引文形式呈现该示例对应的完整提示词，可作为提示词写法的参考。
• 「Use this prompt（使用这条提示词）」按钮：点击后将以该提示词为起点创建新项目，便于在此基础上修改和延伸。

适合两种使用场景：探索 Claude Design 的能力上限时浏览灵感库；尚未形成清晰需求时直接复用现成提示词作为起点。

#Design System（设计系统）

设计系统是 Claude Design 中绑定品牌资产的核心机制。这套设置只需完成一次，配置完成后该组织内所有成员的项目都可以使用此设计系统（Team 和 Enterprise 计划）。设置完成后，Claude 在生成任何产物时都会自动套用其中的色彩、字体、组件和布局规范，避免每次都从零描述品牌细节。

创建 Design System（设计系统）

第一步：进入创建页面

在 Claude Design 首页顶部点击「Design systems（设计系统）」标签，进入设计系统管理页面。点击右侧的「Create（创建）」按钮即可启动引导流程，开始新设计系统的配置。页面下方还有一个「Templates（模板）」区域，用于集中存放和管理已保存的设计模板，便于后续在创建项目时快速复用。

第二步：填写公司或产品介绍

Company name and blurb（公司名称与简介） 输入框用于提供品牌的基础语境信息，让 Claude 理解该设计系统服务的业务类型、目标用户和使用场景。

第三步：提供设计系统和产品的示例（可选）

该区域支持四类素材的接入，每种素材都为 Claude 提供不同维度的品牌信息。素材提供得越丰富、越多元，Claude 提取出的设计系统就越完整、越贴近真实品牌特征。四种类型如下：

• Link code on GitHub（关联 GitHub 代码仓库）：在输入框填入仓库链接。适合设计系统已存在于代码中的团队，Claude 会读取真实的颜色变量、字体定义和组件结构。
• Link code from your computer（上传本地代码文件夹）：将本地代码文件夹拖入指定区域。该操作不会上传整个代码库，Claude 仅复制选中的文件。
• Upload a .fig file（上传 Figma 文件）：将 .fig 格式的 Figma 文件拖入指定区域。文件在浏览器本地完成解析。
• Add fonts, logos and assets（添加字体、Logo 和其他资产）：上传字体文件、Logo、调色板、排版样本等独立素材。

第四步：补充其他备注（可选）

页面底部的 Any other notes?（其他备注）输入框用于补充无法通过资产直接传达的品牌信息，例如品牌语气、文化偏好、设计禁忌等。

第五步：发布与使用系统

填写完成后点击页面右上角的「Continue to generation（继续生成）」按钮，Claude 将开始分析所有已上传的资产并生成设计系统。生成完成后，该设计系统会出现在新建项目面板的「Design system」下拉列表中供选择使用。

第六步：修改已有的设计系统

创建完成的设计系统会列在「Design systems（设计系统）」页面中。点击设计系统旁的「Open（打开）」按钮进入，再点击右上角的「Remix（混编）」按钮，左侧将展开聊天界面，可与 Claude 对话修改设计系统的各项配置。

#提示词写法

官方四要素框架（GLCA）

Anthropic 官方明确指出，一段好的提示词应包含四个要素：

• Goal（目标）：要构建什么类型的产物，达成什么目的。
• Layout（布局）：页面的整体结构和元素如何排布。
• Content（内容）：每个区块需要展示哪些信息。
• Audience（受众）：谁会使用这份设计，他们关心什么。

四要素覆盖了设计任务最核心的信息维度。Goal 决定了产物形态，Layout 决定了视觉骨架，Content 决定了信息密度和重点，Audience 决定了语气、复杂度和细节取向。任何一项缺失都会让 Claude 退回到通用模板。如果信息不足，Claude 会主动追问，但与其等它追问，不如首轮一次性写满。

示例一：移动端新用户引导流程

[Goal 目标] 设计一个移动端 App 新用户引导流程，
帮助首次下载的用户在 3 分钟内完成核心功能认识。

[Layout 布局] 共 4 个全屏屏幕横向滑动切换，每屏
顶部固定进度指示器（4 个圆点），右上角固定"跳过"
入口，底部固定"下一步"按钮。

[Content 内容]
- 屏 1：欢迎页，主标语 + 一句话产品介绍 + 插画
- 屏 2：核心功能 A 介绍，截图占位 + 三行说明
- 屏 3：核心功能 B 介绍，截图占位 + 三行说明
- 屏 4：邀请开通通知权限 + "开始使用"按钮

[Audience 受众] 首次下载产品的免费试用用户，
对产品零认知，注意力短，需要在 3 分钟内被吸引住。

示例二：API 产品落地页

[Goal 目标] 为新发布的 API 产品做一个产品落地页，
让开发者快速理解产品价值并跳转到注册页。

[Layout 布局] 单页纵向滚动结构，从上到下六个板块：
Hero 主视觉区 → 产品特性卡片区 → 代码示例区 →
价格区 → 客户 Logo 墙 → 底部 CTA。

[Content 内容]
- Hero 区：主标语、副标语、CTA「免费试用」
- 特性区：4 张卡片，每张含图标 + 标题 + 一句话
- 代码示例区：左侧场景说明，右侧可切换的代码片段
- 价格区：三档套餐对比表
- Logo 墙：6 个已接入客户的 Logo
- 底部 CTA：再次召唤注册

[Audience 受众] 技术决策者和开发者，对营销话术
免疫，关注技术细节和真实数据，需要看到代码才会
建立信任。

示例三：运营审核工具

[Goal 目标] 做一个面向运营团队的内部工具，用于高效
审核和批准用户提交的内容，目标是把单条审核耗时从
2 分钟压缩到 30 秒以内。

[Layout 布局] 三栏结构：顶部为筛选栏（占整宽，
约 60px 高），中间为待审核列表（占 40% 宽度），
右侧为详情面板（占 60% 宽度，常驻显示选中项）。

[Content 内容]
- 筛选栏：状态、提交时间、风险等级三个筛选器
- 列表：每条含预览缩略图、提交人、时间、风险标签、
  操作按钮（通过 / 驳回 / 转派）
- 详情面板：完整内容预览、提交人资料、历史记录、
  备注输入框

[Audience 受众] 运营团队成员，每天处理 200+ 条
提交，对效率高度敏感，键盘快捷键比鼠标点击更快。

从简到繁，逐步叠加复杂度

官方建议先搭好核心布局和内容，再逐步叠加交互、边界情况和细节。Claude 对增量请求响应良好。

但要注意，"逐步叠加"不等于"首轮含糊其辞"。社区实测发现 Claude Design 的输出质量在第 1-3 轮迭代后开始衰减，第 5 轮以后边际效益急剧下降。因此正确的节奏是：

• 第 1 轮：用 GLCA 四要素一次性把整体框架描述清楚，产出完整初稿。
• 第 2-3 轮：逐项叠加细节，如交互动效、边界状态、空状态、错误处理等。
• 第 4 轮以后：遇到难以推进的问题，优先考虑用 Tweaks、Comment、Edit、Draw 等工具精修，而非继续对话迭代。

反馈具体化

官方指出反馈方式直接决定迭代效率。"这看起来不对"很难执行，"把表单字段之间的间距压缩到 8px"才能让 Claude 准确执行。

反馈具体化的几个维度：

• 数值化：把"小一点"改成"缩小到 14px"，"紧凑一点"改成"间距改为 8px"，"深一点"改成"加深到 #1F2937"。
• 定位化：用元素名、位置词、组件类型描述目标，如"右上角的关闭按钮"、"价格卡片中间档"、"页脚的 CTA 链接"。
• 对比化：说清"现在是什么、应该改成什么"，如"现在是三列网格，改成两列网格，卡片宽度加大"。

不推荐的反馈写法：

× 这里不好看
× 颜色不对
× 间距怪怪的
× 排版有问题
× 不够现代

推荐的反馈写法：

✓ Hero 区的主标题字号缩小 20%，字重从 700 改为 600
✓ 把强调色从 #FF4A1C 改成 #2563EB，只用在 CTA 按钮上
✓ 表单字段之间的垂直间距从 16px 改为 8px
✓ 三列网格改成两列，每张卡片加大到原来的 1.4 倍
✓ 用 IBM Plex Sans 替代当前的无衬线字体，标题加大字距

引用设计系统中的具体组件

官方建议：如果知道品牌设计系统中存在某个组件，按名字引用——比如"使用 Primary Button 组件"或"应用 Card 布局模式"。

这样做的好处是输出会复用真实代码资产，而非生成"看起来像但实际是新做的"组件。在后续交接到 Claude Code 时，工程师可以直接对应到现有代码，无需重新实现。

示例：

使用 PricingCard 组件呈现三档套餐，Pro 档使用 Featured 变体。
导航栏沿用 GlobalHeader 的现有结构，搜索入口使用
SearchTrigger 组件。所有图标统一从 IconLibrary 中选择。

提前声明响应式需求

官方建议：提前说明设计是否需要适配移动端、平板、桌面端，还是只针对其中一种。

响应式约束放在首轮提示词里，比生成后再要求适配的返工成本更低。常见的声明方式：

设计需要同时适配桌面端（1280px）、平板（768px）、
移动端（375px）三个断点。重点优化移动端体验，
因为 70% 的用户从手机访问。

只针对桌面端，最小宽度 1024px。这是一个面向内部团队
的运营后台，不需要考虑移动端适配。

要求多方案对比

对方向不确定时，让 Claude 一次性给出 2-3 个备选方案。比较备选远比靠猜更快，而且 Claude Design 单次生成多方案的速度足以支撑这种工作流。

示例：

在同一画布上并排展示三种不同的 Hero 区方向：
1. 文字主导：左侧大标题加副标语，右侧留白
2. 视觉主导：全屏背景图，文字反白叠加在视觉上
3. 数据主导：标题下方直接展示三个核心业务指标

每个方向保留 CTA 按钮和导航栏结构，只改变 Hero 区的
呈现方式。三个方案使用同一套色彩和字体规范。

把 Claude 当设计评审

许多用户忽略的一项官方建议：Claude 可以评审设计的可访问性、对比度、信息层级和整体可用性，把它当作设计合作者，不只是生成器。

适合的评审请求：

评审当前设计的以下几个方面：
1. 主要按钮的对比度是否满足 WCAG AA 标准
2. 信息层级是否清晰，最重要的信息是否最先被看到
3. 移动端布局是否存在拥挤或触控区域过小的问题
4. 有没有显著的可访问性问题（如对比度不足、缺少焦点态等）
请逐项给出诊断和具体改进建议。

保存当前版本再试新方向

官方提供了一个隐藏指令：如果想探索完全不同的方向但不想丢失当前进度，可以告诉 Claude：（保存当前版本，尝试完全不同的方向）。Claude 会保存当前项目并确认保存位置，后续可以在对话中引用早期版本。

中文使用示例：

保留当前这一版，我想试一个完全不同的方向——
改成深色主题，字体用衬线，整体走编辑设计风格。

#示例场景

示例一：移动端电商商品详情页

设计一个移动端电商 App 的商品详情页，让用户在 30 秒内
决定是否加入购物车。

单页纵向滚动结构，顶部固定返回和分享按钮，底部固定
加入购物车和立即购买栏，中间从上到下依次为商品图轮播、
标题区、价格区、规格选择、详情区、推荐商品。

- 商品图轮播：5 张图,支持左右滑动和放大查看
- 标题区：商品名、副标题、收藏按钮
- 价格区：现价、原价、优惠标签、库存提示
- 规格选择：颜色、尺寸两组单选
- 详情区：富文本描述 + 图文混排
- 推荐商品：横向滑动卡片,4 个相关商品

面向 25-35 岁的女性用户,浏览过竞品 App,对加载速度
和图片质量敏感,70% 在通勤时段使用。

示例二：B 端 SaaS 数据仪表盘

为客户管理 SaaS 设计一个数据仪表盘首页,让客户成功
经理在 5 秒内掌握账户健康度全貌。

桌面端布局,顶部为筛选栏,下方为四列网格:左侧两列为
核心指标卡片(2×2 排布),右侧两列为图表区(上方折线图、
下方柱状图),底部为待处理告警列表。

- 筛选栏:时间范围、客户分组、负责人三个筛选器
- 核心指标:活跃账户数、本月新增、流失风险数、NPS 分
- 折线图:近 30 天活跃趋势,支持指标切换
- 柱状图:按行业分组的客户分布
- 告警列表:Top 5 高风险账户,带状态标签和操作入口

面向客户成功经理,日常管理 30-50 个账户,需要每天
上午快速识别需要重点跟进的客户。

示例三：产品发布演示文稿

做一份 6 页的产品发布演示文稿,用于向公司全员发布
新版本 V3。

幻灯片结构:
1. 封面页(产品名、版本号、发布日期、主讲人)
2. 为什么做 V3(用户反馈数据、市场变化)
3. 三个核心新功能(智能搜索、协作模式、数据看板,
   每个配一张截图占位和一句话亮点)
4. 性能提升数据(加载速度、稳定性、资源占用对比)
5. 发布节奏与各团队行动项
6. 结尾页(Q&A 提示 + 联系方式)

沿用公司品牌色和字体,深色背景配亮色文字,每页保留
充足留白。正文极简,详细解读放演讲者备注,开启
Use speaker notes。

面向公司内部全体员工,包含技术、产品、市场、销售
等不同背景,需要在 15 分钟内传达核心信息。

示例四：独立开发者作品集网站

设计一个独立开发者的作品集首页,单页落地页结构,
向潜在客户和招聘方传达专业实力和个人风格。

从上到下七个板块:
1. 顶部导航:左侧 Logo,右侧四个锚点(关于、作品、
   博客、联系)
2. Hero 区:大标题"我做能解决问题的产品"+ 一句话
   自我介绍 + 两个 CTA(查看作品、联系我)
3. 关于区:三段式自我介绍 + 三个数据指标
4. 作品展示区:3×2 网格,6 个项目卡片
5. 客户评价区:横向滑动的三条评价卡片
6. 联系区:左侧文案 + 右侧联系表单
7. 页脚:社交媒体图标、版权信息

深色背景配亮色字体,大标题用 Fraunces 衬线增强质感,
正文用 IBM Plex Sans。强调色用明亮的橘色,只出现
在 CTA 和重点元素上。

面向潜在客户和招聘方,他们需要在 1 分钟内判断作者
是否值得继续了解。

示例五：在线课程报名页

为一门线上设计课程做一个报名落地页,目标是让访客
在 3 分钟内完成报名决策。

单页纵向滚动结构,八个板块从上到下:
1. Hero 区:课程标题 + 副标语 + 立即报名 CTA
2. 课程介绍:用一段话讲清"为什么值得学"
3. 学习收获:4 个 What you'll learn 卡片
4. 课程大纲:8 周内容,每周一个模块
5. 讲师介绍:头像 + 简介 + 三个权威背书
6. 学员评价:三条真实学员反馈
7. 价格区:早鸟价、原价、倒计时
8. 常见问题:6 个 FAQ 折叠面板

整体走编辑设计风格,留白充足,避免营销感。配色以
中性色为主,CTA 按钮用单一强调色突出。

面向想转行做设计的在职人员,有付费意愿但谨慎,
需要看到大量证据才会决定报名。

示例六：餐厅菜单数字化展示

为一家精品咖啡馆设计一份移动端菜单页,让顾客在
扫码后快速浏览和点单。

移动端竖向布局,顶部固定店名和打烊时间提示,中间为
分类切换 Tab(咖啡、茶饮、烘焙、轻食),下方为对应
分类的商品列表,底部固定购物车浮动按钮。

- 分类 Tab:横向滑动,4 个分类
- 商品列表:每条含小图、名称、描述、价格、加号按钮
- 商品详情:点击进入半屏抽屉,展示大图、详细描述、
  规格选择(温度、糖度、奶选项)
- 购物车浮动按钮:常驻右下角,显示当前数量和总价

整体走温暖的复古咖啡馆风格,暖棕色主色,衬线字体
搭配手写体强调元素。避免现代极简风,要有手作感。

面向 25-40 岁的咖啡爱好者,周末进店,期望感受到
店主的用心和品味。