Menu
스크린샷/이미지에서 UI 코드를 생성. Claude 비전으로 디자인 속성을 추출하고, 디자인 지식 DB(BM25)로 매칭하여 프레임워크별 코드 생성
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
디자인 지식 기반 + 시각 비교 + WCAG 접근성 체크 통합 폴리싱. 서비스 유형별 UI 추론, 66개 스타일/96개 색상/57개 타이포 검색, 트렌드 분석, Gap 분석, 8단계 우선순위 개선안 도출. /design-polish 명령으로 실행.
디자인 전면 리뉴얼. 디자인 시스템 교체 수준의 대규모 변경. 색상 팔레트/타이포그래피/컴포넌트/레이아웃 전면 교체. 지식 기반 + 시각 비교 + WCAG 접근성 체크 통합. /design-renewal 명령으로 실행.
| name | design-from-screenshot |
| description | 스크린샷/이미지에서 UI 코드를 생성. Claude 비전으로 디자인 속성을 추출하고, 디자인 지식 DB(BM25)로 매칭하여 프레임워크별 코드 생성 |
스크린샷 또는 디자인 이미지를 분석하여 프레임워크별 UI 코드를 생성합니다. Claude의 비전 능력 + design-polish 지식 기반(67 styles, 96 colors, 57 typography)을 결합합니다.
$1 (필수): 이미지 파일 경로 (PNG, JPG, WebP)--framework <name>: 타겟 프레임워크 (미지정시 프로젝트에서 자동 감지)
react | next | vue | nuxt | svelte | flutter | html--style-hint "<keyword>": 스타일 힌트 (예: "glassmorphism", "minimal dark")--apply: 생성된 코드를 파일로 작성[[ -f "$IMAGE_PATH" ]] || echo "ERROR: Image not found"
pubspec.yaml 존재 → flutterpackage.json에 next → nextpackage.json에 nuxt → nuxtpackage.json에 vue → vuepackage.json에 svelte → sveltepackage.json에 react → reacthtmltailwind.config.* → Tailwind CSSstyled-components in package.json → styled-components*.module.css 파일 존재 → CSS Modules*.scss 파일 존재 → SCSS이미지를 Read하여 구조화된 디자인 속성을 추출합니다.
Read("$IMAGE_PATH")
추출 항목:
| 카테고리 | 추출 대상 |
|---|---|
| Layout | Grid/Flex 구조, 섹션 배치, 정렬, 콘텐츠 영역 비율 |
| Colors | 배경색, 텍스트색, 액센트색, CTA 색상 (Hex 추정) |
| Typography | 헤딩 크기/무게, 본문 크기, 폰트 패밀리 추정 |
| Components | 버튼, 카드, 네비게이션, 폼, 모달, 이미지 영역 |
| Spacing | 패딩/마진 패턴, 갭 크기 추정 |
| Effects | 그림자, 보더, 라운딩, 그라디언트, 블러, 오버레이 |
출력 포맷 (내부 사용):
## Visual Analysis Result
### Layout
- Structure: [grid/flex/mixed]
- Sections: [식별된 섹션 목록]
- Alignment: [center/left/right]
### Colors (estimated hex)
- Background: #XXXXXX
- Text Primary: #XXXXXX
- Text Secondary: #XXXXXX
- Accent/CTA: #XXXXXX
- Border: #XXXXXX
### Typography
- Heading: [estimated font, size, weight]
- Body: [estimated font, size, weight]
### Components
- [component_type]: [설명]
### Effects
- [effect_type]: [설명]
Phase 1에서 추출한 키워드로 디자인 지식 DB를 검색합니다.
통합 검색 (권장):
node "${CLAUDE_PLUGIN_ROOT}/scripts/search.cjs" --domain all "<Phase 1에서 추출한 스타일 키워드>"
또는 개별 검색:
# 스타일 매칭 (layout + effects 키워드 기반)
node "${CLAUDE_PLUGIN_ROOT}/scripts/search.cjs" --domain style "<style keywords>"
# 컬러 매칭 (추출된 색상 분위기 기반)
node "${CLAUDE_PLUGIN_ROOT}/scripts/search.cjs" --domain color "<color mood keywords>"
# 타이포그래피 매칭 (추출된 폰트 특성 기반)
node "${CLAUDE_PLUGIN_ROOT}/scripts/search.cjs" --domain typography "<typography keywords>"
--style-hint가 제공된 경우:
node "${CLAUDE_PLUGIN_ROOT}/scripts/search.cjs" --domain all "<style-hint>"
지식 파일 로드:
Read("${CLAUDE_PLUGIN_ROOT}/knowledge/component-checklist.md")
Read("${CLAUDE_PLUGIN_ROOT}/knowledge/ux-rules.md")
프레임워크별 가이드 (해당 시):
node "${CLAUDE_PLUGIN_ROOT}/scripts/search.cjs" --domain stack --stack <framework> "component layout best practice"
Phase 1(시각 분석) + Phase 2(지식 매칭) 결과를 결합하여 코드를 생성합니다.
| Framework | 파일 구조 | 스타일링 |
|---|---|---|
| React/Next.js | ComponentName.tsx | Tailwind / CSS Modules (감지된 스타일링 방식) |
| Vue/Nuxt | ComponentName.vue (SFC) | <style scoped> |
| Svelte | ComponentName.svelte | <style> |
| Flutter | component_name.dart | ThemeData + 인라인 스타일 |
| HTML/CSS | index.html + style.css | 시맨틱 HTML + BEM CSS |
매칭된 스타일의 cssHints와 프레임워크 가이드를 참조하여 반응형 브레이크포인트 포함:
생성된 코드의 품질을 검증합니다.
Component Checklist 대조
knowledge/component-checklist.md의 Do/Don't 목록과 비교:
UX Rules 대조
knowledge/ux-rules.md 검증:
접근성 기본 검증
디자인 토큰 요약
## Design Tokens
| Token | Value | Source |
|-------|-------|--------|
| --color-primary | #2563EB | Image analysis |
| --color-background | #F8FAFC | DB match: SaaS palette |
| --font-heading | Poppins | DB match: Modern Professional |
| --font-body | Inter | DB match: Modern Professional |
| --radius-md | 8px | Image analysis |
| --shadow-md | 0 4px 6px rgba(0,0,0,0.1) | DB match: Flat Design |
생성된 코드 프레임워크별 완전한 코드 블록
접근성 개선 제안 (원본 이미지에 문제가 있는 경우)
파일을 직접 작성: