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.
published jan 26, 2026
Build Your Own Design System for AI
beginnerThe Rundown
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
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.
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.