Draw UI — UI 시안 생성 & 화면 복원

무엇을 해주나

• 요청과 기존 프로젝트에서 페이지 목표·범위·타깃 기기·전달 형태를 먼저 정리해 작업 범위를 확정합니다.
• 상황에 따라 세 갈래 경로로 분기합니다: ① 신규 디자인/스타일 탐색 ② 스크린샷 복원·시각 보정 ③ 시안 확정 후 코드 구현.
• 레이아웃·텍스트·컨트롤·아이콘·차트는 코드로 구현, 사진·일러스트·브랜드 비주얼은 별도 에셋으로 분리해 편집 가능성을 유지합니다.
• 참고 이미지를 "스타일 차용"과 "정밀 복원"으로 구분해 다루고, 생성 후에는 실제 이미지를 열어 목표 뷰포트 기준으로 검수합니다.
• 산출물은 이미지/실행 가능한 파일 + 간단한 구현 설명 + 미검증 항목까지 함께 전달하도록 규정합니다.

이런 분께 추천

• 기획안만 있고 디자이너 없이 랜딩페이지나 관리자 화면 시안이 필요한 1인 개발자·스타트업
• 받은 디자인 시안이나 경쟁사 스크린샷을 HTML/CSS 또는 미니프로그램으로 고충실도 복원해야 하는 프론트엔드 개발자
• AI 생성 UI 이미지의 품질을 체크리스트로 검수하고 싶은 기획자

활용 예시

1. "SaaS 제품 공식 홈페이지 랜딩페이지를 내비게이션부터 푸터까지 한 장으로 만들어줘" → 긴 페이지 생성 가이드에 따라 분할 생성 후 전체 프리뷰 제공
2. "이 앱 스크린샷을 우리 Vue 프로젝트 컴포넌트로 똑같이 옮겨줘" → 측정·캘리브레이션 후 기존 컴포넌트/폰트를 재사용해 구현
3. "이 사이트 느낌만 참고해서 우리 서비스용 대시보드 UI를 그려줘" → 여백·타이포 대비·비율만 추출하고 콘텐츠는 우리 업무에 맞게 재구성

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/oil-oil/draw-ui/HEAD/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

AI 스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 oil-oil/draw-ui 의 SKILL.m 폴더를 내 ~/.claude/skills/draw-ui/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.