Design systems in Wire

Design System Guidelines

Design System Guidelines are the foundation of your design system, written for AI. You define colors, typography, and rules for how things should look and behave.

Wire uses the guidelines as the base when it builds screens or a full component library. The more clearly they describe your look, the more accurate and consistent the results are.

Ways to start

When you create guidelines, you pick how to start. You can fine-tune everything afterwards.

• From website URL. Wire analyzes a live website.
• From a prompt. You describe the look and let AI design it.
• From files. Upload CSS, JSON tokens, or a PDF.
• From scratch. You build it by hand.

What guidelines cover

• Overview. A name, a description of the look, and do's and don'ts.
• Colors. Light and dark palettes with editable color tokens.
• Typography. Fonts, a type scale, and weights, sizes, and line heights per text style.
• Shapes. Borders, shadows, and elevation.
• Components. Tokens for elements like inputs, checkboxes, and radio buttons, plus custom sections for rules that tokens can't hold.
• Layout, motion, and breakpoints. Layout widths, animation durations and easing, and screen breakpoints.

A live preview next to the editor shows your changes right away, in light and dark mode.

How to create design system guidelines

1. Open the UXPin Wire Dashboard, click New build and in the prompt box select Guidelines dropdown at the bottom.
2. Click a plus + icon and start creating design guidelines.
3. Pick how to start: From website URL, From a prompt, From files, or From scratch.
4. If you start from a prompt, describe the look you want. Then click Generate. UXPin Wire designs your system.
5. Fine-tune your guidelines in the tabs: Overview (name, description, do's and don'ts), Colors, Typography, Shapes, Components, and Finish (layout, motion, and breakpoints). A live preview shows each change in light and dark mode.
6. Click Save changes.

Saved guidelines are preselected automatically. They appear in the guidelines dropdown in Forge, both in Wire and in the Editor.

Build a design system

Based on your guidelines, Wire creates a full component library with tokens. You can also start by describing what you want or by pasting URLs, but the best results come from having guidelines first.

The library is saved as a Merge library, so you can use it in the Editor and with AI.

What you can do

• Generate a full component library with tokens. Wire builds the library from your guidelines.
• Save it as a Merge library. The design system is ready to use in the Editor and with AI.
• Build new components with Wire. Add components to the library as your system grows.
• Change the theme manually, without AI. Adjust tokens yourself when you want exact control.
• Keep everything in sync. After you publish a new library version, all components update automatically: in the library, in your Wire builds, and in prototypes on the Editor canvas.

Create a design system from your guidelines

1. In the Wire Dashboard, click New build and choose Design system.
2. Select your guidelines in the dropdown under the prompt box.
3. Describe what you want. For example: Using the design system guidelines, create a complete component library for Sorbet, a beauty e-commerce store.
4. Wire builds the library with tokens, a DESIGN.md, and the components. Review them in the documentation site.

Publish the library

Publish the components of your design system as a Merge library. They become available in the Editor and in Forge, and you can use them in UXPin Wire.

1. Click Publish library.
2. Confirm in the Publish as Merge library dialog. Wire creates a Merge library named after your project and uploads its components. Every later publish adds a new revision.

After you publish, updates reach every place the components are used: your Wire builds and the prototypes on the Editor canvas.

Change the theme

Restyle the whole library manually, without AI, in the Theme panel. Change tokens such as colors, typography, shape and density, or shadows. Publish the library again to apply the changes everywhere.

Add new components

Ask Wire to build new components for your library. They join the library the next time you publish it.

Use the library in the Editor

Once published, the library appears in the library list in the Editor, and you can use it in Wire too. Prototype on the canvas, generate UI with Forge, or build working apps in Wire.

In the Editor: drag components from the library

1. In the Editor, open the library dropdown and choose your library.
2. Drag a component from the library onto the canvas. It uses your updated theme.

Generate UI with Forge

1. In the Editor, in the Forge chat, choose your library in the dropdown.
2. Describe what you want. For example: create a hero section.
3. Forge generates the UI with your library's components. Click Use component to add it to the canvas, or Show code to see the code. You can keep refining it with Forge, or open it in Wire to turn it into a working app.

In Wire: build apps with your library

1. In the Wire Dashboard, click New build and choose App.
2. Select your library in the dropdown under the prompt box, then describe the product you want to build.

Flow audit in Wire

The flow audit gives you an overview of your flow. You can see which screens use which tokens and where links are broken, then fix the issues with AI or manually.

What you can see

• Flow overview. All the screens of your flow in one place.
• Tokens used per screen. Check that each screen follows your design system.
• Broken links. Find links that don't lead anywhere.

Fixing issues

Fix what the audit finds with Forge, or edit it yourself. Use AI when you want a quick fix across several screens, and manual edits when you want exact control.