Graphical

Graphical is a theme builder for designers and developers who build interfaces with a coding agent. Instead of describing a look in a prompt and hoping the agent stays consistent, you set the design language visually: colours, typography, spacing and scale, icons, corner radii, strokes, shadows, component states and motion. You then hand the result to the agent as files it can follow. Josh Puckett and Adam Michela make it.

What you get

The site describes three parts. Your theme holds the tokens, with separate light and dark values in one theme, and you can install it with shadcn or download it. Real components are React components built on Base UI, and the visual editor lets you adjust their interactive states. Context for your agent is a GUI.md file, detailed theme references, setup instructions and three coding-agent skills. Together they cover building new screens, applying the theme to existing UI, and finding and fixing inconsistent styles. You can start from one of five included styles or from your own colours and type.

The agent context is the interesting design choice. A token file alone tells an agent what the values are. GUI.md and the skills try to tell it how to use them, so that a new screen and a restyled old screen come out in the same visual language.

Getting started

On the homepage, switch between the highlighted examples to see how one theme changes components such as a payment card, a navigation list and a settings panel. Graphical is a paid, one-time purchase, so check the current price and terms on the site before you commit. After purchase, build or adapt a theme, then install it through the shadcn registry flow or download the files. Give the files and the included setup prompt to your coding agent, and then describe the screen you want.

A good first test is an existing screen, not a new one. Ask the agent to apply the theme to one real page, then use the review skill to find leftover inconsistent styles. Compare the result in light and dark mode and in the interactive states (hover, focus, disabled) before you roll the theme out further.

Practical limits

The visual component editor works with Base UI components on the web. The publisher says you can use the theme files with any framework, component library or language, and with native iOS or Android apps through your agent. Outside the web, however, the agent does the translation, so review the result. The demo theme uses a commercial typeface marked "Licensed", so confirm that you hold the rights to any font your theme specifies. This guide reviews the public site only: no purchase was made and the generated files and skills were not tested. Treat the feature descriptions as publisher claims.

Example use cases

Suggested application — restyle an agent-built prototype: Apply one theme to screens that different agent sessions produced, then run the review skill to catch drift.
Suggested application — light and dark parity: Define both modes in one theme and check that charts, tables and form states stay readable in each.
Suggested application — handoff to a team: Share the same GUI.md and theme files across repositories so that several people's agents build in one visual language.

Graphical.