# v0 发布 Design Systems 2.0

- 来源：meng shao (@shao__meng)
- 发布时间：2026-06-26 08:55
- AIHOT 分数：67
- AIHOT 链接：https://aihot.virxact.com/items/cmqu8yeo302casl803p6m8o7n
- 原文链接：https://x.com/shao__meng/status/2070309913612669115

## AI 摘要

v0 推出 Design Systems 2.0，可将设计系统（组件、tokens、约定）一次性导入，此后对话均用真实组件库生成应用。该功能以一个 skill 保存，作为适配器指明源码位置、安全可用的组件/props/tokens，以及如何接入新应用。导入工作流分 5 步：收集来源（GitHub、npm、Storybook、Figma 等）、配置 NPM_TOKEN 等环境变量、补充备注、自动生成 v0.json、审查 starter 后保存。v0.json 承载只读参考源（最多 3 个）、环境变量链接和启动应用。使用时从提示工具栏附加 skill；更新需告知 v0 变更，但不会自动修改已有项目。最佳实践：来源真实且新、覆盖运行时层、凭证先行。

## 正文

v0 发布 Design Systems 2.0

它让 v0 一次性学会你的设计系统（组件、tokens、约定），此后所有对话都能用它真实的组件库来生成应用--而不是每次重新描述、也不是靠贴文档。

Design Systems 2.0 在 v0 中被保存为一个 skill，但它不是源代码的副本，也不是文档的镜像，是一个"适配器"：
· 指明真实源代码在哪里（GitHub 仓库、消费应用）
· 声明哪些组件 / props / tokens 是可安全使用的
· 告诉 v0 如何把这套系统接入新应用（providers、全局样式、字体、主题）

这个抽象的精妙之处在于：单一可信源仍是你的仓库和包，skill 只是让 v0 知道怎么找到它、读懂它、正确使用它。文档明确强调了一个原则--"基于真实源验证"，凡是从来源中无法验证的组件、prop 或 token，v0 都不应使用。

导入工作流（5 步）
1. 收集来源：设计系统包 + 源仓库 + 真实消费应用 + Storybook/文档 + Figma
2. 环境变量：私有包凭证（如 NPM_TOKEN）配为 Development 共享环境变量
3. 备注：补充源码推断不出的信息
4. v0.json：v0 自动生成，通常无需手改
5. 审查 starter：v0 构建一个小型启动应用，暂停等你批准后才保存

v0.json：可复用设置的真实来源
它只承载"机器可复用"的部分，结构很克制：
· referenceWorkspace.sources -- 只读 GitHub 参考源（最多 3 个），含 repo / ref / 挂载路径
· environment.providers -- 链接的环境变量（shared-env-vars 或 vercel-project）
· starter -- 构建前应用的启动应用（通常 skill-directory 指向 assets/starter）

一个重要区分：Figma frames、文档链接、附件是导入输入，v0 会把它们"提炼"成 skill 指令和引用，而不会作为长期 v0.json 来源保留。也就是说，视觉/文档类材料是"教材"，源码才是"长期凭证"。

使用与维护
· 使用：从提示工具栏附加 skill，或在提示中引用；也可从 Design Systems 页面试用内置示例。
· 更新：在聊天中告诉 v0 变更（新版本、迁移指南、破坏性变更），它会改 skill 并重新验证 starter以防回退。可重复导入的建议--GitHub 源固定到 ref，包版本固定到 package.json。
· 关键边界：更新 skill 不会自动更新已有项目。要让旧项目用上新版，需显式让 v0 用更新后的 skill 重写该应用代码。

这条边界是合理的：skill 是"未来工作的起点 + 约定"，不构成对历史产出的自动迁移，避免静默改动人家的代码库。

最佳实践的三条主线
1. 来源要"真"且"新"--优先当前文档/当前包版本/可用示例，而非详尽但过时的参考；保持单一设计系统 + 单一框架栈。
2. 覆盖"运行时"层--除了组件源码，务必补齐 providers、主题包装器、字体、CSS 导入、Tailwind 配置、必需环境变量等全局设置，这些最易在源码中遗漏。
3. 凭证先行--私有包要么提前配 NPM_TOKEN，要么直接挂 .tgz，别让 v0 卡在安装环节。

### 引用推文

> v0：v0 Design Systems 2.0 is here. Import your design system from GitHub, npm, Storybook, Figma, and more. Build with your real components, colors, fonts, and patte...