# UI Design

> UI Design Skill

- Skill: `quannv1198/ui-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add quannv1198/ui-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/quannv1198/ui-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: quannv1198 (https://skillmd.com/u/quannv1198)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/quannv1198/ui-design

---

# UI Design Skill

Build polished, modern, consistent, and user-friendly interfaces.

## Core Principles

* Follow the existing design system, visual language, and component patterns.
* Prefer simple, clean, intentional designs over unnecessary decoration.
* Prioritize usability, clarity, consistency, and visual hierarchy.
* Avoid generic "AI-generated" looking interfaces.
* Do not introduce a new visual style when the project already has an established one.
* Reuse existing components, tokens, and utilities whenever possible.

## Layout

* Use a consistent spacing system.
* Maintain clear alignment and visual rhythm.
* Use appropriate content width and whitespace.
* Establish a clear hierarchy between sections, headings, content, and actions.
* Avoid overcrowded layouts.
* Keep related elements visually grouped.
* Use responsive layouts that work well across mobile, tablet, and desktop.

## Typography

* Use the project's existing typography system.
* Establish clear hierarchy between headings, body text, labels, and supporting text.
* Use readable font sizes and line heights.
* Avoid excessive font weights, sizes, or decorative typography.
* Keep text lengths and wrapping in mind when designing layouts.

## Colors

* Use the existing color palette and design tokens.
* Maintain sufficient contrast between text and backgrounds.
* Use accent colors intentionally for actions, status, and emphasis.
* Do not introduce unnecessary colors.
* Avoid excessive gradients, neon colors, or decorative color effects unless they match the product style.
* Support dark mode when the project supports it.

## Components

* Prefer reusable and consistent UI components.
* Keep buttons, inputs, cards, dialogs, navigation, and other common elements visually consistent.
* Components should have clear visual states:

  * Default
  * Hover
  * Focus
  * Active
  * Disabled
  * Loading
  * Error
* Avoid creating multiple visually different versions of the same component without a clear reason.

## Interaction

* Make interactive elements visually identifiable.
* Provide clear feedback after user actions.
* Use appropriate hover, focus, active, and transition states.
* Keep animations subtle and purposeful.
* Avoid animations that distract from the task or reduce usability.
* Never rely on color alone to communicate important states.

## Forms

* Use clear labels and helpful placeholders.
* Make validation errors easy to understand and locate.
* Keep form layouts simple and predictable.
* Clearly distinguish required and optional fields.
* Provide loading and disabled states during submission.

## Responsive Design

* Design for different screen sizes instead of only scaling desktop layouts.
* Avoid fixed dimensions when flexible sizing is more appropriate.
* Ensure text, buttons, forms, and navigation remain usable on small screens.
* Handle long content, wrapping, and overflow gracefully.
* Test important layouts at mobile and desktop breakpoints.

## Accessibility

* Prefer semantic HTML elements.
* Ensure keyboard navigation works correctly.
* Provide visible focus states.
* Use accessible labels for controls.
* Maintain sufficient color contrast.
* Use ARIA only when semantic HTML is insufficient.
* Do not remove accessibility features for visual reasons.

## States

Always consider:

* Loading
* Empty
* Error
* Success
* Disabled
* Offline or unavailable states when relevant

Do not design only the ideal successful state.

## Visual Quality

Before considering UI work complete, check:

* Alignment
* Spacing
* Typography
* Color consistency
* Component consistency
* Responsive behavior
* Interactive states
* Accessibility
* Empty and error states

Fix obvious visual inconsistencies before finishing.

## Implementation Rules

* Inspect existing UI components and styles before creating new ones.
* Reuse existing design tokens and components whenever possible.
* Prefer small, targeted changes.
* Do not rewrite unrelated UI.
* Do not add dependencies for simple styling problems.
* Do not invent a design system when one already exists.
* Keep visual decisions consistent across the entire feature.
* If the project uses a UI library, follow its conventions instead of replacing it.
* If requirements are ambiguous, prefer the simplest design consistent with the existing application.

## Avoid

* Excessive rounded corners.
* Excessive shadows.
* Excessive gradients.
* Random colors.
* Inconsistent spacing.
* Too many font sizes.
* Tiny unreadable text.
* Unnecessary animations.
* Overly complex layouts.
* Decorative elements that reduce usability.
* UI patterns that look impressive but make the interface harder to use.