High Design — a code-aware visual canvas
Open your live codebase as an editable canvas. Select a component, jump to its source. Edit on the canvas, get a real diff. Record an interaction, replay it as a regression test.
In every design tool you have ever used, the canvas owned the truth and the codebase chased after it. Designers drew, devs translated, and the two sides drifted apart between releases.
High Design inverts the relationship. The codebase owns the truth; the canvas is just another way of looking at it. You can edit on either side and the other follows.
1. What it is#
High Design is a first-class editor pane in Hydite. It does not load a design file. It opens your repository's component tree, renders it pixel-accurately, and gives you a working surface that feels like a vector editor while staying tied to the code underneath.
2. What you actually do on the canvas#
Each capability below maps to a familiar action from a vector editor — but it runs against your real components, not a static rectangle.
Select, inspect, and round-trip to source#
Click any element on the canvas. The right-hand inspector tells you the component name, the file it lives in, the props that produced this instance, and the computed styles. The action Reveal in Source drops you on the exact line. The reverse — Reveal in Canvas — works from any source file: place the caret inside a JSX element and the canvas pans, zooms and highlights the matching node.
Align, distribute, reorder#
The standard alignment grammar is wired in:
- Align left / right / top / bottom / centre to selection or to canvas.
- Distribute horizontally / vertically with even spacing.
- Step z-order forward and back, send to front / back.
- Group, ungroup, lock.
Every alignment command writes back to the underlying styles so the change survives a refresh and shows up as a regular code diff in your VCS panel.
Multi-screen artboards#
A High Design canvas can hold many artboards side by side, so you can lay out a feature spec the same way a designer would — Home / Settings / Empty state rendered next to each other, all driven by the same source.
Pencil and quick annotations#
The Pencil tool lets you draw freehand notes directly on the canvas. Annotations are stored alongside the artboard, can be pinned to specific components, and are stripped out of any screenshot fed to an Agent unless you opt in.
Pixel-locked screenshots for AI#
The Hydite chat ships with a built-in screenshot_high_design tool. Running it captures the current artboard at a deterministic device-pixel ratio, attaches the image to your next message, and labels which components are visible. Agents can then reason about layout, contrast, spacing — and respond with code edits.
Stale diagnostics#
When the underlying code drifts from what the canvas last rendered (someone refactored a prop, a token changed, a component was deleted) High Design surfaces a Stale marker on the affected nodes and offers a one-click re-sync. You see drift instead of silently rendering yesterday's truth.
3. Automation — record once, replay forever#
High Design carries an automation recorder. Press record, walk through an interaction (open a menu, hover a button, drag a card), press stop, and you get back a replayable script bound to component identities — not pixel coordinates. Replay the script later and High Design will:
- Reproduce the exact user gestures.
- Capture frames at each step.
- Diff those frames against a baseline.
- Surface visual regressions in the chat sidebar.
This turns "did my refactor break the empty state?" into a 5-second check.
4. Why this matters#
| Before High Design | With High Design |
|---|---|
| Designer ships Figma; dev re-implements by hand. | One artefact, two views. |
| Visual review = a thread of screenshots. | Visual review = open the canvas. |
| Regression = "looks fine to me". | Regression = recorded replay + frame diff. |
| AI fixes get described in text. | AI fixes get a pixel-locked screenshot for free. |
The point is not that the canvas is fancier than Figma. The point is that the canvas is the codebase. You stop translating between two artefacts because there is only one artefact, with two ergonomic views.
5. When not to use it#
High Design is intentionally focused. It is not the right surface for:
- Brand-new product exploration with no code yet. Reach for Omni Design instead.
- Marketing-grade hero illustrations. Use Omni Design's image-prompt surface, or pull the asset back in afterwards.
- Locking a project to a named design system. That is what the
/designslash command is for.
6. Status#
High Design is shipped and stable inside Hydite's private beta. The canvas, the inspector, Reveal in Source / Canvas, align / distribute, automation record-and-replay and the screenshot_high_design chat tool are all in the default build. Access is gated by a Hydite OAuth invite — see the Hydite overview.
7. Next steps#
- Omni Design → — the AI-native design studio for greenfield work.
- Built-in design systems → — apply Apple HIG, Material 3, Linear and 65 others with a single slash command.
- Design overview → — how all three surfaces compose.
One line. High Design is what happens when you decide that the codebase is the design file — and build a canvas that respects that decision end to end.