uiux-design-principles

Diagnose layout, color, spacing, and hierarchy in interface designs.

1|Updated Apr 15, 2026
One-click install
npx skills add https://github.com/wooson00308/CCUF --skill uiux-design-principles-wooson00308
Or copy as Structured Prompt for Agentβ–Ό
Please help me install this Agent Skill.
Skill: uiux-design-principles
Source: https://github.com/wooson00308/CCUF/tree/main/.claude/skills/uiux-design-principles
Command: npx skills add https://github.com/wooson00308/CCUF --skill uiux-design-principles-wooson00308

SYSTEM DOCUMENTATION & REQUIREMENTS

πŸ’‘ This Skill includes references (resource) components.

What problem does it solve?

UI/UX λ””μžμΈ 원칙 기반 νŒλ‹¨μ„ λ•λŠ” 레퍼런슀 μŠ€ν‚¬λ‘œ, λ””μžμΈ 문제λ₯Ό μ§„λ‹¨ν•˜κ³  λ ˆμ΄μ•„μ›ƒ, 색상, 간격, μœ„κ³„ 섀정에 μΌκ΄€λœ κ·Όκ±°λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.

Core Features & Use Cases

  • μžκ°€ 검증: λ ˆμ΄μ•„μ›ƒ λ°°μΉ˜μ™€ 색상 λŒ€λΉ„, 간격, μœ„κ³„μ—μ„œ λͺ…ν™•ν•œ κΈ°μ€€μœΌλ‘œ 문제λ₯Ό μ‹λ³„ν•©λ‹ˆλ‹€.
  • λ””μžμΈ 평가: UI κ΅¬μ„±μ˜ μ‹œκ°μ  흐름과 가독성 ν–₯상을 μœ„ν•œ 원칙 기반 ν”Όλ“œλ°±μ„ μ œκ³΅ν•©λ‹ˆλ‹€.
  • ν•™μŠ΅/레퍼런슀: references 디렉토리에 μžˆλŠ” CRAP 원칙, 8px κ·Έλ¦¬λ“œ, 닀크 UI 원칙 λ“± 싀무 κ°€μ΄λ“œλ₯Ό μ°Έμ‘°ν•©λ‹ˆλ‹€.
  • 싀무 적용: UI μ»¨ν¬λ„ŒνŠΈμ˜ μž¬μ‚¬μš©μ„±κ³Ό 일관성을 λ†’μ΄λŠ” κ°œμ„ μ•ˆ μ œμ‹œ.

Quick Start

Analyze a given UI design against the six foundations and provide a principled critique with concrete improvements.

Frequently Asked Questions about uiux-design-principles

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

FAQPage Schema
How do I evaluate UI layout and visual hierarchy for design critiques?β–Ό

To evaluate UI layout and visual hierarchy, apply principled UI/UX judgment to diagnose spacing, color contrast, and layout decisions. Use references like CRAP principles and 8px grid systems to identify visual flow issues and provide actionable feedback for improving readability and interface consistency.

What design principles are used for reviewing spacing and color contrast?β–Ό

Design reviews for spacing and color contrast rely on the CRAP principles, 8px grid systems, and dark UI guidelines. These references provide a consistent, objective foundation to identify visual hierarchy issues and ensure UI components maintain proper readability, spacing consistency, and accessible color contrast.

Can I use these UIUX design principles for both web and mobile interfaces?β–Ό

Yes, you can use these UIUX design principles to evaluate visual scenarios across both web and mobile interfaces. The referenced foundations diagnose layout, color, spacing, and hierarchy decisions universally, ensuring concrete improvement directions for UI components regardless of the specific platform.

How do I run a layout review using an 8px grid system?β–Ό

Run a layout review by checking element alignment and spacing against the 8px grid system reference. Diagnose visual hierarchy and spacing inconsistencies in your UI design, then apply the principled feedback to produce concrete improvements that enhance component reusability and structural consistency.

What is the best way to improve UI component reusability and consistency?β–Ό

The best way to improve UI component reusability and consistency is to evaluate interface designs against foundational design principles. Diagnose spacing, layout, and color contrast decisions using structured references, generating actionable improvements that align visual elements with standardized grid and hierarchy rules.