第15章 Design Systems 2.0：通过技能机制让 v0 掌握团队设计系统

Design Systems 2.0 教会 v0 使用团队组件、设计令牌及设计系统规范进行构建。Design Systems 2.0 允许你一次性教会 v0 你的设计系统，以便对话能用真实的组件、令牌和规范来构建应用。 创建并使用自定义设计系统。

设计系统以“技能”形式保存在当前范围中，例如团队或个人工作区。技能是一组小而集中的指令，v0 会将其与你的工作流关联，并在相关时自动调用。设计系统技能并非文档的副本，而是一个适配器，它告诉 v0 源头在哪里、哪些组件、属性（props）和令牌可以安全使用，以及如何将系统集成到新的应用中。 寻找旧版 shadcn/ui 注册中心指南？请参阅 设计系统。

开始前 收集当前定义你设计系统的所有源。你不必一次性准备齐全；先提供你现有的资源，如果 v0 需要更多上下文，它会在导入过程中通过后续问题向你索取。

* 可安装的设计系统包：公开或私有的 npm 包、.tgz/.tar 归档文件，或包含自身 package.json 的源码目录。如果你只有零散的 CSS、主题文件、Figma 画板或组件，v0 会询问你是否能提供安装包，或者希望 v0 基于这些源创建一个新的可安装包。 * 设计系统源：组件和令牌所在的仓库或包。 * 一个实际消费该系统的 App：通常最有价值的资源，因为它展示了 Provider、全局样式、字体、主题设置以及组件的正确用法。你的营销网站或主仪表盘都适用。 * Storybook、文档或设计指南：解释组件、属性、令牌、布局规则和品牌规范的链接。 * Figma 画板或节点：展示构图、密度、排版和组件用法的视觉参考。 * 私有包凭证：如果设计系统是私有 npm 包，请确保团队共享的 NPM_TOKEN 或 NPM_RC 已配置，以便 v0 能安装私有包。这是一次性的团队设置；个人导入无需额外操作。 * 安装说明和示例：包括 README、设置命令以及常用组件的正确用法示例。

保持源的一致性。避免混合无关的设计系统、框架，或与当前包 API 冲突的过时文档。

导入设计系统 从 设计系统 页面开始新的导入。指向定义系统的源，例如 GitHub 仓库、消费端 App、Figma 画板和文档。v0 读取这些源，构建一个启动器应用（starter app）以验证它理解你的系统，并在当前范围保存技能。如果团队范围的导入无法保存到团队，v0 会询问是否将其保存为仅限个人的技能。

添加你的源 在导入表单中，添加 v0 学习你系统时所需的任何源： * 设计系统源或消费端 App 的 GitHub 仓库。 * 用于视觉参考的 Figma 画板或节点。登录 Figma 后，粘贴特定画板或节点的链接。v0 会导入截图和提取的画板上下文，以便将设计作为参考。 * 链接，如 Storybook、文档站点或设计指南。 * 附件，如截图、ZIP 文件、导出的包或 .tgz 包归档。

v0 基于真实源进行构建。如果无法从源中验证某个组件、属性或令牌，v0 就不应使用它。

添加备注 备注是可选的，但对于那些难以从源码推断的信息非常有用： * 全局样式、Provider、字体或必需的包装器 * 已弃用的组件、反模式或陷阱 * v0 应优先选择或避免的组件规范

理解 v0.json 在导入期间，v0 将可复用的设置存储在 v0.json 中。通常无需手动编辑此文件，但该文件是技能使用时实际应用的源数据真相。 设计系统的 v0.json 遵循以下结构： { "version": 1, "referenceWorkspace": { "sources": [ { "id": "github-repo:owner/repo:main", "type": "github-repo", "repo": { "org": "owner", "name": "repo" }, "ref": "main", "mountPath": "/vercel/share/v0-reference-workspace-sources/owner/repo/main" } ] }, "starter": { "source": "skill-directory", "path": "assets/starter" } }

* version：v0.json 的模式版本。使用 1。 * referenceWorkspace.sources：v0 可浏览的只读 GitHub 源。每个源包含仓库、引用（ref）、生成的 ID 和挂载路径。一个 v0.json 最多可包含三个参考源。 * starter：v0 在构建前应用的初始应用。设计系统技能通常使用 skill-directory，路径如 assets/starter。其他支持的 starter 源包括 empty 和 v0-default。

Figma 画板、文档链接和附件是导入输入。v0 会将其提炼为保存的技能指令和参考，而不是将它们保留为长期存在的 v0.json 源。

开始对话并审查启动器 提交表单后，v0 启动专用对话并处理导入过程： * 发现你的源和设计系统基础元素。 * 使用你的设计系统构建并预览一个小型启动器应用。 * 在保存前暂停以等待你审查。 * 仅在你批准后保存技能。 * 在确认前验证保存的技能，并提供经核实的链接供你使用。

如果 v0 遇到阻碍，如无法访问的仓库或无法安装的私有包，它会停止并询问你如何解决该阻碍。对于私有包，这意味着需要在 Vercel 上添加或更新团队共享的 NPM_TOKEN 或 NPM_RC；参见 私有依赖项。

认真进行审查。v0 会将此启动器保存到技能中，之后使用该设计系统构建的每个应用都将从此开始。检查其外观和内部结构：组件和令牌、Provider、主题设置、字体和全局样式。如果有任何问题，哪怕是小细节，请在对话中要求 v0 修复，并在批准前重新检查。正确的启动器意味着每个未来应用都将从一个可用的基础开始，而不是每次都继承同样的问题。

一旦批准，你的设计系统将保存在技能中，随时可用。导入它的对话只是起点——你可以将技能附加到新对话中，或在此对话中继续构建。

使用已保存的设计系统 已保存的技能显示在 设计系统 页面的“你的设计系统”下。

要使用它，请从提示工具栏附加，或在提示中直接引用。你也可以从设计系统页面或工具栏尝试内置示例。

自定义标志和颜色 从设计系统页面打开已保存的设计系统，以自定义其在 v0 中的外观。

* 添加或替换标志：选择设计系统名称旁的标志，上传最多 4 MB 的图片。v0 将其作为 logo.png 存储在保存的技能中的 SKILL.md 旁边。 * 设置颜色：在 SKILL.md 的前 matter 中使用 v0.design-system.appearance 设置设计系统在 v0 聊天编辑器中使用的颜色：

metadata: v0.kind: design-system v0.design-system: appearance: light: background: "#E6F4FF" foreground: "#002A3A" dark: background: "#004052" foreground: "#E6F4FF"

选择与标志互补的颜色，并确保设计系统名称在浅色和深色模式下均清晰易读。这些颜色用于在 v0 中识别设计系统；它们不会改变使用它构建的应用中的颜色令牌。

设置团队默认设计系统 付费计划的团队所有者可以为团队选择默认设计系统。

默认值用于未选择设计系统的新对话。现有对话和手动选择的设计系统保持不变。 在设计系统页面，打开团队技能的操作菜单并选择 设为默认。所选技能将获得“默认”徽章，同一菜单也可清除该设置。 提示工具栏中的手动设计系统选择会覆盖新对话中的团队默认值。

保持设计系统更新 你可以从任何对话更新已保存的设计系统，在设计系统页面手动编辑，或通过 v0 API 更新。无需回到首次导入的对话。

要更新技能，请在对话中告知 v0 包含什么变化，例如发布说明、迁移指南、新包版本或更新的 GitHub 源：

将 Acme UI 更新到 v2.3。发布说明和迁移指南：[链接]。Button 组件将其 type 属性重命名为 variant。

v0 编辑技能并重新检查启动器应用，以确保没有回归。每次保存的编辑都显示在设计系统页面的 版本历史 中，你可以在那里查看文件、作者、时间戳和文本差异。

只要源发生影响生成应用的变更，就更新设计系统。典型的更新应： * 识别新的包版本、GitHub 分支或引用，以及文档。 * 包含发布说明、迁移指南和任何破坏性变更。 * 同时更新组件 API、令牌、设置说明、参考文件和启动器。

现有项目不会自动更新。若要采用新版本，请要求 v0 使用更新后的技能更新该应用的代码。

最佳实践

* 包含设计系统源和至少一个真实的消费端 App。 * 首选当前文档、当前包版本和可用的示例，而非详尽但过时的参考。 * 在导入私有包前配置团队共享的 npm 凭证；若无法共享凭证，则附加 .tgz 归档文件。 * 记录全局设置：Provider、主题包装器、字体、CSS 导入、Tailwind 配置和必需的环境变量。 * 尽可能将源集中在一个设计系统和一个框架栈上。

FAQ

设计系统技能中保存的启动器应用是什么？ 新的 v0 对话始于一个使用 shadcn/ui 和 Tailwind CSS 的 Next.js 应用。此设置可能与拥有自身组件、令牌、样式或 Provider 的设计系统冲突。 在导入期间，v0 为你的设计系统配置一个小应用并随技能保存。未来的对话从该应用开始，因此代理无需花费时间和令牌重复设置即可处理你的提示。 技能的 v0.json 选择启动器： { "version": 1, "starter": { "source": "skill-directory", "path": "assets/starter" } } 路径相对于技能而言。使用 skill-directory 指代随技能保存的文件，v0-default 指代标准 v0 启动器，empty 指代空白项目。设计系统导入通常使用 skill-directory。

设计系统有新包版本或 GitHub 源更新后，如何更新？ 在任何对话中要求 v0 更新技能，并包含新版本、变更源、发布说明、迁移指南和任何破坏性变更。v0 更新保存的技能并再次验证启动器应用。你也可以从设计系统页面手动编辑技能。

更新设计系统时，我是否必须回到导入它的对话？ 不。那个对话只是创建设计系统的地方。在任何对话中告知 v0 发生了什么变化即可更新保存的技能，或在设计系统页面手动编辑。

更新设计系统时，现有对话会发生什么？ 更新设计系统技能会改变 v0 加载技能时使用的共享指令、参考文件和启动器。现有对话和项目不会自动重写已生成的代码；它们保留技能应用时的代码和启动器。新对话，以及加载技能的任何新工作，都将使用更新后的版本。 若要更新现有对话或应用，请在该对话中要求 v0 使用技能的最新版本更新其代码。

v0 可以使用私有包吗？ 可以。私有包通过团队共享的 NPM_TOKEN（针对非 registry.npmjs.org 注册表则为 NPM_RC）安装，这在 Vercel 上作为共享环境变量配置一次即可。v0.app 中的设计系统导入和对话会自动使用它；设计系统本身不存储任何内容。对于 Platform API 对话，在创建对话时启用共享 npm 访问。如果 v0 在导入期间无法安装私有包，它会询问你添加或更新该凭证。如果无法共享凭证，请附加 .tgz 包归档。参见 私有依赖项。

谁可以创建、编辑、删除或设置默认设计系统技能？ 默认情况下，拥有编辑访问权限的任何团队成员均可创建、编辑和删除团队技能。在任何付费团队计划中，团队所有者可在工作区设置中将“团队记忆与技能”从“所有团队成员”更改为“所有者和选定成员”。当访问权限受限时，仅拥有编辑权限的团队所有者和选定成员可以创建、编辑和删除团队记忆和技能，包括设计系统技能。所有团队成员仍可查看和使用它们。如果计划后续变更，所有者随时可以关闭限制。 仅团队所有者可以更改团队的默认设计系统。

上一篇 设计模式 下一篇 图像、视频和文件上传