AI-Powered Brand Design System: Accessible & WCAG Verified

AI-Powered Brand Design System: Accessible & WCAG Verified

This AI-powered skill assists in generating a complete and accessible brand design system based on a brief, ranging from primitive to semantic component DTCG tokens. It produces light and dark themes and verifies compliance with WCAG standards. The skill is designed for developers and teams looking to establish a brand/design foundation or develop a themeable token kit for a product.

What this skill does

Using a structured methodology, this skill streamlines the process of creating an accessible brand design system:

• Brief Inference: Identify the industry, audience, core mood adjective, and motion depth. Select an anchoring aesthetic archetype.
• Primitives Generation: Produce a brand color ramp in OKLCH with consistent chroma across 11 shades, including a neutral ramp. Ensure the 500 shade meets a 4.5:1 contrast ratio on white for text, and 600 ≥ 3:1 for UI elements.
• Semantic Layer Mapping: Assign roles to primitives like `action.primary`, `text.primary`, `surface.page`, with specific dark mode overrides designed for each.
• Scales Implementation: Develop a Major Third type scale, composite text styles, a 4px spacing scale, radius tiers, elevation, and motion durations in token format.
• Token Emission: Generate three-tier DTCG tokens in JSON and a single theme.css file.

Who it is for

This skill is targeted at developers and teams using AI coding agents such as Claude Code, Cursor, or Codex, who need to establish a brand design foundation or develop a token kit that ensures consistency and themeability across products.

Use cases

• Creating a new brand identity from scratch with a consistent design language.
• Establishing a themeable token kit for developing product interfaces.
• Requiring WCAG compliance for brand and UI design elements.

Technical details

The skill uses AI capabilities to automate the design process, ensuring accessibility and coherence across various design elements. Color ramps are verified for accessibility standards, while scales and components are set using predefined systems and motion styles.

Source & Licence

This package is built on open-source work published by plugin87 (plugin87/ux-ui-agent-skills) and distributed under MIT. The original licence text and copyright notice are included in your download.

Personal and commercial use, modification and redistribution are permitted, provided the original copyright and licence notice are retained.

Your purchase covers curation, licence verification, packaging, documentation and instant delivery. It does not grant exclusive rights to the underlying open-source code, which remains available under its original licence.

Delivery & Support

• Delivery: instant — a secure download link is emailed to you as soon as payment is confirmed.
• Format: ZIP archive containing the skill files, documentation and the original licence.
• Support: support@mcpcart.com — we aim to reply within 2 business days.
• Updates: updates are included only where stated on this page.

Refunds

This is a digital product delivered immediately after purchase. By completing your order you request immediate delivery and acknowledge that, once the download has been accessed, the statutory right to cancel no longer applies to the extent permitted by law. Refund requests are handled in accordance with our published Refund Policy.

Claude, Codex, Gemini and Cursor are trademarks of their respective owners. MCP Cart is an independent marketplace and is not affiliated with, endorsed by, or sponsored by any of them. Compatibility references describe interoperability only.