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.
Solo (All Access)
Great for founders, developers & freelancers
Lifetime access · one payment, yours forever
The full system, yours forever.
- ✓ Complete AI design system
- ✓ 9 beautiful React, Vue & HTML templates
- ✓ Lifetime access, one payment
- ✓ Commercial license approved
- ✓ Use it in unlimited projects
- ✓ Unlimited use in client projects
- ✓ Dashboard & landing page templates
- ✓ Full component library
- ✓ Your choice of React, Vue, or HTML at any given time
- ✓ Add it with your AI agent (Claude Code, Cursor, Codex)
- ✓ All future components & updates included
30-day money-back guarantee. One-time, no subscription.
Team (All Access)
Great for startups and teams
Lifetime access · one payment, yours forever
The full system, for your whole team.
- ★ Everything in Solo, plus:
- ✓ Up to 7 seats for your team
- ✓ One license key for the whole team
- ✓ Unlimited client projects
- ✓ Priority component & feature requests
- ✓ Invoicing available
- ✓ Priority support, faster responses
30-day money-back guarantee. One-time, no subscription.
Agency (All Access)
Great for agencies shipping client SaaS at scale
Lifetime access · one payment, yours forever
The full system, unlimited seats.
- ★ Everything in Team, plus:
- ✓ Unlimited seats across your agency
- ✓ Unlimited client projects
- ✓ Top of the queue for component & layout requests
- ✓ Roadmap input for new features
- ✓ Onboarding session for your team
- ✓ First access to everything we ship
30-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). Team and Agency tiers add more seats and 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).