Design Systems

HeroUI Pro Design Systems turns your brand into a working UI foundation. Import an existing website or start from scratch, refine tokens and components with a live preview, keep brand guidance and assets together, then use the result in AI Chat or export it to your project.

What's New

• Import your website — Start with a URL to extract your logo, colors, typography, brand voice, and visual assets, then generate a HeroUI design system from them
• Build from scratch — Define your identity and choose a visual direction through a guided setup
• Design with a live preview — Customize colors, fonts, radius, borders, shadows, spacing, and component styles while seeing the system update in real time
• Keep the brand together — Manage identity, guidelines, and assets from the new General, Guides, and Assets workspace
• Use it in AI Chat — Select a saved design system when starting a chat, apply one later, and sync updates from the builder
• Export for code and AI — Generate Web CSS, Native CSS, DESIGN.md, and PRODUCT.md, or let an AI agent import the system through the HeroUI Pro MCP server

Start With Your Brand

Create a design system in one of two ways:

1. Import a website — Paste a URL and HeroUI extracts the brand foundation, including colors, fonts, logos, imagery, and written identity
2. Start from scratch — Add your name and logo, choose your colors and typography, then select a UI direction

The generated system is only a starting point. Review the imported identity, choose the direction that fits your product, and adjust every detail in the editor.

Brand and UI in One Workspace

Design Systems combines the theme editor with a dedicated brand workspace:

• General — Brand identity, logo, website, description, audience, and tone
• Guides — Color, typography, spacing, radius, shadow, and iconography guidance
• Assets — Logos, product imagery, illustrations, and other reusable brand files

Your tokens, component styles, brand guidance, fonts, and assets stay attached to the same saved system.

Bring Design Systems Into AI Chat

Choose a design system before starting a new AI Chat, or apply one from the design system panel later. The builder receives the saved colors, fonts, component styling, brand guidance, and assets so generated interfaces begin on-brand.

When the source design system changes, use Sync to bring the latest version into the chat. Editing the theme directly inside a chat detaches it from the saved system, keeping the original design system as the source of truth.

Export to Any Project

The code panel now provides four outputs:

• Web CSS — HeroUI variables, fonts, and component overrides for React projects
• Native CSS — Uniwind-ready variables for HeroUI Native
• DESIGN.md — Visual language and implementation guidance for designers and AI agents
• PRODUCT.md — Product context, audience, voice, and brand direction

You can also copy the MCP prompt from the editor. With the HeroUI Pro MCP server connected, your AI agent uses get_design_system_manifest and get_design_system_export to inspect the saved design system and adapt the recommended outputs to the current project.

Availability

Everyone can create one Design System for free. An active HeroUI Pro license or team workspace unlocks unlimited Design Systems.

Existing Style Guides are now called Design Systems. Previous /styles and /themes links redirect to the new /ds experience.

Get Started

• Open Design Systems
• Create a Design System
• Set up the HeroUI Pro MCP server
• Read the theming guide