ui-design

Generate UI component and page code using design tokens and semantic HTML.

1|1|Updated Mar 9, 2026

Search Tags:#ui #accessibility #frontend #design system #styling #component generation

Ready to run

npx skills add https://github.com/trevorbyrum/claude-skills-suite --skill ui-design-trevorbyrum

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/trevorbyrum/claude-skills-suite/tree/main/skills/ui-design
Command: npx skills add https://github.com/trevorbyrum/claude-skills-suite --skill ui-design-trevorbyrum

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill combats the tendency for AI-generated UI to look generic and uninspired, ensuring that frontend code adheres to a specific design system and aesthetic direction.

Core Features & Use Cases

Intentional Design Generation: Creates UI components and pages with a deliberate aesthetic, avoiding common AI design patterns.
Design System Enforcement: Strictly uses design tokens for styling (colors, spacing, typography) and enforces semantic HTML and accessibility standards.
Use Case: When building a new feature, use this skill to generate a React component for a user profile card that matches the project's brand guidelines, uses only defined design tokens, and includes hover and focus states.

Quick Start

Use the ui-design skill to generate a responsive data table component with loading and empty states.

Frequently Asked Questions about ui-design

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

FAQPage Schema

How do I generate UI components that follow my project's design system?▼

Generate UI components that follow your design system by enforcing project-specific design tokens for colors, spacing, and typography. The skill guides the AI through content-first design, hierarchy, and pattern matching before writing code.

Why does AI generated UI look generic and how can I avoid it?▼

AI generated UI looks generic due to uninspired default outputs. Avoid this by enforcing intentional design principles, utilizing semantic HTML, and checking against anti-patterns to ensure a deliberate aesthetic.

Can I generate accessible frontend code with semantic HTML and design tokens?▼

Yes, you can generate accessible frontend code by enforcing semantic HTML and accessibility best practices. The skill rigorously checks against accessibility guidelines while using design tokens for styling.

What is the best way to create a React component with loading and empty states?▼

The best way to create a React component with loading and empty states is to guide the AI through content-first design and density matching before code generation, ensuring hover and focus states are included.

Does this approach to UI design support strict design token enforcement?▼

Yes, this UI design approach supports strict design token enforcement by utilizing only defined project tokens for styling. This ensures generated components match brand guidelines and avoids generic AI patterns.

When do I need to use intentional design generation for frontend pages?▼

Use intentional design generation for frontend pages when building new features that require strict adherence to aesthetic principles and design systems. It combats generic AI output by prioritizing hierarchy and accessibility.