AI产品精选

v0 发布 Design Systems 2.0,一次性学习你的设计系统

v0 发布 Design Systems 2.0 它让 v0 一次性学会你的设计系统(组件、tokens、约定),此后所有对话都能用它真实的组件库来生成应用——而不是每次重新描述、也不是靠贴文档。 ...

精选理由

v0 出了一招:把你的设计系统注册成一个 skill,之后每次生成 app 都用真组件,不用反复描述样式,省大事了。

AI 摘要

v0 推出 Design Systems 2.0,该功能可让 v0 一次性学习你的设计系统(组件、tokens、约定),此后所有对话均使用真实组件库生成应用,无需重复描述或贴文档。它通过一个“适配器” skill 存储,指向真实源代码仓库(如 GitHub),声明可安全使用的组件/props/tokens,并告知接入方式(providers、全局样式等)。导入工作流包含5个步骤:收集来源(设计系统包、源码、Storybook 等)、配置环境变量、补充备注、自动生成 v0.json、审查启动应用。v0.json 仅含机器可复用部分,包括 referenceWorkspace.sources(最多3个只读源)、environment.providers、starter。更新 skill 不会自动迁移旧项目,需显式重写。

原文 · shao__meng

v0 发布 Design Systems 2.0 它让 v0 一次性学会你的设计系统(组件、tokens、约定),此后所有对话都能用它真实的组件库来生成应用——而不是每次重新描述、也不是靠贴文档。 ...

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 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 patterns. Your browser does not support the video tag. 🔗 View on Twitter 🔗 View Quoted Tweet 💬 0 🔄 1 ❤️ 0 👀 364 📊 1 ⚡

v0 发布 Design Systems 2.0,一次性学习你的设计系统 · AI 热点