Create and maintain your brand, customize HeroUI themes, and use your design system in AI Chat or export it to your project.
A Design System keeps your HeroUI theme, component styles, brand guidance, fonts, and assets together. Create one from an existing website or build it from scratch, then use it in AI Chat or export it to a React or HeroUI Native project.
Open Design Systems to manage your saved systems, or create a Design System.
Sign in to save a Design System. The setup offers two starting points:
Review imported content before using it. You can refine the theme and brand details in the editor after creation.
Open a saved system and use the Style and Variables controls to adjust colors, typography, radius, spacing, borders, shadows, and other theme settings. If the settings are hidden, select Show panel.
Component CSS affects web previews and the Web CSS export. Native CSS includes supported theme tokens, not web component overrides.
For CSS import order and theme variants, see Theming. For token usage in code, see Colors and Styling.
Open the Brand preview to maintain the context that accompanies your theme:
These details stay attached to the saved system and provide context for AI Chat and the documentation exports.
Use Ask the agent for changes… in the editor to describe an update to the current system. For example:
The agent can read the current draft, update theme tokens and component styles, edit brand details and assets, and import branding from a website. Review the result in the preview. Locked settings remain protected.
The editor agent requires HeroUI Pro access and ownership of the saved Design System. Its usage is sponsored; you do not need a separate HeroUI Agents subscription or personal Agents credits.
Editable saved systems autosave changes, including agent edits. Use Undo to restore an earlier edit or Redo to reapply it. If saving fails, resolve the displayed error before relying on the saved version in another tool.
Select a saved Design System when starting an AI Chat, or apply one from the chat's design system picker. The chat uses its theme, component styling, brand guidance, fonts, and assets.
When you update the source system, use Sync in the chat to bring in the latest saved version. The chat may also offer Sync latest updates when changes are available.
Editing the theme inside a linked chat detaches that chat from the saved Design System. To keep the link, edit the source system and sync it into the chat instead. Chat-specific edits do not update the original system.
Select Code in the editor, choose an output, and copy or download it:
| Output | Download | Use |
|---|---|---|
| Web CSS | globals.css | HeroUI variables, fonts, and component overrides for web projects |
| Native CSS | global.css | Supported Uniwind-ready variables for HeroUI Native |
| DESIGN.md | DESIGN.md | Visual language and implementation guidance |
| PRODUCT.md | PRODUCT.md | Product context, audience, voice, and brand direction |
For web projects, integrate the exported CSS into your existing stylesheet, preserving the required import order. For Native projects, follow the Native Design Systems guide. Keep the Markdown outputs with your project when you want designers or coding agents to use the saved guidance.
In Native CSS, select View preview to inspect the supported theme before exporting.
If saving fails, the editor displays an error instead of copying a prompt for stale data. If clipboard access fails, copy the displayed prompt manually.
See Import a Design System for the get_design_system_manifest and get_design_system_export tool contracts and examples.
You can create one Design System for free. An active HeroUI Pro license or active team workspace unlocks unlimited Design Systems. The editor agent has the additional Pro access and ownership requirements described above.
