Home

内置 Design Systems —— /design

一行 Chat 命令,把 Hydite 切换到 68 种设计语言之一。Apple HIG、Material 3、Linear、Notion、Stripe、Tesla、SpaceX、Nike——选定之后,整个对话里所有 Agent 都自动遵守。


每一个前端工程师都和 AI 进行过同一段对话:「做成 Linear 那样」「要 Material 的感觉」「严格按 Apple 规范走」。每一次结局也都一样——AI 给你一个 大约对味 的东西,剩下半个下午你都在和它讨价还价间距 Token。

Hydite 提供了一个命令终结这场拉锯战:/design

1. 它是什么#

/design 是一个出现在 Hydite 内所有 Chat 输入框中的 slash 命令(内置 Chat、三方 Agent Harness——只要 IDE 暴露了 Chat composer)。触发后:

  1. QuickPick 弹出,列出全部内置 Design System。
  2. 你选一个(或键入关键字过滤)。
  3. Hydite 把该系统的完整规范作为锁定 Instruction附到 Chat。
  4. 此后,对话中任何 Agent 的回答都遵守该系统——色彩、排印、间距、组件性格、运动语言。

它是三种设计形态里最简单也最常用的一种:不开任何画布,两次击键即可生效。

Chat 输入框/design ↵一次击键QuickPickApple HIGMaterial 3Linear · NotionStripe · Vercel · …共 68 套锁定作为 Instruction附到对话所有 Agent 遵守

2. 为什么"锁定 Instruction"很重要#

很多 Chat 工具允许你把 Style Guide 粘到 Prompt 里。问题在于:粘上去的内容会漂移——再聊几轮 AI 就忘了,用户重新粘一遍,对话里三段指南相互打架。

/design 跳过了这种失败模式。被选中的系统以 Instruction 类型 的引用方式附加——和 Prompt、Skill 用的是同一种锁定附件。它:

  • 只读——不允许行内编辑,不会被无意改写。
  • 对话级生命周期——直到你主动移除前一直生效。
  • 对所有 Agent 生效——不止 Hydite 自家 Agent,对话中所有参与者都遵守。
  • 以一个带书签图标的 chip 呈现——一眼就能看出当前活跃的是哪一套系统。

最终效果:你只对 AI 说一次,AI 对剩下整场会话保持一致。

3. 目录#

随包发布 68 套设计系统,全部人工策展,每一套都附手写规范,覆盖 Token、排印、运动语言以及系统所暗示的人格。代表性切片:

类别代表
平台与操作系统Apple HIG · Material 3 · Microsoft Fluent · Sony PlayStation
开发者工具Linear · Figma · Notion · Vercel · Stripe · Sentry · HashiCorp · IBM · Mintlify · Cursor · Replicate · Resend · PostHog · Raycast · Composio · Sanity · MongoDB · ClickHouse · Webflow · Framer · Lovable · Voltagent · Warp · Zapier · Airtable · Cal · Intercom · Miro
AI 实验室x.ai · Mistral · Cohere · ElevenLabs · Anthropic Claude · Meta · NVIDIA · Together · Runway · Minimax · Ollama · OpenCode
消费品 & 生活方式Airbnb DLS · Uber · Spotify · Pinterest · Nike · Shopify · Superhuman · Expo · Wise · Revolut
金融与交易所Mastercard · Coinbase · Kraken · Binance
汽车与奢华Tesla · SpaceX · BMW · Bugatti · Ferrari · Lamborghini · Renault · Vodafone · Clay
媒体与文化The Verge · Wired

每次选定后会以一枚带名字的 chip 出现在 Chat 里——Linear design systemApple HIG design system 等——一眼就能确认当前正在使用的设计语言。

4. 视觉孪生:Design Systems 画廊#

如果你更习惯先看后选,请打开 Omni Design 的 Design Systems Tab。它和 /design 共用同一份库,但提供实时预览:

  • 每张卡片用该系统自身的 Token 渲染一组组件样本。
  • 每张卡片最多 4 块色板。
  • Copy id 一键复制 id(粘回 Chat 即可绕过 QuickPick),Open preview 进入营销级完整 Showcase。

两个入口、一份库:命令快、画廊踏实。

5. 与另外两种形态的组合#

/design 是一颗小而朴素的开关。它与另外两种设计形态天然搭配:

步骤形态动作
锁定视觉语言/design输入 /design,选 Linear
产出首帧Omni DesignSkills Tab → "Landing page" → 运行
像素级精修High Design把结果放进画布、对齐、录回归
工程化落地Agent Hub把代码交还给规划型 Agent,继续构建

把它们串起来的关键在于:每个面板的每个 Agent,看到的都是同一份锁定 Instruction。第一步选定的设计系统会贯穿到第四步——它是整条流水线的脊柱,而不是事后才补上的修饰。

6. 什么时候需要 /design#

下列场景可以跳过:

  • 你做的是无品牌要求的内部工具——模型的默认 UI 通常够用。
  • 你希望 AI 先帮你出 3 个不同方向——这种探索阶段,让模型自由发挥,挑定了再 /design 锁定。
  • 这次对话里根本不打算生成 UI —— /design 是塑形 UI 的工具,对话型问答里不需要。

剩下所有需要 AI 生成 UI 的对话,运行 /design 的代价是两次击键加一次点选;不运行的代价,是一个下午都在追加 "再紧凑一点" 的微调。

7. 状态#

/design稳定上线,68 套目录默认随 Hydite 发布。Slash 命令在 IDE 暴露的任意 Chat 输入框中注册——包括遵循标准 Chat participant 协议的三方 Agent Harness。访问通过 Hydite OAuth 邀请制开放——见 Hydite 总览

8. 下一步#

一句话。 大多数「按 XX 设计系统来」的 Prompt 失败,是因为 AI 会忘。/design 让 AI 记住——一次击键、一场对话、所有 Agent。