UI design & mockup skill for Claude Code & Codex, from screenshot to code. 帮你出 UI 设计稿并还原成页面。

draw-ui – 에이전트를 위한 AI 보조 UI 설계 스킬

개요

draw-ui는 AI 에이전트가 제품 페이지에 대한 텍스트 설명이나 기존 스크린샷을 완전한 UI 디자인으로 변환하고, 선택적으로 실행 가능한 HTML/CSS(또는 위챗 미니 프로그램)로 변환할 수 있게 해주는 스킬(플러그인)입니다. 이 스킬은 전체 워크플로우를 처리합니다:

페이지 목적, 핵심 기능 및 불변 영역(예: 고정 사이드바)을 명확히 합니다.
선택적으로 참조 이미지를 입력하여 스타일, 타이포그래피, 간격 등을 조정합니다.
선택한 시각적 방향을 따르는 비주얼 목업(PNG/JPEG)을 생성합니다.
목업을 코드(레이아웃, 컴포넌트, 텍스트)와 에셋(로고, 일러스트, 사진)으로 분할합니다.
디자인 목업 및 즉시 사용 가능한 구현(HTML/CSS 또는 미니 프로그램용 WXML/WXSS)을 출력합니다.

이 스킬은 이미지 생성 기능이 있는 LLM 기반 에이전트(ChatGPT 스타일의 봇 등)에 의해 호출되도록 설계되었습니다. 이는 프론트엔드 프레임워크를 대체하는 것이 아니며, 개발자가 기존 React/Vue/TS 프로젝트에 넣거나 정적 페이지로 제공할 수 있는 디자인 결과물을 생성할 뿐입니다.

사용 방법

두 가지 진입점이 있습니다:

1. 에이전트에서 직접 호출

請安装这个 Skill：https://github.com/oil-oil/draw-ui

스킬이 설치된 후, 에이전트에게 다음과 같이 프롬프트를 보낼 수 있습니다:

[$draw-ui] 帮我设计一个创作者数据分析页面，包含 30 天趋势、热门内容和收入数据。

또는 기존 UI를 재구성하려면:

[$draw-ui] 把这张设计稿还原成 HTML/CSS，侧边栏保持不变，先告诉我哪些部分需要单独准备图片素材。

이 스킬은 정보가 모호한 경우에만 세 가지 명확화 질문(페이지 목적, 참조 스크린샷, 불변 영역)을 합니다.

2. 명령줄 설치

npx skills add oil-oil/draw-ui   # 스킬 등록

그 후 터미널이나 기본 LLM 서비스와 통신하는 스크립트에서 스킬을 호출할 수 있습니다.

핵심 기능

입력	draw-ui의 동작	출력
텍스트 설명만	처음부터 전체 페이지 비주얼 컨셉을 생성하고 레이아웃, 색상 팔레트, 컴포넌트 계층을 결정합니다.	하나 이상의 디자인 목업 이미지 + 간단한 구현 가이드.
스크린샷 + 불변 영역	고정 부분(예: 내비게이션 바)을 추출하고, 해당 영역을 유지하면서 나머지를 재설계합니다.	업데이트된 목업 + 변경되지 않은 섹션을 재사용하는 HTML/CSS(또는 미니 프로그램).
참조 스타일 이미지	새로운 비즈니스 사례에 맞게 콘텐츠를 재배치하면서 참조 이미지의 폰트 선택, 간격, 시각적 언어를 복사합니다.	스타일이 일치하는 목업 + 참조의 시각적 문법을 반영한 코드.
기존 프론트엔드 프로젝트	프로젝트의 스택(React, Vue, TS 등)을 사용하여 생성된 디자인에 맞는 컴포넌트를 출력합니다.	프로젝트에 넣을 수 있는 컴포넌트 파일.

이 스킬은 디자인 결과물(이미지)과 실행 가능한 결과물(HTML/CSS, WXML/WXSS)을 구분합니다. 완전히 반응형이거나 접근성을 준수하는 구현을 보장하지는 않으며, 이러한 측면은 개발자가 검증해야 합니다.

기술적 세부 사항

의존성 – Python 3.10+, 이미지 처리를 위한 Pillow, ZenMux 어댑터를 위한 선택적 google-genai. Node 22.18+는 npx skills add 래퍼에만 필요합니다.
지원 플랫폼 – macOS(테스트 완료), Windows(PowerShell 진입점, 완전 검증되지 않음), Linux(Bash 경유). 핵심 로직은 OS와 무관하며 스크립트 래퍼만 다릅니다.
모델 통합 – 기본적으로 호스트 에이전트의 내장 이미지 생성 모델을 사용합니다. 스킬 설정(references/generation.md 참조)을 통해 모델/서비스를 재정의할 수 있습니다.
워크플로우 –
1. 프롬프트 오케스트레이션 – 스킬은 명확해진 요구 사항과 참조 이미지를 포함하는 프롬프트를 구축합니다.
2. 이미지 생성 – 선택한 이미지 모델을 호출하여 UI 목업(단일 긴 페이지 또는 세그먼트화된 블록)을 생성합니다.
3. 측정 및 추출 – Pillow를 사용하여 컴포넌트 경계 상자를 측정하고, 깨끗한 에셋을 추출하며, 색상/간격 값을 기록합니다.
4. 코드 합성 – 측정된 레이아웃을 기반으로 HTML/CSS(또는 WXML/WXSS)를 조립하고, 수동 생성이 필요한 에셋에 대한 자리 표시자를 삽입합니다.
테스트 – 단위 테스트(python -m unittest discover) 및 쉘 테스트(bash tests/test_ask_draw.sh)는 요청 패키징, 출력 정리, 블록 조립, 에셋 투명도 및 영역 측정을 다룹니다.
API 키 처리 – 외부 이미지 서비스를 사용할 때 로컬 설정 UI가 키를 시스템 자격 증명 저장소에 저장합니다. 키는 절대 LLM으로 전송되지 않습니다.

적합하지 않은 경우

포스터, 일러스트, 스토리보드와 같은 순수 그래픽 작업(draw-ui는 제품 지향적인 UI 페이지에 집중합니다).
완전한 상호 작용 로직, 반응형 중단점 또는 즉시 사용 가능한 접근성 준수가 필요한 프로젝트.
이미지 생성 기능이 없는 환경(스킬은 제한 사항을 보고하기만 합니다).

라이선스

MIT – 이 스킬을 자유롭게 사용, 수정 및 재배포할 수 있습니다.

요약: draw-ui는 AI 기반의 에이전트 친화적인 플러그인으로, 페이지 설명이나 스크린샷을 시각적 디자인과 스타터 HTML/CSS(또는 미니 프로그램) 구현으로 변환합니다. 스타일 참조, 불변 영역, 에셋 추출을 처리하며 최종 코딩과 QA는 개발자에게 맡깁니다.

oil-oil/draw-ui