skills.rest
KYRIE66nb
KYRIE66nbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-designer

Create accessible UIs with typography, color tokens, and responsive layouts.

Updated Apr 8, 2026
Search Tags:#design#ui#accessibility#responsive#ux#design-system
One-click install
npx skills add https://github.com/KYRIE66nb/codex-omx-public-config --skill ui-designer-kyrie66nb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/KYRIE66nb/codex-omx-public-config/tree/main/home/.codex/skills/ui-designer
Command: npx skills add https://github.com/KYRIE66nb/codex-omx-public-config --skill ui-designer-kyrie66nb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and teams often waste time iterating on UI without a clear visual direction or accessible implementation. This Skill provides a structured approach to craft intentional user interfaces that align with product language and accessibility requirements.

Core Features & Use Cases

  • Establish a visual direction (typography, color system, spacing, motion) to guide development.
  • Audit existing styles and reuse patterns from a design system to maintain consistency.
  • Build accessible components with semantic HTML, responsive layouts, and focus states.
  • Use for UI redesigns, component polishing, responsive behavior, and accessibility improvements.

Quick Start

Define the screen goal, audience, and success metrics, then outline a visual direction and responsive layout plan for the target product.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I establish a visual direction for a UI design system?▼

Build accessible UI components by implementing semantic HTML, responsive layouts, and proper focus states. This ensures your interface meets accessibility goals while maintaining a polished visual direction across different devices.

What is the best way to audit existing styles and reuse design patterns?▼

Yes, you can use this approach for responsive layout work by defining responsive behavior and accessible states upfront. This ensures your UI components adapt correctly across target devices while meeting accessibility goals.

How do I start a UI redesign to align with a product's visual language?▼

Yes, this approach supports component polishing by applying structured visual direction and accessible frontend implementation. You can refine individual UI elements while ensuring they integrate seamlessly with the overall design system.

Do I need to define success metrics before creating a UI visual system?▼

Yes, you should define success metrics before creating a UI visual system. Establishing screen goals and audience metrics first provides the necessary context to outline an intentional visual direction and responsive layout plan.

Related Skills

Explore More Design & Creative Skills→
Owl-ListenerOwl-Listener
2.0k

design-brief

Define and document a design brief with problem space, audience, constraints, and success criteria.

Community
Intermediate
eysenfalkeysenfalk

frontend-ui-ux

Transforms design briefs into accessible, reusable UI components with tokens and layouts.

Community
Advanced
PetriLahdelmaPetriLahdelma
2

ux-design

Plan user research, information architecture, flows, and usability testing.

Community
Advanced
veerababumanyamveerababumanyam

accessibility

Validate UI components against WCAG 2.1 AA accessibility standards.

Community
Basic