Edit a saved Design System in chat, then sync Web CSS, Native CSS, DESIGN.md, and PRODUCT.md through MCP.
Open a Design System and ask for a change. HeroUI Agent reads the current draft and applies tokens, component CSS, brand, and assets immediately. Every patch is undoable and autosaved (#1275).
When the system is ready, copy a sync prompt from the export drawer. Your coding agent uses the HeroUI Pro MCP server to pull the same outputs into a local project.
get_design_system_manifestThe editor chat is a hosted HeroUI Agent with three tools: read the draft, apply a patch, or extract branding from a website.
It sees the current tokens, component styles, brand, and assets before it edits. Locks and manual edits stay in place. Stale revisions are rejected, so two tabs cannot overwrite each other blindly.
The chat is available to eligible Pro owners. It uses sponsored usage. You do not need a personal Agents subscription or credits.
The export drawer still ships four outputs. What changed is how you hand them to an agent.
The header now has Copy sync prompt, or Save & copy prompt if the draft is dirty, plus a chevron menu for MCP setup. The copied prompt tells the agent to inspect the project first, then fetch only the outputs it needs.
| Output | File | Purpose |
|---|---|---|
css | globals.css | Web CSS: HeroUI variables, fonts, and component overrides |
native-css | global.css | Uniwind-ready variables for HeroUI Native |
design | DESIGN.md | Visual language and implementation notes |
product | PRODUCT.md | Audience, voice, and brand direction |
Use the HeroUI Pro MCP to import design system YOUR_DESIGN_SYSTEM_ID. Start with get_design_system_manifest, inspect this project, then fetch and adapt the recommended outputs with get_design_system_export. Use its saved tokens, brand guidance, fonts, and assets as the source of truth. Do not overwrite unrelated local files without asking.You can also call the tools directly:
get_design_system_manifest({ designSystemId: "YOUR_DESIGN_SYSTEM_ID" })get_design_system_export({
designSystemId: "YOUR_DESIGN_SYSTEM_ID",
outputs: ["css", "design", "product"]
})Recommended outputs for most React projects: css, design, and product. Add native-css for HeroUI Native.
Component CSS applies to web previews and the Web CSS export. Native projects receive the supported theme tokens.
The editor agent is HeroUI Agents pointed at a design system. You can embed that same agent in your own app: page context, your tools, approval gates, and generated UI for the task.
1.0.0-beta.9
New HoloCard 3D tilt component, a PromptInput token input for inline mentions and commands, HoverCard and ContextMenu rebuilt on React Aria primitives, a secondary RichTextEditor surface and slash menu fixes, a GPU-composited TextShimmer, RouterProvider navigation for ListView and Sidebar links, Safari and Glass theme fixes, and dependency bumps to HeroUI 3.2.5 and React Aria Components 1.21.0.
HeroUI Chat on the edge
Faster generation, instant static previews, resumable sessions, in-chat theme editing, and separate HeroUI Pro and HeroUI Chat workspaces.