skills.rest
oxie
oxieCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-design

Generate grayscale UI variants, functional prototypes, and polished designs with accessibility tests.

Updated Oct 26, 2025
Search Tags:#accessibility#design system#prototyping#product design#user interface#ui/ux design
One-click install
npx skills add https://github.com/oxie/portfolio-cms-project --skill ui-ux-design-oxie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/oxie/portfolio-cms-project/tree/main/.claude/skills/ui-ux-design
Command: npx skills add https://github.com/oxie/portfolio-cms-project --skill ui-ux-design-oxie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured, three-phase workflow for UI/UX design, ensuring a systematic approach from initial variations to functional prototypes and final polished designs. It addresses issues like inconsistent design, lack of accessibility, and design system violations.

Core Features & Use Cases

  • Variations Phase: Rapidly generate 3-5 grayscale UI variants to explore different layout and interaction approaches.
  • Functional Phase: Converge on a selected variant, build a working prototype, and integrate accessibility features and component tests.
  • Polish Phase: Apply brand design system tokens, optimize performance, and conduct final accessibility audits to ensure production readiness.
  • Use Case: A product team needs to design a new user interface. This skill guides them through diverging on ideas, converging on a functional prototype, and then polishing it to meet brand, performance, and accessibility standards.

Quick Start

Design the 'AKTR Upload' feature's UI, starting with 3-5 grayscale variations, then converging on a functional prototype.

Frequently Asked Questions about ui-ux-design

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

FAQPage Schema
How do I create a structured UI/UX design workflow from concept to final product?▼

A structured UI/UX design workflow moves through three phases: Variations (explore 3-5 grayscale layouts), Functional (build a prototype with accessibility and tests), and Polish (apply brand tokens and optimize). This ensures consistent design, accessibility compliance, and production readiness across your interface.

What's the best way to ensure my UI design meets accessibility standards like ARIA and keyboard navigation?▼

Integrate accessibility validation during the functional phase by testing ARIA labels, keyboard navigation, and running automated tests like axe. Building accessibility requirements into your prototype—not as an afterthought—prevents rework and ensures compliance before polish.

How do I maintain design system consistency across UI features without hardcoding colors and spacing?▼

Use token-based color systems and enforce 8px spacing rules during the polish phase. This approach replaces hardcoded values with reusable design tokens tied to your brand, ensuring every UI feature stays consistent with your design system.

Can I use this design approach for rapid prototyping and iteration?▼

Yes. The three-phase workflow supports rapid iteration by separating exploration (variations) from convergence (functional). Git tagging at each phase makes iteration reproducible and lets you compare versions without losing prior work.

What if my design doesn't align with existing UI component inventory or brand standards?▼

Compliance with ui-inventory components and brand tokens is enforced during the functional and polish phases. If your design deviates, those phases surface misalignments early, letting you adjust before final production rather than discovering conflicts later.

Related Skills

Explore More Design & Creative Skills→
daymadedaymade
1.3k

docs-cleaner

Consolidate redundant documentation files into a single source of truth.

Community
Advanced
tom-xstom-xs

accessibility-selenium-testing

Automate WCAG 2.1/2.2 accessibility audits with Selenium WebDriver and axe-core.

Community
Advanced
jg-chalk-iojg-chalk-io

moai-design-systems

Automate design system creation and validation with tokens, components, and WCAG 2.2 checks.

Community
Advanced
dbrijeshdbrijesh

review-gates

Manage structured human review checkpoints for code, security, architecture, and database changes.

Community
Advanced