Hydite Design —— 三种设计形态，一个源真理
一个 AI Native IDE 里的三种设计形态：High Design（与代码同源的可视化画布）、Omni Design（多面 AI 设计工作室）、68 个内置 Design System（一行 /design 命令即可应用）。
绝大多数 IDE 把设计当成"别人的事"——你切到 Figma 看一眼标注，再手工把它翻译成代码。每一轮迭代都在丢信息，每一次交付都要花数小时。
Hydite 的取舍不同：设计不是另一种文件格式，它是同一份代码库的另一种视图。同一棵组件树同时驱动画布、Inspector 和正在运行的应用。形态由场景决定，不由工具决定。
1. 三种设计形态#
Hydite 提供三种设计形态，分别解决三类问题。
| 形态 | 适用场景 | 状态 |
|---|---|---|
| High Design | 真实代码库上的像素级设计、组件级重设计、对现网产品做视觉走查 | 稳定 |
| Omni Design | 全新产品探索、参考驱动设计、多 surface 输出（网页 / 图 / 视频） | 稳定 |
| 内置 Design Systems | 把一个项目（或仅一次请求）锁定到一套具名设计系统，如 Apple HIG / Material 3 | 稳定 |
2. High Design —— 把你的代码库画在画布上#
High Design 是 Hydite 里的一个原生 Editor Tab，打开方式与打开一个文件别无二致。它不额外维护一份设计稿——它读取你真实的组件树，将其铺到画布上，然后让你：
- 在画布上选中任意节点，直接跳到产生它的源代码位置。
- 用矢量编辑器的快捷键拖动、对齐、分布、调整 z-order。
- 录一次交互、回放为回归测试，UI 改坏了立刻能复现。
- 像素锁定地截图，把图直接喂给 Agent，作为下一轮 Prompt 的视觉上下文。
因为画布与代码同源，任何在画布上的改动就是仓库里的一次 commit。无需导出、无需再导入。
什么时候用它。 你已经有一个跑得起来的 App，想重设计某个页面、做视觉一致性走查、或者给 AI 一段精确的视觉简报。High Design 就是那把钥匙。
3. Omni Design —— AI 原生的多面设计工作室#
Omni Design 是另一块画布，专为 "零到一" 的设计场景而生。打开后是六个 Tab，每个对应设计流程的一个阶段：
| Tab | 它给你的东西 |
|---|---|
| Sketch | 一块白板，自带画笔、图形与文字工具。用来在 AI 介入之前，做 60 秒概念草图。 |
| Designs | 项目库。每一个 Omni Design 项目都在这里有缩略图，并标记当前使用的 Skill 与 Design System。 |
| Examples | 精挑细选的 Prompt 库，按 surface 与场景分组。点 "Send to chat"，对应的 Skill 已经预绑定好。 |
| Skills | 全部设计类 Skill（落地页、Dashboard、Hero 区、移动端外壳……）。每个 Skill 自带示例 Prompt 与推荐 surface。 |
| Design Systems | 68 套内置 Design System 的实时预览。每张卡片含色板、组件预览和 "一键应用到项目" 按钮。 |
| Image / Video Prompts | 图像与视频模型的 Prompt 模板库，按品类与模型打标。 |
六个 Tab 横跨四种输出 surface —— Web、Image、Video、Audio —— 所以一个项目可以同时产出落地页、上线主图、宣发视频，全程不出画布。
Chat 侧同样无缝集成。在任意 Chat 输入框写 @omni-design /designs（或 /examples、/skills、/design-systems、/image-prompts、/video-prompts），对应的 Tab 会在当前 Editor Group 立刻打开。
4. 内置 Design Systems —— 一行 /design，68 套品牌#
第三种形态浓缩成一个 Chat 命令：/design。回车后弹出 QuickPick，列出全部内置 Design System。选中后，Hydite 把这套系统的规范作为 Instruction 锁定到当前 Chat。之后 Agent 生成的任何 UI 都遵循这套系统的色彩、字体、间距、组件性格与运动语言。
68 套设计系统覆盖消费品牌、设计工具、开发平台、AI 实验室、硬件厂、豪华汽车阵营。摘录如下：
| 类别 | 代表 |
|---|---|
| 平台与操作系统 | Apple HIG · Material 3 · Microsoft Fluent · Sony PlayStation |
| 开发者工具 | Linear · Figma · Notion · Vercel · Stripe · GitHub · Sentry |
| 消费品 | Airbnb DLS · Uber · Spotify · Pinterest · Nike · Tesla · SpaceX |
| AI / ML | x.ai · Mistral · Cohere · ElevenLabs · Anthropic Claude · Hugging Face 同侪 |
| 奢华与汽车 | Bugatti · Ferrari · Lamborghini · BMW · Renault · Vodafone |
| 媒体与文化 | The Verge · Wired · Pinterest 品牌手册 |
5. 三种形态的组合用法#
三种形态并不互斥。典型工作流是把它们串成一条流水线：
/design选 Linear。下一条请求被锁定到 Linear 的间距、排印与运动语言。- 打开 Omni Design → Skills，选 Landing page。写一条 Prompt，Omni Design 产出的第一版页面就已经遵守 Linear 的系统。
- 把结果在 High Design 里打开，对 Hero 区做像素级微调，对齐 CTA 组，并把滚动交互录制为回归测试。
- 把最终代码交还给 Agent Hub，继续后续的工程化构建。
整条链路上，Chat 历史、Design System、Skill、项目、diff、回归录制始终都在同一个工作区里。不需要任何 "导出再导入"，也不需要把上下文再讲一遍给 AI。
6. 状态#
| 形态 | 状态 | 入口 |
|---|---|---|
| High Design | 稳定，已上线 | Editor Tab，Command Palette 或 Chat 工具 screenshot_high_design 唤起 |
| Omni Design | 稳定，已上线 | Editor Tab，@omni-design 或 Command Palette 唤起 |
/design slash | 稳定，已上线 | 任意 Chat 输入框（Hydite Chat 与三方 Agent Chat 通用） |
三种形态都属于 Hydite 内测（Private Beta），通过 Hydite OAuth 邀请制开放——开通方式见 Hydite 总览。
7. 下一步#
- High Design → —— 与代码同源的画布
- Omni Design → —— AI 设计工作室
- 内置 Design Systems → —— 68 套品牌，一行命令
一句话总结。 在 Hydite 里，设计不是另一个需要切上下文的工具，而是同一个工作区的另一种视角——而你可以在"与代码同源的画布"、"AI 设计工作室"与"68 套具名设计系统"之间自由切换，整个过程不需要离开 IDE。