Stats
Actions
Tags
From design-polish
스크린샷/이미지에서 UI 코드 생성. Claude 비전 + 디자인 지식 DB로 정확한 코드 변환
How this command is triggered — by the user, by Claude, or both
Slash command
/design-polish:design-from-screenshot <image-path> [--framework react|flutter|vue|svelte|html] [--style-hint "keyword"] [--apply]The summary Claude sees in its command listing — used to decide when to auto-load this command
# 디자인 → 코드 변환 스크린샷이나 디자인 이미지를 분석하여 프레임워크별 UI 코드를 생성합니다. Claude 비전으로 디자인 속성(레이아웃, 색상, 타이포, 컴포넌트)을 추출하고, 디자인 지식 DB(67개 스타일, 96개 팔레트, 57개 타이포그래피)로 보강하여 정확한 코드를 생성합니다. ## 옵션 - `$1` (필수): 이미지 파일 경로 (PNG, JPG, WebP) - `--framework <name>`: 타겟 프레임워크 (미지정시 프로젝트에서 자동 감지) - react, next, vue, nuxt, svelte, flutter, html - `--style-hint "<keyword>"`: 스타일 힌트 (예: "glassmorphism", "minimal dark", "brutalist") - `--apply`: 생성된 코드를 파일로 직접 작성 ## 사용 예시 ## 실행 design-from-screenshot 스킬을 호출하여 실행합니다.
스크린샷이나 디자인 이미지를 분석하여 프레임워크별 UI 코드를 생성합니다. Claude 비전으로 디자인 속성(레이아웃, 색상, 타이포, 컴포넌트)을 추출하고, 디자인 지식 DB(67개 스타일, 96개 팔레트, 57개 타이포그래피)로 보강하여 정확한 코드를 생성합니다.
$1 (필수): 이미지 파일 경로 (PNG, JPG, WebP)--framework <name>: 타겟 프레임워크 (미지정시 프로젝트에서 자동 감지)
--style-hint "<keyword>": 스타일 힌트 (예: "glassmorphism", "minimal dark", "brutalist")--apply: 생성된 코드를 파일로 직접 작성/design-from-screenshot screenshot.png
/design-from-screenshot hero.png --framework react
/design-from-screenshot mockup.png --framework flutter --style-hint "minimal saas"
/design-from-screenshot landing.png --apply
design-from-screenshot 스킬을 호출하여 실행합니다.
npx claudepluginhub vp-k/design-polish