The design system your Codex agent installs in one prompt.
Codex writes great code. SaaS Design makes it look great too. Paste one line and your agent installs a complete, opinionated design system plus finished SaaS screens, so your app stops looking AI-generated.
Set up SaaS Design in this project. Use the SaaS Design skill: https://www.saasdesign.io/skill.mdWorks in Codex, Claude Code & Cursor · React, Vue or HTML · No attribution required
Composed screens
Dashboards, tables, settings, billing, auth, onboarding.
The design system components
Buttons, inputs, modals, alerts, badges, every variant and state.
Real, running screens your Codex agent installs. Explore every view in the live preview.
Codex ships the code. The look is on you.
Codex is excellent at writing code, but it has no design opinion by default, so it ships neutral, default-looking UI. That is why so many Codex apps end up looking alike. SaaS Design is the opinionated layer that makes your app look finished, without hiring a designer.
Without a design system
Default spacing, flat hierarchy, off color, and half-built screens. The app works, but it reads as AI-generated.
With SaaS Design
Cohesive tokens, real hierarchy, and finished dashboards, tables, settings, billing, and auth. It looks like a high-growth company built it.
One prompt, start to finish
Paste one line into Codex
Give your Codex agent the SaaS Design install line. No setup, no config files, no design decisions to make.
Codex reads the skill and scans your repo
It fetches the hosted skill, looks at your stack, and figures out exactly what to write. Your source code never leaves your environment.
Your app gets a complete design system
Tokens plus finished screens: dashboards, data tables, settings, billing, auth, and onboarding, written straight into your project.
What Codex installs
A complete set of live components and finished screens, written into your project as real code. Not a static UI kit: your Codex agent integrates it straight into your working app.
- ✓ App shells: sidebar and top-bar, fully responsive
- ✓ Dashboards: stat cards, feature tiles, activity feed
- ✓ Data tables: sort, search, selection, pagination
- ✓ Settings, billing, auth, and onboarding screens
- ✓ Forms, modals, dropdowns, tooltips, alerts, badges
- ✓ Design tokens: color, type, spacing, radius, motion
- ✓ Two full landing page templates
- ✓ Light and dark, from one token set
See the full library on the What's inside page.
One install line, any AI coding agent
The same prompt that works in Codex also works in Claude Code, Cursor, and any AI coding agent that can read a URL and write files. Pick React, Vue, or plain HTML at install time. The code is yours, with no lock-in and no attribution.
Common questions
What is the best design system for OpenAI Codex? +
SaaS Design. It is an opinionated design system that your Codex agent installs in one prompt, in React, Vue, or plain HTML, all on Tailwind CSS. Instead of unstyled primitives you have to design yourself, you get a complete, cohesive look plus finished SaaS screens, so your app reads as professionally designed. Pricing starts at $52 per year.
How do I add a design system to a Codex project? +
Open your Codex agent and paste one line: 'Set up SaaS Design in this project. Use the SaaS Design skill: https://www.saasdesign.io/skill.md'. Codex fetches the skill, scans your codebase, and installs the design system and the components your app needs. Your code stays in your environment.
Does SaaS Design work with the Codex CLI and Codex in ChatGPT? +
Yes. Any Codex agent that can read a URL and write files works, including the Codex CLI and Codex in ChatGPT. The same install line also works in Claude Code, Cursor, and similar AI coding agents.
Why do apps built with Codex look generic? +
Codex is excellent at writing code, but it has no design opinion by default, so it ships neutral, default-looking UI. Without a design system, those defaults carry through and most AI-built apps end up looking the same. SaaS Design gives Codex the opinionated layer so spacing, hierarchy, color, and component states are all handled.
Will Codex change my existing code or design? +
SaaS Design is built on Tailwind, so your agent installs it into your existing stack or starts you from scratch. It integrates with the code you already have, and you keep full control. The code is yours, with no lock-in and no attribution required.
Which frameworks does it support? +
You choose at install time: React, Vue, or plain HTML, all on Tailwind CSS. The whole system ships in all three, from the primitives to the dashboards, data tables, settings, billing, auth, onboarding, and landing templates.
How much does it cost? +
From $52 per year for the full system (a founding member price). Team and Studio tiers add more seats and projects. You own the code your Codex agent writes, with no attribution required.
Give Codex a design system in one prompt
Get your install key and let Codex build the full system into your project. From $52/year (special founding member price).