ui

Define UI design system tokens and component specifications for web products.

Updated Apr 3, 2026
Ready to run
npx skills add https://github.com/projectmiluju/factlog --skill ui-projectmiluju
πŸ’¬ Prompt for ChatGPT / Claude Chatβ–Ό
Please help me install this Agent Skill.
Skill: ui
Source: https://github.com/projectmiluju/factlog/tree/main/.agents/skills/ui
Command: npx skills add https://github.com/projectmiluju/factlog --skill ui-projectmiluju

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

μΌκ΄€λœ UI λ””μžμΈ 언어와 μ‹œμŠ€ν…œμ΄ λΆ€μž¬ν•΄ λ””μžμΈ-개발 κ°„ ν˜‘μ—…μ΄ μ‚°λ§Œν•˜κ³  κ΅¬ν˜„ ν’ˆμ§ˆμ΄ ν©μ–΄μ§€λŠ” 문제λ₯Ό ν•΄κ²°ν•©λ‹ˆλ‹€.

Core Features & Use Cases

  • λ””μžμΈ μ‹œμŠ€ν…œμ˜ 토큰(색상, νƒ€μ΄ν¬κ·Έλž˜ν”Ό, 간격)κ³Ό μ»΄ν¬λ„ŒνŠΈλ₯Ό μ •μ˜ν•˜κ³  λ¬Έμ„œν™”ν•©λ‹ˆλ‹€.
  • λ””μžμ΄λ„ˆμ™€ κ°œλ°œμžκ°€ 곡톡 μžμ‚°μ„ κ³΅μœ ν•  수 μžˆλŠ” living design docλ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.
  • λŒ€μ‹œλ³΄λ“œ, 폼, λ„€λΉ„κ²Œμ΄μ…˜ λ“±μ˜ 곡톡 ꡬ성 μš”μ†Œμ˜ λͺ…μ„Έλ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.

Quick Start

UIλ₯Ό μœ„ν•œ 토큰, μ»΄ν¬λ„ŒνŠΈ, μ ‘κ·Όμ„± λͺ©ν‘œλ₯Ό λ‚˜μ—΄ν•œ μŠ€νƒ€ν„° λ””μžμΈ μ‹œμŠ€ν…œ λ¬Έμ„œλ₯Ό μž‘μ„±ν•˜μ„Έμš”.

Frequently Asked Questions about ui

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

FAQPage Schema
How do I create a UI design system for web product development?β–Ό

To create a UI design system, define and document visual language tokens like color palettes, typography, and spacing scales. You establish a living guide that enforces accessibility targets and responsive state definitions for consistent design-development collaboration.

What is a living design doc and when do I need it for dashboards and forms?β–Ό

A living design doc is a continuously updated guide that defines shared design tokens and component specifications. You need it when drafting dashboards and forms to ensure developers and designers share common visual assets and implementation quality remains consistent.

How to define color and typography tokens for a cohesive visual language?β–Ό

Define color and typography tokens by documenting specific values for palettes and text styles within your design system. Apply these tokens to component specifications to enforce consistent visual design and accessibility targets across all UI development tasks.

Can I use this to establish accessibility targets and responsive state definitions?β–Ό

Yes, you can establish accessibility targets and responsive state definitions by enforcing them within the living design guide. The system documents specific requirements for spacing scales, typography, and color palettes to ensure compliant web product UI.

Best way to draft component specifications for dashboards and forms?β–Ό

The best way to draft component specifications is to define them within a documented design system that applies established color and typography tokens. This approach ensures dashboards and forms maintain cohesive visual language and meet accessibility targets.

Why does inconsistent UI visual language cause design-development collaboration issues?β–Ό

Inconsistent UI visual language causes collaboration issues because the absence of defined tokens and spacing scales scatters implementation quality. Establishing a cohesive design system resolves this by providing shared assets and clear component specifications for all teams.