内置 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)。触发后:
- QuickPick 弹出,列出全部内置 Design System。
- 你选一个(或键入关键字过滤)。
- Hydite 把该系统的完整规范作为锁定 Instruction附到 Chat。
- 此后,对话中任何 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 system、Apple 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 Design | Skills 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. 下一步#
- Design 总览 → —— 三种形态如何组合。
- Omni Design → —— 把这份目录视觉化、并产出首帧的 AI 设计工作室。
- High Design → —— 像素级精修的代码同源画布。
一句话。 大多数「按 XX 设计系统来」的 Prompt 失败,是因为 AI 会忘。
/design让 AI 记住——一次击键、一场对话、所有 Agent。