Log in GO PRO NOW
GO PRO NOW
Want your workflow in The Rundown? Share it

Guides Shadcn

Build Your Own Design System For AI

Learn how to use ShadCN with Codex, or Claude Code, to create a custom design system and use it to build a simple portfolio website.

beginner 6 steps

Introduction

Learn how to use ShadCN with Codex, or Claude Code, to create a custom design system and use it to build a simple portfolio website. This workflow helps simplify project setup so you can reuse a stronger component and design foundation, with a short PRD planning pass that can take about 5 minutes.

Browse ShadCN components and blocks to find the ones you like best, then use markdown and multiple-choice prompts to go back and forth with your AI agent.

Step-by-step 6 steps

Instructions

  1. Step 1 of 6

    Customize your ShadCN design system

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

    shadcn_dropdown
  2. Step 2 of 6

    Create the project command and save it

    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.

  3. Step 3 of 6

    Scaffold and run your new site

    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.

  4. Step 4 of 6

    Add your design system instructions to your agent

    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.

    shadcn_customcommand

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

  5. Step 5 of 6

    Plan and generate the portfolio with a PRD

    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.

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

    Now prompt your AI agent with the PRD:

    Prompt 
    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.
    shadcn_portfolio_example

    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.

    shadcn_billyhq

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

    Prompt 
    What ShadCN component should I use? Where should I put them?
  6. Step 6 of 6

    Go further with Context7 and charts

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

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

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

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

You're done

That's the whole workflow

Mark it complete to save your progress. Background and answers to common questions follow below.

Keep going

Keep learning with Rundown Pro

A guide shows you one workflow. Pro opens the full course library, so you can learn the whole system behind it.

  • Every on-demand course
  • Certifications on completion
  • Group office hours and member perks

$29/mo, cancel anytime

Overview Back to the steps

Background and context

Who This Is Useful For

  • Vibe coders who struggle with design systems
  • Non-designers who want better color palettes and components for their website
  • Anyone who wants to build a simple portfolio site

What You Will Build

shadcn_design

You’ll build a custom ShadCN design system and use it as the foundation for a simple portfolio website.

  • A custom design system with cards, buttons, and reusable components
  • A new app scaffold using your selected stack
  • A portfolio site generated from a PRD and your design system instructions

What You Need

  • Cursor
  • Codex or Claude Code
  • Context7 agent skill, optional but recommended

Going Further

  • Reuse the saved ShadCN preset link and instructions in future projects.
  • Browse ShadCN components and blocks to find components you like best.
  • If you have Context7 installed, tell your agent to look for ShadCN components before building new UI.
  • Add ShadCN charts to track portfolio progress.
$29 billed monthly · cancel anytime
Go Pro