UI to Vue은(는) 무엇을 하나요?
UI 디자인 스크린샷을 Vue 3 Composition API 컴포넌트 코드로 일괄 변환합니다.
사용 시기
- 사용자가 디자인 스크린샷이나 디자인 내보내기 이미지 디렉토리를 제공한 경우
- 대상 애플리케이션이 Vue 3인 경우
- 사용자가 페이지 컴포넌트, 공유 컴포넌트, 라우터 연결의 초안을 원하는 경우
- 사용자가 Vant, Element Plus 또는 Ant Design Vue를 컴포넌트 라이브러리로 지정한 경우
사용하지 말아야 할 시기
- 사용자가 하나의 스크린샷만 가지고 맞춤형 컴포넌트를 원하는 경우
- 대상 프로젝트가 Vue가 아닌 경우
- 디자인에 세부적인 상호작용 로직, 데이터 흐름 또는 접근성 검토가 필요한 경우
- 스크린샷에 외부 모델 API로 전송할 수 없는 개인 고객 데이터가 포함된 경우
입력
모듈과 페이지 상태별로 스크린샷을 그룹화한 입력 디렉토리를 사용하세요:
screenshots/
|-- HomePage/
| |-- List/
| | |-- [email protected]
| | `-- cut-images/
| |-- cut-images/
| `-- [email protected]
`-- cut-images/
지원되는 잘라낸 이미지 디렉토리 이름: assets, icons, sprites, cut, images, cut-images
변환 모델
- 페이지 그룹화: 목록, 상세, 폼, 로딩 또는 빈 상태를 나타내는 관련 스크린샷을 하나의 페이지 컴포넌트로 결합합니다.
- UI 라이브러리 매핑: 기본 시각적 요소를 Vant, Element Plus 또는 Ant Design Vue 컴포넌트로 실용적으로 매핑합니다.
- 잘라낸 이미지 우선순위: 페이지 수준 자산 → 모듈 수준 자산 → 전역 공유 자산 순으로 우선 처리합니다.
- 컴포넌트 추출: 두 번 이상 나타나는 반복 UI 영역을 공유 컴포넌트로 추출합니다.
CLI 사용법
전역 바이너리에 의존하지 않고 문서화된 명령이 동작하도록 npx로 변환기를 실행하세요:
export DASHSCOPE_API_KEY=your_key
npx [email protected] --input ./screenshots --ui vant --output ./src
데스크톱 UI 라이브러리의 경우:
npx [email protected] --input ./designs --ui element-plus --output ./src
npx [email protected] --input ./designs --ui antd-vue --output ./src
패키지가 전역으로 설치된 경우 ui-to-vue 바이너리를 직접 사용할 수 있습니다:
npm install -g [email protected]
ui-to-vue --input ./screenshots --ui vant --output ./src
옵션
| 옵션 | 설명 | 기본값 |
|---|---|---|
--input | 디자인 이미지 디렉토리 | ./screenshots |
--ui | UI 라이브러리: vant, element-plus 또는 antd-vue | vant |
--output | 출력 디렉토리 | ./src |
--config | 설정 파일 경로 | ./.ui-to-vue.config.json |
API 키 처리
변환기는 설정 파일 또는 환경 변수에서 DashScope 자격 증명을 읽을 수 있습니다. 저장소에서는 환경 변수를 선호합니다:
export DASHSCOPE_API_KEY=your_key
로컬 설정 파일이 필요한 경우 버전 관리에서 제외하세요:
{
"apiKey": "your_dashscope_key",
"input": "./designs",
"ui": "vant",
"output": "./src"
}
.ui-to-vue.config.json
보안 및 개인정보 보호
- 디자인 스크린샷을 외부 모델 API로 전송될 수 있는 원본 자료로 취급하세요.
- 허가 없이 개인 고객 디자인에 대해 이 플로우를 실행하지 마세요.
@latest대신 반복 가능한 워크플로우에서 변환기 버전을 고정하세요.- 생성된 Vue 코드를 커밋하기 전에 검토하세요.
.ui-to-vue.config.json, API 키, 생성된 비밀 정보 또는 고객 스크린샷을 커밋하지 마세요.
출력 검토 체크리스트
- 페이지 컴포넌트가
views/또는 선택한 출력 디렉토리 아래에 생성되었습니다. - 반복 UI 영역이 재사용이 명확한 경우에만
components/아래로 추출되었습니다. - 라우터 출력이 대상 프로젝트의 라우터 스타일과 호환됩니다.
- 생성된 컴포넌트가 요청된 UI 라이브러리를 일관되게 사용합니다.
- 생성된 CSS 단위가 디자인 기준과 일치합니다.
- 코드가 프로젝트의 포매터, 린터, 타입 체커 및 빌드를 통과합니다.
- 커밋 전에 플레이스홀더 복사본, 모의 데이터 및 생성된 자산을 검토했습니다.
문제 해결
| 문제 | 확인 사항 |
|---|---|
401 또는 인증 오류 | 명령을 실행하는 셸에서 DASHSCOPE_API_KEY가 설정되었는지 확인하세요. |
command not found: ui-to-vue | npx [email protected] 형식을 사용하거나 패키지를 전역으로 설치하세요. |
| 잘라낸 이미지가 무시됨 | 자산 디렉토리 이름이 지원되고 해당 페이지 또는 모듈 아래에 중첩되어 있는지 확인하세요. |
| 컴포넌트가 요청된 UI 라이브러리를 무시함 | 명시적인 --ui 값으로 다시 실행하고 생성된 임포트를 검사하세요. |
| 생성된 레이아웃 크기가 잘못됨 | 스크린샷 내보내기 너비가 대상 라이브러리 기준과 일치하는지 확인하세요. |
참고 자료
- npm 패키지:
ui-to-vue-converter