design

Generate WCAG AAA compliant UI components and audit design systems.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/paxtone-studio/openkodo --skill design-paxtone-studio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/paxtone-studio/openkodo/tree/main/plugins/kodo-design/skills/design
Command: npx skills add https://github.com/paxtone-studio/openkodo --skill design-paxtone-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the challenge of creating visually appealing, highly accessible, and production-ready user interfaces that balance creative distinction with robust usability.

Core Features & Use Cases

  • UI Component Generation: Design and code new UI components or entire pages from scratch.
  • Design System Auditing: Audit existing UI for consistency, accessibility, and UX best practices.
  • Theme Validation: Analyze and correct color palettes for WCAG AAA compliance and color blindness safety.
  • Inspiration Research: Find and adapt high-quality design inspiration from platforms like Dribbble and Behance.
  • Use Case: You need to design a new dashboard for a SaaS product. Use this Skill to generate a clean, modern UI following the "Refined Minimal" aesthetic, ensuring all elements meet WCAG AAA standards and adhere to the 80/10/10 color rule.

Quick Start

Use the design skill to create a new pricing page component.

Frequently Asked Questions about design

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

FAQPage Schema
How do I generate UI components that meet WCAG AAA accessibility standards?

Generate UI components meeting WCAG AAA accessibility standards by enforcing strict color psychology, typography, and spacing rules during creation. This produces distinctive, production-grade interfaces with premium UX.

How do I audit an existing design system for accessibility and UX consistency?

Audit an existing design system for accessibility and UX consistency by analyzing current UI elements against WCAG AAA compliance and premium design principles. This identifies areas needing correction for robust usability.

How can I validate a color palette for color blindness safety and accessibility?

Validate a color palette for color blindness safety and accessibility by analyzing and correcting color combinations for WCAG AAA compliance. This enforces strict color psychology rules and proper color distribution.

Can I use Dribbble and Behance for design inspiration research and component generation?

Yes, you can use Dribbble and Behance for design inspiration research to find and adapt high-quality visual references. This supports UI component generation by providing distinctive aesthetic patterns for production-ready interfaces.

What is the best way to design a SaaS dashboard with a refined minimal aesthetic?

Design a SaaS dashboard with a refined minimal aesthetic by generating clean, modern UI components that adhere to the 80/10/10 color rule. This ensures all dashboard elements meet WCAG AAA standards and premium design principles.

Does frontend development require strict spacing and typography rules for accessible UI design?

Frontend development for accessible UI design requires strict spacing and typography rules to achieve WCAG AAA compliance. Enforcing these constraints during component generation ensures production-grade interfaces with exceptional UX.