Build Your Own Design System For AI

Navigate to https://ui.shadcn.com/create. Use the dropdowns on the right to create your custom design system.

Click “Create Project” in the top right, then copy the command for the package manager and stack you use.

If you’re not sure which stack to choose, use Next.js + npm.

You’ll get a unique command that looks like this: npx shadcn@latest create --preset "<https://ui.shadcn.com/init?base=radix&style=nova&baseColor=stone&theme=blue&iconLibrary=phosphor&font=inter&menuAccent=subtle&menuColor=default&radius=default&template=next>" --template next

Before you run the command, save it in your notes. You will need the link from it later.

Open a new terminal session and run your command. ShadCN will ask you to name your app, then create a new directory and app scaffold with your custom design system and starter components.

Use cd [folder name] to navigate to the new directory. Then run npm install and npm run dev to run your new site locally.

Open a Codex or Claude session in your new directory. In your Claude.md or Agent.md instructions file, paste the design system instructions from earlier.

To get those instructions, click the link in the command ShadCN gave you and copy them.

Pro tip: Browse the ShadCN components and blocks to find the ones you like best.

Before you start coding, plan the website outside of your code editor. Go into Claude, ChatGPT, or Gemini and ask it to create a PRD in Markdown based specifically on ShadCN components.

Lay out the page in a PRD in Markdown, based specifically on ShadCN components.

Now prompt your AI agent with the PRD:

Create a simple portfolio website for a web developer named [your name] based on the attached PRD. Make the portfolio items easily editable with markdown files. Use ShadCN components and the design system outlined in the Agent.md.

The source example shows a logbook built with a custom theme and a PRD made with Claude. The quality improves when you spend 5 minutes making a PRD instead of asking for a generic portfolio site.

Pro tip: Use the markdown method and multiple-choice method to go back and forth with the AI. Ask it specifically:

What ShadCN component should I use? Where should I put them?

If you have the Context7 skill installed, add this to your Agent.md:

Always use context7 to look for ShadCN components before building new UI.

You can also tell Codex to add ShadCN charts to your project:

Use charts from https://ui.shadcn.com/charts/area to track my portfolio progress.