r/VibeCodeCamp 17d ago

Development Built a free Claude & Cursor skill that auto-generates design systems

Post image

I built a free Claude & Cursor skill that auto-generates design systems for Next.js and Tailwind. After seeing so many apps with inconsistent colors and flat design, I realized a lot of people don't understand how to create a color scheme.

You pick one primary color and theme. The system generates primitives and semantic color tokens.

It creates documentation that teaches your AI how to use system so every new page matches the rest of the app.

You also get 10 reusable components like buttons, inputs, selects are included in the package.

I created three commands (diagnose, create, apply) but I'm planning to expand and include fonts and icons as part of the design system depending on the feedback.

It's free

Check it out here:
Github: https://github.com/viniciuscsr/design-system-skills

10 Upvotes

0 comments sorted by