High Design —— 与代码同源的可视化画布

把你的实时代码库当作可编辑画布打开。选中组件即可跳源码；在画布上改动即可得到真实 diff；录制一次交互，回放为视觉回归测试。

你用过的每一款设计工具，画布永远是真理，代码永远在追赶。设计师画稿、工程师翻译，发布周期一过，两边便彻底失同步。

High Design 反转了这种关系。 代码库是真理，画布只是它的另一种视图。在哪一侧改，另一侧都会跟上。

1. 它是什么#

High Design 是 Hydite 中的一类 Editor Pane。它不读取任何设计文件，而是直接打开你仓库里的组件树，按像素级精度渲染出来，给你一个矢量编辑器一样的工作面——但底下永远连着代码。

2. 你在画布上能做的事#

下列每一项都对应矢量编辑器里熟悉的动作——只不过它们作用在真实组件上，而不是静态的矩形。

选中、检视、跳回源代码

点击画布上任意元素，右侧 Inspector 会给出组件名、所在文件、生成该实例的 props、计算后的样式。Reveal in Source 一键定位到对应源码行；反向的 Reveal in Canvas 也可以——把光标放在源文件中任意 JSX 元素里，画布会自动平移、缩放、并高亮对应节点。

对齐、分布、调整层级

矢量编辑器的完整对齐语法一应俱全：

• 左 / 右 / 上 / 下 / 中对齐，相对选区或相对画布。
• 水平 / 垂直均匀分布。
• 向前 / 向后步进一层、置顶、置底。
• 编组、解组、锁定。

每一次对齐都会被写回底层样式，刷新依然存在，并以一次普通的 diff 出现在 VCS 面板里。

多画板

一块 High Design 画布可以并排容纳多个 Artboard，能像设计师那样把一份功能规格拉平 —— Home / Settings / Empty state 并排在一起，都从同一份源代码渲染。

Pencil 与快速批注#

Pencil 工具支持在画布上手绘批注，附着在画板或具体组件上。批注本身会被默认从喂给 Agent 的截图中剥除，除非你明确开启。

像素锁定的截图喂给 AI#

Hydite Chat 自带 screenshot_high_design 工具。运行它会以确定性 DPR 抓取当前画板，把图附到下条消息里，并标注当前画板上有哪些组件。Agent 拿到这张图，就能针对布局、对比度、间距给出代码级别的改动建议。

Stale 检测#

当代码漂移、画布上看到的内容不再是最新的（有人重构了 props、改了 Token、删了组件），High Design 会在受影响节点上打上 Stale 标记，并提供一键重同步。你看见的是漂移本身，而不是"昨天的真理"。

3. 自动化 —— 录一次，回放无数次#

High Design 自带自动化录制器。按下录制、走一遍交互（打开菜单、悬停按钮、拖动卡片），按下停止，你就得到一段绑定到组件身份（而非像素坐标）的可回放脚本。下次回放时，High Design 会：

• 完整复现用户手势。
• 在每一步抓帧。
• 把当前帧与基线帧做 diff。
• 在 Chat 侧栏直接显示视觉回归。

"我刚才那次重构，会不会把空状态搞坏了？"——5 秒就有答案。

4. 这件事为什么重要#

重点不是"画布比 Figma 更花哨"。重点是 画布即代码库。两件产物变成一件、两种视图，于是再也不用在两份产物之间来回翻译。

5. 哪些场景不用它#

High Design 是有意聚焦的工具，下列场景不推荐：

• 0→1 全新产品探索，根本还没有代码。请用 Omni Design。
• 营销级 Hero 主视觉。 用 Omni Design 的 Image Prompt surface，做完再把素材拉回来。
• 把项目锁定到具名设计系统。 那是 /design 命令 的事。

6. 状态#

High Design 已在 Hydite 内测中稳定上线。画布、Inspector、Reveal in Source / Canvas、对齐分布、自动化录制回放、Chat 工具 screenshot_high_design 均默认随 IDE 发布。访问通过 Hydite OAuth 邀请制开放——见 Hydite 总览。

7. 下一步#

• Omni Design → —— 面向 0→1 的 AI 设计工作室。
• 内置 Design Systems → —— 一行 /design 应用 Apple HIG、Material 3、Linear 等 68 套设计系统。
• Design 总览 → —— 三种形态如何串联。

一句话。 High Design 把"代码库是设计的真理来源"这一立场，做成了一块从头到尾都尊重这一立场的画布。