Menú
스크린샷/이미지에서 UI 코드를 생성. Claude 비전으로 디자인 속성을 추출하고, 디자인 지식 DB(BM25)로 매칭하여 프레임워크별 코드 생성
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
디자인 지식 기반 + 시각 비교 + 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 |
생성된 코드 프레임워크별 완전한 코드 블록
접근성 개선 제안 (원본 이미지에 문제가 있는 경우)
파일을 직접 작성: