skills.rest
phishkatlabs
phishkatlabsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

uiux-designer

Codify design tokens, component specs, and accessibility guidelines into a design-system document.

Updated Aug 27, 2026
Search Tags:#branding#accessibility#frontend#tokens#design-systems#uiux
One-click install
npx skills add https://github.com/phishkatlabs/phishkat-crew --skill uiux-designer-phishkatlabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uiux-designer
Source: https://github.com/phishkatlabs/phishkat-crew/tree/main/uiux-designer
Command: npx skills add https://github.com/phishkatlabs/phishkat-crew --skill uiux-designer-phishkatlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardizes the creation of design systems by detailing tokens, components, and accessibility guidelines to ensure visual consistency across products and teams.

Core Features & Use Cases

  • Establish design tokens (colors, typography, spacing, borders, radii, shadows) and maintain a single source of truth.
  • Define comprehensive component specs with all interaction states, responsive behavior, and accessibility considerations to guide frontend implementation.
  • Produce a complete, self-contained design-system document and generate brand/assets to accelerate design-to-code handoff.

Quick Start

Define a scalable design system by establishing tokens, components, and accessibility guidelines for the frontend.

Frequently Asked Questions about uiux-designer

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

FAQPage Schema
How do I create a scalable design system with consistent UI tokens?▼

A scalable design system establishes foundational UI tokens for colors, typography, spacing, borders, radii, and shadows to maintain a single source of truth. This standardizes visual consistency across large-scale web and mobile product teams.

What is the best way to define component specs for frontend implementation?▼

Defining component specs involves detailing all interaction states, responsive behavior, and accessibility constraints. This guides frontend engineers through exact component behaviors, accelerating design-to-code handoff for large-scale interfaces.

How do design tokens improve accessibility guidelines across web and mobile?▼

Design tokens improve accessibility by codifying constraints directly into foundational color and typography values. This ensures components built across web and mobile teams automatically inherit compliant accessibility behaviors and visual contrast standards.

Can I standardize visual consistency for large-scale UIs without a central design-system document?▼

Standardizing large-scale UIs without a central design-system document risks visual fragmentation. Generating a complete, self-contained design-system document codifies tokens, component specs, and accessibility guidelines to ensure all designers and engineers share a single source of truth.

What limitations exist when applying design tokens to frontend asset generation?▼

Limitations when applying design tokens to frontend asset generation depend on maintaining a single source of truth. If token values for borders, radii, and shadows are not strictly codified, generated assets may fail to ensure visual consistency across product teams.

Related Skills

Explore More Design & Creative Skills→
rwHiveAquarwHiveAqua

design-advisor

Translate brand strategy into visual identity assets with typography, color, and layout specs.

Community
Basic
sumrae412sumrae412
2

courierflow-ui

Enforce layered CSS architecture and design token standards for web applications.

Community
Intermediate
xcrrrxcrrr
4

frontend-design

Generate frontend design specifications with CSS custom properties and component states.

Community
Advanced
lemulemu

visual-design-foundations

Standardize typography, color, spacing, and iconography into design tokens and guidelines.

Community
Intermediate