s0xDk/refactoring-ui-skill

해결하는 문제

AI가 생성한 사용자 인터페이스가 "아마추어 같거나" "어딘가 어색하게" 보이는 문제를 해결합니다. Claude Code에 구체적인 기계적 디자인 규칙 세트를 제공함으로써, AI는 추측하거나 임시적인 값을 사용하는 대신 『Refactoring UI』 책을 기반으로 한 전문적인 디자인 시스템을 적용할 수 있습니다.

작동 방식

이것은 Claude Code를 위한 "스킬"로, 일련의 Markdown 파일과 CSS tokens로 구성됩니다. AI에게 간격, 타이포그래피, 색상 및 그림자에 대한 구체적인 스케일을 제공하고, 모호한 UI 불만 사항을 기계적인 수정으로 변환하는 진단 표를 제공합니다. 활성화되면 Claude는 이러한 고정된 스케일과 기술을 사용하여 단순한 글꼴 크기가 아닌 굵기와 색상을 통해 시각적 계층 구조와 깊이를 구축합니다.

대상 사용자

전문 디자이너가 아니면서도 웹 인터페이스의 시각적 품질을 향상시키고자 하는 Claude Code 사용 개발자.

주요 기능

• 고정된 디자인 스케일: 제한된 간격, 서체, 색상 및 그림자 스케일을 사용하여 일관성을 보장합니다.
• 진단 도구: "싸게 보인다"와 같은 모호한 피드백을 구체적이고 실행 가능한 디자인 수정으로 변환합니다.
• 상세한 참조: HSL 및 색조 회전을 사용하여 처음부터 색상 팔레트를 구축하는 시스템을 포함합니다.
• 대비가 검증된 Tokens: 대비가 검증된 스타터 CSS tokens 세트를 제공합니다.