{"product_id":"ai-powered-brand-design-system-accessible-wcag-verified","title":"AI-Powered Brand Design System: Accessible \u0026 WCAG Verified","description":"\u003ch3\u003eAI-Powered Brand Design System: Accessible \u0026amp; WCAG Verified\u003c\/h3\u003e\n\n\u003cp\u003eThis 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.\u003c\/p\u003e\n\n\u003ch3\u003eWhat this skill does\u003c\/h3\u003e\n\u003cp\u003eUsing a structured methodology, this skill streamlines the process of creating an accessible brand design system:\u003c\/p\u003e\n\u003cul\u003e\n  \u003cli\u003e\n\u003cstrong\u003eBrief Inference:\u003c\/strong\u003e Identify the industry, audience, core mood adjective, and motion depth. Select an anchoring aesthetic archetype.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003ePrimitives Generation:\u003c\/strong\u003e 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.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eSemantic Layer Mapping:\u003c\/strong\u003e Assign roles to primitives like `action.primary`, `text.primary`, `surface.page`, with specific dark mode overrides designed for each.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eScales Implementation:\u003c\/strong\u003e Develop a Major Third type scale, composite text styles, a 4px spacing scale, radius tiers, elevation, and motion durations in token format.\u003c\/li\u003e\n  \u003cli\u003e\n\u003cstrong\u003eToken Emission:\u003c\/strong\u003e Generate three-tier DTCG tokens in JSON and a single theme.css file.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eWho it is for\u003c\/h3\u003e\n\u003cp\u003eThis 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.\u003c\/p\u003e\n\n\u003ch3\u003eUse cases\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003eCreating a new brand identity from scratch with a consistent design language.\u003c\/li\u003e\n  \u003cli\u003eEstablishing a themeable token kit for developing product interfaces.\u003c\/li\u003e\n  \u003cli\u003eRequiring WCAG compliance for brand and UI design elements.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eTechnical details\u003c\/h3\u003e\n\u003cp\u003eThe 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.\u003c\/p\u003e\n\u003c!-- mcpcart:static-blocks:start --\u003e\n\u003chr\u003e\n\u003ch3\u003eSource \u0026amp; Licence\u003c\/h3\u003e\n\u003cp\u003eThis package is built on open-source work published by \u003cstrong\u003eplugin87\u003c\/strong\u003e (\u003ca href=\"https:\/\/github.com\/plugin87\/ux-ui-agent-skills\" rel=\"nofollow noopener\" target=\"_blank\"\u003eplugin87\/ux-ui-agent-skills\u003c\/a\u003e) and distributed under \u003cstrong\u003eMIT\u003c\/strong\u003e. The original licence text and copyright notice are included in your download.\u003c\/p\u003e\n\u003cp\u003ePersonal and commercial use, modification and redistribution are permitted, provided the original copyright and licence notice are retained.\u003c\/p\u003e\n\u003cp\u003eYour 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.\u003c\/p\u003e\n\u003ch3\u003eDelivery \u0026amp; Support\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eDelivery:\u003c\/strong\u003e instant — a secure download link is emailed to you as soon as payment is confirmed.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eFormat:\u003c\/strong\u003e ZIP archive containing the skill files, documentation and the original licence.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSupport:\u003c\/strong\u003e \u003ca href=\"mailto:support@mcpcart.com\"\u003esupport@mcpcart.com\u003c\/a\u003e — we aim to reply within 2 business days.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eUpdates:\u003c\/strong\u003e updates are included only where stated on this page.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003eRefunds\u003c\/h3\u003e\n\u003cp\u003eThis 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.\u003c\/p\u003e\n\u003cp style=\"font-size:0.85em;color:#666;\"\u003eClaude, 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.\u003c\/p\u003e\n\u003c!-- mcpcart:static-blocks:end --\u003e","brand":"MCP Cart","offers":[{"title":"Default Title","offer_id":52985730072887,"sku":"MCP-PLUGIN87-UX-UI-AGENT-SKILLS-BRANDKIT","price":27.99,"currency_code":"GBP","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0981\/3950\/4951\/files\/NcpzpzOQ00y3hda-kgSkr_b2d08ddb3ff445179334159ac09fb746.jpg?v=1789376605","url":"https:\/\/mcpcart.com\/products\/ai-powered-brand-design-system-accessible-wcag-verified","provider":"SPF PRO","version":"1.0","type":"link"}