58 Design Systems for AI

What you need

1. 1

   Step 1

   Install the design systems

   Open Claude Code and type this prompt:

   PromptCopy

   Clone awesome-design-md from GitHub into this project

   Repo link: github.com/VoltAgent/awesome-design-md

   This installs 58 design systems from companies like Stripe, Apple, Linear, Figma, Notion, Raycast, SpaceX, and more.

   Mark as done
2. 2

   Step 2

   Browse and pick a design system

   In your file explorer (left sidebar), open the design-md folder. You'll see 58 company folders.

   Each folder contains:

   • DESIGN.md - the full design system (colors, fonts, components, spacing, shadows)
   • preview.html - visual preview of the design system
   • preview-dark.html - dark mode preview

   To see how a design system looks, right-click the preview.html file and open it in your browser (not your code editor).

   Browse a few, then pick the one that matches the style you want for your project.

   Mark as done
3. 3

   Step 3

   Copy the DESIGN.md into your project

   Copy the DESIGN.md file from the company folder you chose into your project root. That's it - your AI agent can now read the entire design system.

   Mark as done
4. 4

   Step 4

   Build your website

   Tell Claude Code what you want to build. For example:

   PromptCopy

   Build me a landing page for a film studio using this design system

   The AI reads the DESIGN.md and follows every detail - right colors, right fonts, right spacing, right components.

   Want changes? Just describe them and it updates instantly.

   Mark as done

Bonus - Fix generic layouts with the Taste Skill

Available design systems (58 total)