unify-ui-pages-skill은(는) 무엇을 하나요?
UI 디자인 사양을 추출하고 서브 페이지를 정돈된 메인 인터페이스에 맞춰 정렬하는 Codex 스킬입니다.
개요
이 스킬은 여러 UI 페이지(서브 페이지)가 하나의 정돈된 메인 인터페이스 스타일을 따르도록 보장합니다. 디자인 파일에서 스타일 정보(색상, 여백, 폰트 등)를 추출하고, 이를 기준으로 각 서브 페이지의 레이아웃과 컴포넌트를 정렬합니다.
주요 기능
- 디자인 사양 추출: Figma, Adobe XD, Sketch 등의 디자인 파일에서 스타일 및 레이아웃 정보를 자동으로 추출합니다.
- 페이지 간 정렬: 추출된 사양을 기반으로 모든 서브 페이지의 스타일을 메인 인터페이스에 맞춰 조정합니다.
- 일관성 검사: 페이지 간 폰트, 색상, 간격 등의 불일치를 감지하고 보고합니다.
사용 방법
- 메인 인터페이스의 디자인 파일을 제공하십시오.
- 스킬이 자동으로 스타일 규칙을 추출합니다.
- 정렬하려는 서브 페이지의 디자인 파일을 제공하십시오.
- 스킬이 각 서브 페이지를 메인 인터페이스에 맞춰 정렬합니다.
지원 플랫폼
- Figma
- Adobe XD
- Sketch
- React (코드 출력)
- Vue.js (코드 출력)
참고 사항
- 모든 디자인 파일은 동일한 디자인 시스템을 따르는 것이 좋습니다.
- 추출된 사양은
design-specs.json파일로 저장됩니다. - 정렬 결과는
aligned-pages/디렉토리에 생성됩니다.