skills.rest
amdmax
amdmaxCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Generate design systems with tokens, components, layout, and CSS architecture.

2|Updated Jan 30, 2026
Search Tags:#accessibility#design system#ui/ux#component library#design tokens#css architecture
One-click install
npx skills add https://github.com/amdmax/claude_marketplace --skill design-system-amdmax
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/amdmax/claude_marketplace/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/amdmax/claude_marketplace --skill design-system-amdmax

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of comprehensive, award-winning design systems, ensuring consistency, accessibility, and a strong brand identity across digital products.

Core Features & Use Cases

  • End-to-End System Creation: Generates color palettes, typography scales, spacing systems, component guidelines, and CSS architecture.
  • Research-Backed Decisions: Incorporates analysis of award-winning sites, UX patterns, and accessibility best practices tailored to your domain.
  • Use Case: When launching a new SaaS product, use this Skill to establish a robust design system that ensures a cohesive and professional user experience from day one.

Quick Start

Use the design-system skill to create a design system for a new e-commerce platform with a playful brand personality.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a design system from scratch for a new SaaS product?▼

When creating a design system, you need to specify your domain, brand personality, and desired output format. Providing these parameters allows the system to research award-winning UX patterns and generate tailored implementation guidance for your CSS architecture and accessibility standards.

Can I generate accessibility-focused design tokens for an e-commerce platform?▼

Yes, you can generate accessibility-focused design tokens by specifying an e-commerce domain and your desired brand personality. The system incorporates accessibility best practices and analysis of award-winning sites to establish a robust, compliant design token foundation.

What is the best way to establish a CSS architecture and component library for a cohesive brand identity?▼

The best way to establish a CSS architecture and component library is through research-backed decisions that analyze award-winning examples. This ensures your design system maintains a strong brand identity and consistent UI/UX patterns across all digital products.

Does this design system generation process work for a playful brand personality?▼

Yes, the design system generation process works for a playful brand personality by taking your specified brand traits as input parameters. It then generates a customized layout system, typography scale, and color palette that accurately reflects that playful identity.

Related Skills

Explore More Design & Creative Skills→
xlsamaxlsama

teach-impeccable

Analyze project files and user answers to write a Design Context section for CLAUDE.md.

Community
Intermediate
ROYCE-8425ROYCE-8425
1

design-system

Generate and audit design systems from CSS and JavaScript code.

Community
Advanced
jangtrinhjangtrinh

design

Coordinate design tokens, UX psychology, and design-system rules for UI tasks.

Community
Advanced
mikkelkrogsholmmikkelkrogsholm
5

shadcn-ui

Integrate copy-owned React components with Radix UI and Tailwind CSS.

Community
Intermediate