Is the output compatible with frameworks like React or Vue?

Absolutely. The output uses standard CSS custom properties (variables) that are framework-agnostic and work in any modern web environment.

Can I provide my own brand colors?

Yes, you can input your specific brand colors, and the skill will generate the full semantic palette and complementary tokens based on those values.

Does this skill support dark mode?

Yes, the skill generates a semantic color system with built-in light and dark mode support using the prefers-color-scheme media query.

What design principles does it follow?

It follows modern best practices including fluid typography, semantic naming (not raw values), and a standardized 4px/8px spacing grid for visual harmony.

Design System Architect

Name: Design System Architect
Author: bdmorin

bybdmorin

•

デザインツール

Generates comprehensive, production-ready CSS design systems with semantic tokens and responsive scales.

This skill transforms high-level requirements or design concepts into a fully functional, scalable CSS design system. It establishes a robust foundation for modern web projects by defining semantic color systems with native light and dark mode support, fluid typography using modern CSS clamp functions, and consistent spacing and component tokens. It is an essential tool for developers and architects who need to bridge the gap between design theory and production code while maintaining high standards for accessibility and maintainability.

主な機能

011 GitHub stars

02Semantic color system with automatic light and dark mode support

03Fluid typography scales using modern CSS clamp() functions

04Copy-paste ready CSS custom properties for immediate implementation

05Ready-to-use component tokens for buttons, cards, and inputs

06Standardized 4px/8px base spacing and sizing scales

ユースケース

01Migrating legacy hardcoded styles to a centralized, token-based design system

02Rapidly prototyping brand-consistent interfaces for enterprise projects

03Bootstrapping a new web application with a professional CSS foundation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bdmorin/the-no-shop create-design-system

For use in Claude.ai and ChatGPT

主な機能

011 GitHub stars

02Semantic color system with automatic light and dark mode support

03Fluid typography scales using modern CSS clamp() functions

04Copy-paste ready CSS custom properties for immediate implementation

05Ready-to-use component tokens for buttons, cards, and inputs

06Standardized 4px/8px base spacing and sizing scales

ユースケース

01Migrating legacy hardcoded styles to a centralized, token-based design system

02Rapidly prototyping brand-consistent interfaces for enterprise projects

03Bootstrapping a new web application with a professional CSS foundation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bdmorin/the-no-shop create-design-system

For use in Claude.ai and ChatGPT