ui-articulation-skill은(는) 무엇을 하나요?
모호한 UI 피드백을 정확한 디자인 언어와 HTML 시각적 비교로 변환하는 Codex 스킬입니다.
개요
이 스킬은 비전문적인 UI 피드백(예: "너무 빈 공간이 많아요", "글자가 작아요", "색상이 이상해요")을 분석하여 구체적이고 실행 가능한 디자인 변경 사항으로 변환합니다. 또한, 원본 UI와 수정된 UI를 시각적으로 비교할 수 있는 HTML 페이지를 생성합니다.
주요 기능
- 피드백 분석: 자연어로 작성된 UI 피드백을 받아 핵심 문제점 식별
- 디자인 언어 변환: 모호한 표현을 구체적인 CSS 속성, 레이아웃 규칙, 타이포그래피 조정 등으로 변환
- HTML 비교 생성: 원본과 제안된 UI를 나란히 표시하는 반응형 HTML 페이지 생성
사용 방법
- 사용자는 개선하고자 하는 UI 섹션과 관련된 피드백을 제공합니다.
- 스킬이 피드백을 분석하여 디자인 사양을 도출합니다.
- 스킬이 두 가지 버전을 비교하는 HTML 파일을 생성합니다.
예시
피드백: "헤더 영역에 너무 많은 정보가 있어요."
분석 결과:
- 헤더 내 요소 간 간격 증가 (padding: 20px → padding: 30px)
- 불필요한 요소 제거 (보조 링크를 풋터로 이동)
- 폰트 크기 조정 (h1: 24px → 28px)
지원 환경
- Codex
- Claude Code / Cursor (호환 가능)
라이선스
MIT