Can I use my existing brand colors?

Absolutely. The skill can scan your project for existing CSS variables or consume brand identity documents to derive its primary color palette and typography rules.

How does the expert panel work?

It spawns six parallel sub-agents representing industry-standard design roles. These agents collaborate to reach a consensus on foundations like color, typography, and spacing, resolving conflicts based on accessibility and standards.

Does this skill generate Figma files or visual assets?

No, this skill focuses on technical specifications, design tokens in JSON format, and Markdown documentation to ensure high-fidelity implementation directly in your codebase.

Is the output compliant with accessibility standards?

Yes, the skill strictly enforces WCAG AA contrast ratios (4.5:1 for text) and provides detailed specifications for keyboard navigation, screen readers, and touch targets.

What token format does it use?

It generates tokens using the latest W3C Design Tokens Community Group (DTCG) standard (v2025.10) for maximum interoperability with tools like Style Dictionary.

Design System Expert Panel

Name: Design System Expert Panel
Author: noodlemind

bynoodlemind

0•

デザインツール

Generates comprehensive design system specifications and W3C-compliant tokens using a panel of six specialized principal designer agents.

This skill orchestrates a team of six AI sub-agents—specializing in atomic design, design tokens, responsive layout, and accessibility—to build a production-ready design system. It automates the creation of a three-tier token architecture (primitive, semantic, and component) while ensuring WCAG AA contrast compliance and cross-platform consistency. Use this skill when initiating a new project or standardizing existing UI foundations into a structured, machine-readable format compatible with modern frontend frameworks like Next.js.

主な機能

010 GitHub stars

02Full accessibility audit ensuring WCAG AA contrast and screen reader support

03Comprehensive component specifications including anatomy, states, and variants

04Multi-agent consensus from 6 specialized principal designer personas

05Automatic light and dark mode strategy with semantic remapping

06Generates W3C DTCG-compliant design tokens in JSON format

ユースケース

01Establishing a scalable design foundation for a new frontend project

02Generating detailed technical documentation for core UI components and grid layouts

03Converting inconsistent CSS variables into a structured, multi-tier design token system

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add noodlemind/nanodex-marketplace design-system

For use in Claude.ai and ChatGPT

主な機能

010 GitHub stars

02Full accessibility audit ensuring WCAG AA contrast and screen reader support

03Comprehensive component specifications including anatomy, states, and variants

04Multi-agent consensus from 6 specialized principal designer personas

05Automatic light and dark mode strategy with semantic remapping

06Generates W3C DTCG-compliant design tokens in JSON format

ユースケース

01Establishing a scalable design foundation for a new frontend project

02Generating detailed technical documentation for core UI components and grid layouts

03Converting inconsistent CSS variables into a structured, multi-tier design token system

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add noodlemind/nanodex-marketplace design-system

For use in Claude.ai and ChatGPT