Resources / Design Systems

Design Systems,
Ready for Your Agent.

Explore palettes, typography, components, layout, and complete design guides. Compare a visual direction, read its rules, and bring the right reference into your next project.

152 Existing Guides126 New GuidesDESIGN.md + Token References

Explore Design Systems and Visual Styles

278 catalog entries

From Reference to Interface

Build a Screen With a Design System

01

Compare the Whole System

Look beyond the accent color. Compare the type, spacing, components, and layout against the kind of interface you are building.

02

Read and Share the Guide

Give your agent the design rules and a concrete task. Keep the source and your project's existing constraints together.

03

Review Before You Extend

Check real content, component states, keyboard use, and a narrow screen before applying the direction across your project.

Make It Your Own

Extract a Design System With OpenDesign

Start with a website you admire or a design you have already made. Turn its visual decisions into a system you can inspect, refine, and use again.

A website and a design canvas feed into an organized sheet of colors, type, spacing, and components.

From a Website

Add a website link in Design Systems. OpenDesign reads the available page styles and assets to assemble a palette, typography, and reusable design guidance. Review the result and refine it with your Agent.

From a Design You Created

Choose Create Design System from your project’s More menu. OpenDesign creates a new design-system project from the existing files, then asks your Agent to extract its visual rules, components, and patterns.

A System You Can Keep Building With

Inspect the design rules, style tokens, and UI previews. Refine the generated package before using it as the starting point for your next design.

  • DESIGN.md
  • CSS / Tokens
  • UI Kit

Connect Your Workflow

Take Your Design System Further

Build With OpenDesign

Bring Your Design System to Life.

Choose a guide, give your agent a clear brief, and build your next interface with OpenDesign.