Built-in design systems — /design
A single chat command turns Hydite into 68 different design languages. Apple HIG, Material 3, Linear, Notion, Stripe, Tesla, SpaceX, Nike — pick one and every Agent obeys it for the rest of the conversation.
Every front-end engineer has had the same conversation: "Make it look like Linear." "Make it feel like Material." "Match Apple's spec sheet." And every time, the same thing happens — the AI gives you something that is roughly the right vibe and you spend the rest of the afternoon negotiating spacing tokens.
Hydite ships a single command that ends that negotiation: /design.
1. What it is#
/design is a slash command available in every chat input inside Hydite (the built-in chat, third-party Agent harnesses, anywhere the editor exposes a chat composer). When you trigger it:
- A quick-pick opens, listing every bundled design system.
- You pick one (or filter by typing).
- Hydite attaches the system's full specification to the chat as a locked instruction.
- From that point on, every Agent answer in the conversation honours the system — colour, typography, spacing, component personality, motion.
It is the simplest of the three design surfaces and often the most useful: zero canvas overhead, applies in two keystrokes.
2. Why "locked instruction" matters#
Most chat tools let you paste a style guide into the prompt. The problem with that approach is that the guide drifts: a few turns later the AI forgets, the user re-pastes, and three pastes in the conversation contradict each other.
/design skips that failure mode entirely. The chosen system is attached as an Instruction-type reference — the same kind of locked attachment that prompts and skills use. It:
- Is read-only (no inline editing, no accidental rewrites).
- Persists for the entire conversation until you remove it.
- Is honoured by every Agent that participates in the conversation, not just Hydite's own.
- Renders as a chip with a bookmark icon next to the input — you can see at a glance which system is active.
The net effect: you tell the AI once, and the AI behaves consistently for the rest of the session.
3. The catalogue#
68 design systems ship in the box. They are curated, not auto-scraped — each one carries a hand-written spec covering tokens, typography, motion language and the personality the system implies. A representative slice:
| Category | Systems |
|---|---|
| Platform & OS | Apple HIG · Material 3 · Microsoft Fluent · Sony PlayStation |
| Developer tooling | 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 labs | x.ai · Mistral · Cohere · ElevenLabs · Anthropic Claude · Meta · NVIDIA · Together · Runway · Minimax · Ollama · OpenCode |
| Consumer & lifestyle | Airbnb DLS · Uber · Spotify · Pinterest · Nike · Shopify · Superhuman · Expo · Wise · Revolut |
| Finance & exchange | Mastercard · Coinbase · Kraken · Binance |
| Cars & luxury | Tesla · SpaceX · BMW · Bugatti · Ferrari · Lamborghini · Renault · Vodafone · Clay |
| Newsroom & cultural | The Verge · Wired |
Each pick lands in the chat as a labelled chip — Linear design system, Apple HIG design system, and so on — so a quick glance tells you which language you are in.
4. The visual companion#
If you would rather see the systems before picking, open the Design Systems tab inside Omni Design. It is the same library, with live previews:
- Each card renders a component sample with the system's own tokens.
- Up to four colour swatches per card.
- One-click Copy id (paste the id into chat to bypass the picker) or Open preview for a full marketing-style showcase.
Two entry points, one library: the slash command is fast, the gallery is reassuring.
5. Composition with the other surfaces#
/design is the small, simple knob. It composes naturally with the other two design surfaces:
| Step | Surface | Action |
|---|---|---|
| Lock visual language | /design | Type /design, pick Linear |
| Generate first frame | Omni Design | Skills tab → "Landing page" → run |
| Refine at pixel level | High Design | Open the resulting page on the canvas, snap-align, record regression |
| Productionise | Agent Hub | Hand the code to a planning Agent for the rest of the build |
The point of stacking them is that every Agent in every panel sees the same locked Instruction. The design system you chose at step one survives all the way to step four; it is the spine of the workflow, not an afterthought.
6. When to skip /design#
You probably do not need /design if:
- You are working on an internal tool with no brand requirement — the model's defaults are usually fine.
- You want the AI to suggest a system. Ask for "three different visual directions" first, then lock with
/designonce you have picked one. - You are not generating UI in this conversation at all —
/designis a UI-shaping tool.
For every other UI-generation conversation, the cost of running /design is two keystrokes and one pick. The cost of not running it is paying for an afternoon of "make the spacing a bit tighter" follow-ups.
7. Status#
/design is stable and shipped. The 68-system catalogue is part of the default Hydite build. The slash command is registered in every chat input the editor exposes — including third-party Agent harnesses that follow the standard chat-participant contract. Access is gated by a Hydite OAuth invite — see the Hydite overview.
8. Next steps#
- Design overview → — how the three design surfaces fit together.
- Omni Design → — the AI-native design studio that visualises this catalogue and produces the first frame.
- High Design → — the code-aware canvas for pixel-level refinement.
One line. Most "match this design system" prompts fail because the AI forgets.
/designmakes the AI remember — for one keystroke, for one conversation, for every Agent that joins it.