Claude Design 十分钟上手

跟着本页走一遍，你会得到第一张基于 swift-web 设计系统的可交互设计稿。全程约十分钟，不需要任何代码知识。

第 0 步：账号与接入路径

前置条件：一个 Claude 付费账号（Pro / Max / Team / Enterprise 均可），浏览器打开 claude.ai/design。

接入 swift-web 设计资源有两条路径，按你的账号情况选：

	路径 A：组织共享（推荐）	路径 B：个人导入
适用	公司 Team / Enterprise 组织成员	个人 Pro / Max 账号
步骤	无需任何操作——组织内已发布 swift-web 设计系统，新建项目时在选择器里直接选	下载资源包 → 上传给 Claude 提取成自己的设计系统（见下）
协作	项目可组织内共享、多人评审	单人使用，成稿经导出分享
找谁	组织接入事宜联系框架维护者	自助

路径 B 的导入步骤：

下载 swift-web 设计资源包：swift-web-design-cards.zip（20 张卡片：色板 / 排版 / 形状 + 17 个组件形态，全部派生自框架源码）。
在 Claude Design 里创建 / 进入你的组织（项目选择器左下角），进入设计系统设置。
把解压后的 HTML 文件作为品牌资产上传——Claude 会分析它们并提取出一套可复用的设计系统（色板、字体、组件模式）。
建一个测试项目验证提取质量，满意后打开该设计系统的 Published 开关，之后你新建的项目都会自动使用它。

资源包里的卡片是自说明的（每张都标注了 token 名和组件说明），提取质量通常不错；个别细节偏差可以用设计系统的 Remix 功能让 AI 修正。

第 1 步：新建项目

在 Claude Design 首页新建项目。确认项目使用的是 swift-web 设计系统（路径 A 在创建时的 Design system 选择器里选；路径 B 发布后自动应用）。此后这个项目里 AI 生成的一切都会遵守我们的颜色、字体与组件形态。

第 2 步：用「四要素」描述你要的东西

好的首版稿来自结构清晰的描述。官方总结的 prompt 四要素——目标、布局、内容、受众——照着组织语言即可：

目标：一个影视内容站的首页。布局：顶部固定导航（logo + 分类 + 搜索）；首屏全宽轮播 banner；下面三个楼层——「热播推荐」横滚卡片排、「最新上线」海报网格、「排行榜」带序号的列表。内容：卡片含封面、片名、评分角标；导航分类用「电影 / 剧集 / 综艺 / 动漫」。受众：移动端为主的普通观众，暗色调，观感接近主流流媒体站。

发送后 AI 会生成完整的一版。不用追求一次说全——结构对了就是好的起点，细节留给迭代。

两个实用小贴士：

描述里出现的组件名可以直接用中文意图（「横滚卡片排」「整屏轮播」），接入设计系统后 AI 会自动对位到对应的 swift-web 组件形态。
让 AI 给稿子起英文文件名（如 home.dc.html），跨系统分享链接时更稳。

第 3 步：三种方式迭代

按修改的粒度选工具（详见认识 Claude Design 的对照表）：

全局调整 → 继续对话：「配色再暗一档」「楼层顺序对调」。
局部修改 → 内联批注：点住具体元素说事，AI 只动那一处。批注偶尔响应慢，把同样的话粘到对话里说即可。
微调 → 画布直接编辑：拖拽对齐、改字号，所见即所得。

还有一招很好用：把参考图直接拖进对话。竞品截图、手绘草图、旧版设计都可以，AI 会对照参考修正稿子——「按这张图的卡片密度调整第二楼层」。

第 4 步：配色（设计新品牌时）

如果你在为全新网站定调，记住一条纪律：让 AI 在语义 token 层调色，不要逐个元素改颜色。

✅ 「把品牌主色（--primary）换成 #C8A96A 金色系，背景压到近黑，整体奢华暗色调」 ❌ 「这个按钮改金色」「那个标题也改金色」……（散点改色，稿内不一致，且无法交付落地）

定稿后把最终的 token 值清单（主色 / 背景 / 文字 / 语义色等十几项）作为交付物之一——它是后续代码落地和生成品牌专属设计系统的唯一输入。完整说明见配色工作流。

第 5 步：导出与交接

右上角导出菜单，按去向选：

给同事 / 业务方过目：组织内直接发项目链接（Team / Enterprise）；个人账号导出独立 HTML 或 PDF 发出去。
进 Canva / 做汇报：导出 PPTX 或直接送入 Canva。
交给开发实现：使用 handoff 打包交给 Claude Code——这是与 swift-web 工程衔接的正式通道，交接细节（连同 Figma 轨的交接）统一见设计师与前端协作。

常见问题

生成的稿子没有用我们的颜色？ 检查项目是否真的接入了 swift-web 设计系统（项目设置里可见）；路径 B 需确认设计系统已 Published。
想改设计系统本身（加组件、改 token 默认值）？ 设计系统卡片由框架源码自动派生，不要在 Claude Design 里直接改卡片——需求提给框架维护者，代码侧更新后资源自动跟上。理由见规范与治理。
额度用完了？ Claude Design 与聊天、Claude Code 共享订阅额度，等额度窗口刷新或联系管理员。