Design in Hydite — three surfaces, one source of truth
Three first-class design surfaces inside the IDE: High Design (code-aware canvas), Omni Design (AI design studio), and 68 built-in design systems usable from a single slash command.
Most IDEs treat design as someone else's job — you tab out to Figma, eyeball the spec, then translate it into code by hand. Every iteration loses information and every handoff costs hours.
Hydite takes a different position: design is not a separate file format, it is another view of your codebase. The same component tree powers the canvas, the inspector, and the running app. Pick the surface that fits the moment.
1. Three surfaces#
Hydite ships three design surfaces, each solving a different problem.
| Surface | Best for | Status |
|---|---|---|
| High Design | Pixel-accurate work on a real codebase; component-level redesign; visual review of an existing app | Stable |
| Omni Design | Brand-new product exploration; reference-driven design; multi-surface output (web, image, video) | Stable |
| Built-in Design Systems | Locking a project (or just one request) to a named system like Apple HIG or Material 3 | Stable |
2. High Design — your codebase, rendered on a canvas#
High Design is a visual canvas that opens as a regular editor tab inside Hydite. The canvas does not store its own design file. It reads your real component tree, lays it out, and lets you:
- Inspect any node and jump straight to the source line that produced it.
- Drag, align, distribute and reorder elements with the keyboard shortcuts you expect from a vector editor.
- Record an interaction once and replay it as a regression test.
- Take a pixel-locked screenshot and hand it back to an Agent as visual context for the next prompt.
Because the canvas and the code share one source of truth, every edit you make on the canvas is a commit-able diff in your repository. Nothing to export, nothing to re-import.
When to reach for it. You already have a running app and you want to redesign one screen, audit visual consistency, or hand the AI a precise visual brief. High Design is the right tool.
3. Omni Design — AI-native design studio#
Omni Design is a separate canvas optimised for greenfield work. It opens with six tabs, each tuned to a phase of the design loop:
| Tab | What it gives you |
|---|---|
| Sketch | A blank whiteboard with shape, ink and text tools. Useful for one-minute concept sketches before any AI is involved. |
| Designs | Your project library. Every Omni Design project lives here with a thumbnail, the skill that produced it, and the design system in use. |
| Examples | A curated catalogue of prompts grouped by surface and scenario. Click "Send to chat" and the prompt arrives pre-filled, with the source skill already attached. |
| Skills | The full inventory of design skills (landing page, dashboard, hero section, mobile app shell, etc.). Each skill carries its own example prompt and recommended surface. |
| Design Systems | Live previews of the 68 built-in design systems. Each card shows colour swatches, a rendered component set, and a one-click "apply to project" action. |
| Image / Video Prompts | A library of prompt templates for image and video models, tagged by category and model. |
Across all six tabs Omni Design covers four output surfaces — web, image, video, audio — so a single project can produce a landing page, the launch hero image and the announcement video without leaving the canvas.
The chat side is just as integrated. From any chat panel you can write @omni-design /designs (or /examples, /skills, /design-systems, /image-prompts, /video-prompts) and the corresponding tab opens in your active editor group, ready to receive the next request.
4. Built-in design systems — one slash, 68 brands#
The third surface is a single chat command: /design. It opens a quick-pick listing every bundled design system. Pick one and Hydite attaches that system's specification to the current chat as a locked instruction. Any UI an Agent generates afterwards follows that system — colours, typography, spacing, component personality, motion.
68 systems ship in the box, organised across consumer brands, design tools, developer platforms, AI labs, hardware makers and luxury automotive houses. A small slice:
| Category | Examples |
|---|---|
| Platform & OS | Apple HIG · Material 3 · Microsoft Fluent · Sony PlayStation |
| Developer tooling | Linear · Figma · Notion · Vercel · Stripe · GitHub · Sentry |
| Consumer product | Airbnb DLS · Uber · Spotify · Pinterest · Nike · Tesla · SpaceX |
| AI & ML | x.ai · Mistral · Cohere · ElevenLabs · Anthropic Claude · Hugging Face peers |
| Luxury & automotive | Bugatti · Ferrari · Lamborghini · BMW · Renault · Vodafone |
| Newsroom & cultural | The Verge · Wired · The Pinterest brand book |
See the full catalogue and the workflow →
5. How the three surfaces compose#
The three surfaces are not exclusive. A typical workflow chains them:
- Run
/designand pick Linear. The next request is now locked to Linear's spacing, typography and motion. - Open Omni Design → Skills and pick Landing page. Type a prompt; Omni Design produces a first-cut page that already obeys Linear's system.
- Open the result in High Design to fine-tune the hero spacing, snap-align the CTA group, and record the scroll interaction as a regression test.
- Hand the resulting code back to the Agent Hub for the rest of the build.
At every step the chat history, the design system, the skill, the project, the diffs and the regression recording stay in one workspace. Nothing has to be re-imported. Nothing has to be re-explained to the AI.
6. Status#
| Surface | Status | Where it lives |
|---|---|---|
| High Design | Stable, shipped | Editor tab, opened via command palette or the chat tool screenshot_high_design |
| Omni Design | Stable, shipped | Editor tab, opened via @omni-design or the command palette |
/design slash | Stable, shipped | Any chat input (Hydite chat, third-party agent chat) |
All three are part of Hydite's private beta. Access is gated by a Hydite OAuth invite — see the Hydite overview for how to get one.
7. Next steps#
- High Design → — the code-aware canvas
- Omni Design → — the AI design studio
- Built-in design systems → — 68 brands, one slash command
One sentence to remember. In Hydite, design is not a separate tool you context-switch to; it is another lens on the same workspace — and you get to choose between a code-aware canvas, an AI studio, and a 68-strong library of named design systems without ever leaving the editor.