Graphical UI

A tool to create visual themesthemesthemessystemslanguages, customize colorscolorscomponentscolorstypespacingiconseffectsstatesmotion, and build interfaces with ChatGPTChatGPTChatGPTClaudeCursorGrokanything.

Select a highlighted word to explore another option.

Overview

Projects

Inbox8

Team

Settings

Page

Company

California

Roles−2+

Admin

ThemeEdit

StyleFelt

Character

AiryQuietBoldCompact

MotionSnappy

Color

NeutralsMono

Primary actionNeutral

Typography

LicensedGT Standard

Icons

LicensedCentral

ThemeComponents

Download it directly, or install via shadcn

my-app — zsh

my-app %

⠋Checking registry.

⠋Updating files.

Build beautiful interfaces with the agent you already use.

Build Stations

For each feedback topic, I want to see how often it’s coming up and hear what customers are saying. Show the trend and a short summary of each clip, with who said it. Let me save the topic or play through the highlights.

Your preview is ready.

Ask for a change…

Messages

Stations

Kudos

Profile

All stationsWeek

13% vs last week

Bugs & technical issues

Conversations about the little things getting in the way of great work.

Jamie Lee

123A complete design language.

Colors

Brand colors, neutrals, and status colors for surfaces, text, and controls.

Light and dark

Separate color values for light and dark mode, in one theme.

Typography

Font families, weights, sizes, and line heights for interface text and data.

Spacing and scale

A shared scale for component sizes, padding, and gaps.

Icons

Choose the family and style that fits your theme.

Shape and effects

Corner radii, strokes, and shadows for component shape and depth.

Component states

Customize interactive states of Base UI components in Graphical.

Motion

Springs, easing, and timing for button presses, menus, and other interactions.

Your theme

Your colors, typography, and styles, ready to install with shadcn or download directly.

Real components

React components built on Base UI, ready to use and customize.

Context for your agent

GUI.md, detailed theme references, and skills for building, adapting, and reviewing your interface.

Get our theme builder, launch collection of styles, and foundation components. Use them in unlimited projects, with ongoing updates to the theme builder included.

FAQ

Who is Graphical for?

Graphical is for designers, developers, and anyone building an app with a coding agent. Choose a theme, make it yours, and give your agent the theme files and skills to apply it to existing screens and guide new ones.

The theme builder, 5 customizable styles, theme tokens, and React component source. Each download includes GUI.md, detailed theme references for light and dark mode, setup instructions, and three coding-agent skills.

Yes. Customize one of the 5 included styles, or start with your own colors, typography, spacing, and styles.

Download your theme resources and share them with your coding agent along with the included setup prompt. Once set up, describe what you want to build. GUI.md and the project skills guide your agent in creating new screens, applying your theme to existing UI, and finding and fixing inconsistent styles.

Graphical includes a visual editor for Base UI components, with React source ready to use. Your theme and agent skills provide a design language you can apply across component libraries, frameworks, and languages.

No. The theme editor allows you to visually edit Base UI components, but you can use your theme files with any framework, component library, or language.

Cream onboarding, Charcoal weather, Frosted industry list, Outline icons, Test and deploy table, Rewards slider, Activity chart, Reply comment, Voice message, Dark AI workspace menu.

Which of these skills do you have?Continue

—° nowin your cityfeels —°locating…

Which of these skills do you have?Continue

—° nowin your cityfeels —°locating…

TestDeploy3$0.0281.0s4.1YES2$0.0281.1s3.8YES1$0.0281.2s3.5NO

Rewards multiple321×

1.2 KB/min4:07pm2:20 PM11:40 PM

@Scott can you take a look? I’d love a second set of eyes.Yep, I’m on it!

Overall I like the new updates to sharing, but I had an idea because I can’t figure out who has access Sarah

Ask AIAdd to projectDuplicateArchiveRenameShareAutomationsWorkspace

FintechHealthcareEducationRetailMediaTravelReal estateEnergyLogistics

TestDeploy3$0.0281.0s4.1YES2$0.0281.1s3.8YES1$0.0281.2s3.5NO

Rewards multiple321×

1.2 KB/min4:07pm2:20 PM11:40 PM

@Scott can you take a look? I’d love a second set of eyes.Yep, I’m on it!

Overall I like the new updates to sharing, but I had an idea because I can’t figure out who has access Sarah

Ask AIAdd to projectDuplicateArchiveRenameShareAutomationsWorkspace

Cream onboarding, Charcoal weather, Frosted industry list, Outline icons, Test and deploy table, Rewards slider, Activity chart, Reply comment, Voice message, Dark AI workspace menu.

Which of these skills do you have?Continue

—° nowin your cityfeels —°locating…

FintechHealthcareEducationRetailMediaTravelReal estateEnergyLogistics

TestDeploy3$0.0281.0s4.1YES2$0.0281.1s3.8YES1$0.0281.2s3.5NO

Rewards multiple321×

1.2 KB/min4:07pm2:20 PM11:40 PM

@Scott can you take a look? I’d love a second set of eyes.Yep, I’m on it!

Overall I like the new updates to sharing, but I had an idea because I can’t figure out who has access Sarah

Ask AIAdd to projectDuplicateArchiveRenameShareAutomationsWorkspace

Which of these skills do you have?Continue

—° nowin your cityfeels —°locating…

FintechHealthcareEducationRetailMediaTravelReal estateEnergyLogistics

TestDeploy3$0.0281.0s4.1YES2$0.0281.1s3.8YES1$0.0281.2s3.5NO

Rewards multiple321×

1.2 KB/min4:07pm2:20 PM11:40 PM

@Scott can you take a look? I’d love a second set of eyes.Yep, I’m on it!

Overall I like the new updates to sharing, but I had an idea because I can’t figure out who has access Sarah

Ask AIAdd to projectDuplicateArchiveRenameShareAutomationsWorkspace

Created with care in California by Josh Puckett & Adam Michela