设计体系总览

这个栏目写给 UI 设计师和与设计师协作的前端工程师。它回答一个正在发生的问题：AI 辅助开发已经在前端团队铺开，设计稿到代码的链路也在被 AI 重塑——设计师这一侧，如何接上这股水流？

先把立场说清楚：我们不要求任何人更换设计工具。你可以继续用熟悉的 Figma 完成全部设计工作，只是交接方式升级；也可以推开 AI 原生设计工具的新大门——云端的 Claude Design，或开源本地版的 Open Design（没有 Claude 账号也能用），在里面用对话直接生成基于我们组件库的设计稿。用哪个工具、怎么组合，是设计团队自己的选择——本手册的任务，是把工具、能力、方法讲清楚、讲仔细，让选择建立在了解之上。

一份设计语言，多条工具轨道

swift-web 的设计资源有一个核心特征：唯一事实源是框架源码。颜色、圆角、阴影、字体这些设计决策，以语义 token（CSS 变量）的形式定义在 @swift-web/framework 里；组件的形态（按钮、弹窗、轮播、视频卡……）就是框架组件的真实渲染结果。设计资源不是「另一份需要人工维护的稿子」，而是从代码自动派生出来的——代码更新，资源跟着更新，永远不会出现「设计规范说一套、线上代码跑另一套」。

这份设计语言，通过多条工具轨道供给设计师——工具只是消费端，核心资产（设计语言）与任何工具无关，将来接入新工具也只是「新增一个派生目标」：

Figma 轨Claude Design 轨Open Design 轨
适合谁主力使用 Figma、暂时不想换工具的设计师愿意尝试 AI 原生设计工具、有 Claude 账号的设计师想用 AI 出稿但没有 Claude 账号（如用 ChatGPT / GPT）、或希望稿件留在本机的设计师
设计资源形态Figma Variables（token）+ 组件库（建设中）设计系统卡片（20 张，token + 组件真实形态）设计系统资源包（DESIGN.md + token + 组件形态，同源派生）
出稿方式照常在 Figma 里设计对话描述意图，AI 在画布上生成，可手动精修对话描述意图，本机 coding agent 生成，画布批注迭代
到代码的路径官方 Figma MCP，AI 直读设计稿数据生成代码一键 handoff 交付包给 Claude Code导出单文件 HTML 直接交给 Claude Code
协作能力实时多人（最强）Team / Enterprise 组织共享无云端共享，资源包分发 + 导出成稿
迁移成本零——工具和习惯完全不变需要 Claude 账号，上手约十分钟需本机装 coding agent CLI（任意模型），上手约十分钟

所有轨道的终点是同一个：Claude Code 拿到设计稿后，用 swift-web 框架组件和语义 token 把它落成 Nuxt 代码。因为设计资源和代码共享同一套词汇表（--primary、SwButton、SwCarousel……），落地时不存在「翻译损耗」——这正是整套体系对协作效率的本质提升，与你在哪个工具里画图无关。

为什么值得关心

传统的设计→前端交接，是一条有损链路：设计师在设计稿里表达意图 → 前端肉眼解读 → 手工翻译成代码 → 对不上再来回沟通。业界在 2026 年已经把这条链路换成了另一种形态：

  • 设计稿变成机器可读的数据。AI 编码工具（如 Claude Code）通过 MCP 协议直接读取 Figma 文件中的图层、约束、变量，生成的代码引用的就是设计师定义的那些 token——不再靠肉眼量像素。
  • 代码也能反向回到画布。开发中的真实界面可以一键送回 Figma 变成可编辑图层，设计师在画布上改变体、加批注，不用等开发重写。设计与开发从「串行等待」变成「并行迭代」，实践者报告的反馈周期从数天缩短到数小时。
  • AI 原生设计工具出现。Claude Design（Anthropic 出品）让「用一段话描述 + AI 生成 + 画布精修」成为新的出稿方式，并且天然遵守接入的设计系统——生成的稿子自动使用你团队的颜色、字体、组件。

这三件事共同指向一个结论：设计资源只要以「结构化、代码同源」的方式存在，设计师的产出就能直通实现。swift-web 设计体系就是按这个标准建的。

本栏目的阅读路径

按你的情况选择入口：

相关链接