skills.rest
bengous
bengousCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system-creator

Generate design systems with CSS tokens, typography scales, and accessibility checks.

Updated Apr 16, 2026
Search Tags:#typography#accessibility#components#tokens#design-system#color-palette#moodboard
One-click install
npx skills add https://github.com/bengous/agents-skills --skill design-system-creator-bengous
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-creator
Source: https://github.com/bengous/agents-skills/tree/main/design-system-creator
Command: npx skills add https://github.com/bengous/agents-skills --skill design-system-creator-bengous

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Helps teams and creators move from vague visual direction to a single, implementable design system that developers and AI agents can use directly, eliminating guesswork about colors, typography, tokens, components, and accessibility requirements.

Core Features & Use Cases

  • Anchoring-first methodology: derives palette, typography, and component decisions from a concrete physical or sensory anchoring to ensure specificity and avoid generic templates.
  • Complete token and component output: produces CSS tokens, responsive typographic scale, spacing system, component CSS (buttons, cards, nav, forms), and absolute rules that enforce consistency.
  • Accessibility & delivery: includes WCAG contrast checks, focus/interaction rules, reduced-motion handling, and a copy-pasteable :root token block; ideal for new projects, redesigns, or developer handoffs.

Quick Start

Use the design-system-creator skill to produce a complete, developer-ready design system by providing the subject, concrete activity, audience, positioning, and platform constraints.

Frequently Asked Questions about design-system-creator

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

FAQPage Schema
How do I generate a complete design system with CSS tokens and component styles?▼

Generate a complete design system by providing structured inputs about your subject, audience, positioning, and platform constraints to derive CSS tokens, responsive typography scales, and component CSS directly.

What is an anchoring-first methodology for creating a color palette?▼

An anchoring-first methodology derives your color palette and typography decisions from a concrete physical or sensory anchoring, ensuring visual specificity and avoiding generic design templates.

Does this design system generator include accessibility checks for WCAG contrast?▼

Yes, the design system output includes WCAG contrast checks, focus and interaction rules, and reduced-motion handling to ensure your components meet accessibility requirements.

Can I produce component CSS for buttons, cards, and forms for developer handoff?▼

Yes, you can produce component CSS for buttons, cards, navigation, and forms alongside a copy-pasteable :root CSS token block, making it ideal for direct developer handoffs.

What inputs do I need to create a moodboard-driven visual direction?▼

You need structured inputs detailing the concrete activity, audience, positioning, and constraints to leverage visualization, render moodboards, and export a developer-ready markdown block.

Are there limitations when applying this to web, mobile, and product projects?▼

The main limitation is the required input specificity; you must provide detailed physical and sensory anchoring constraints to avoid generic outputs across web, mobile, and product platforms.

Related Skills

Explore More Design & Creative Skills→
smarmen86smarmen86

blog-brand

Generate BRAND.md and VOICE.md files defining editorial guidelines for blog workflows.

Community
Intermediate
ovachieverovachiever
52

ui-design-system

Generate design tokens from brand colors in JSON, CSS, or SCSS.

Community
Advanced
OthmanAdiOthmanAdi

gmira-a11y

Audit web application accessibility by measuring contrast, focus order, and semantic HTML roles.

Community
Advanced
guideopsguideops

corporate

Provide design guidelines with color, typography, and spacing scales for enterprise design systems.

Community
Advanced