The design system your Codex agent drops into your project.
Codex writes great code. SaaS Design makes it look great too. Download the code and your agent drops a complete design system plus finished SaaS screens into your project, so your app stops looking AI-generated. Want a finished layout to start from? Browse the Codex templates.
Install the SaaS Design Cloud template into my app folder.Works 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 drops in. 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 design 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.
Three steps, start to finish
Download the code
Buy and download the templates as React, Vue, and HTML from your account. No config files, no design decisions to make.
Add the folder and ask Codex
Add the unzipped folder to Codex and ask it to drop in the template you want. It writes the files that fit your stack. 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 adds
A complete set of live components and finished screens, delivered as real code you own. 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 copy-paste prompts for every screen on the prompts page.
Plain code, any AI coding agent
The files work in Codex, Claude Code, Cursor, and any AI coding agent that can read and write files, or you can add them by hand. Pick React, Vue, or plain HTML from the download. The code is yours, with no lock-in and no attribution.
Pick a plan and download the code
Commercial use on every plan. No attribution. The code is yours to keep.
Founder Launch Bundle
For founders, developers, teams & agencies
Limited price · summer special
Lifetime access · one payment, yours forever
For your whole team, no per-seat fees.
- ✓ The complete AI design system + all 9 templates
- ✓ React, Vue & HTML source code, yours to keep
- ✓ Unlimited team members, no per-seat fees
- ✓ Unlimited personal and client projects
- ✓ Commercial license, no attribution required
- ✓ Every template we ever add — included
- ✓ Priority component & feature requests
- ✓ Invoicing available on request
- ✓ Add it with your AI agent (Claude Code, Cursor, Codex)
- ✓ Lifetime access, one payment, no subscription
14-day money-back guarantee. One-time, no subscription.
Secure checkout via Stripe · All paid tiers allow commercial use · No attribution required
Common questions
What is the best design system for OpenAI Codex? +
SaaS Design. It is a complete design system you download as React, Vue, or plain HTML code (all on Tailwind CSS) and your Codex agent drops into your project. 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 $19, a one-time payment.
How do I add a design system to a Codex project? +
Buy SaaS Design and download the templates from your account. Add the unzipped folder to Codex and ask it to add the template you want, for example: 'Install the SaaS Design Cloud template into my app folder.' Codex copies the files in and wires up the tokens and dependencies. 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 and write files works, including the Codex CLI and Codex in ChatGPT. The same files also work in Claude Code, Cursor, and similar AI coding agents, or you can add them by hand.
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 a complete design system 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 drops 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? +
All three are in the download: 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 $19 one-time for the full system (a founding member price), with unlimited team members and unlimited projects. You own the code your Codex agent writes, with no attribution required.
Give Codex a design system to drop in
Get the code and let Codex drop the full system into your project. From $19, one-time (special founding member price).