oil-oil/draw-ui

해결하는 문제

draw-ui는 AI 에이전트를 위한 전문적인 UI 디자인 기술을 제공하여 추상적인 페이지 요구사항과 구체적인 시각적 디자인 또는 기능 코드 사이의 격차를 메웁니다. 요구사항 확인 및 참조 기반 생성의 구조화된 프로세스를 강제함으로써 AI 생성 인터페이스가 일반적이거나 비즈니스 요구와 시각적으로 분리되는 문제를 해결합니다.

작동 방식

이 도구는 두 가지 주요 모드로 작동합니다:

1. 디자인 생성: 텍스트 요구사항을 UI 디자인 드래프트로 변환합니다. 에이전트는 먼저 페이지의 핵심 기능, 사용 가능한 참조 스크린샷, 고정 영역(예: 네비게이션 바)을 확인합니다. 두 가지 프롬프팅 전략을 사용합니다: '유사성'은 창의적인 방향성을 제공하고, '체크리스트'는 정확한 비즈니스 데이터를 확보합니다. 참조 이미지를 사용하여 스타일 일관성을 유지하거나 특정 레이아웃 프레임을 고정할 수 있습니다.
2. 코드 재구성: 디자인 드래프트 또는 스크린샷을 실행 가능한 HTML/CSS 또는 WeChat 미니 프로그램 페이지로 변환합니다. 레이아웃(코드로 처리)과 복잡한 시각적 자산(이미지 생성/추출로 처리)을 분리한 후, 결과 페이지를 원본 디자인과 반복적으로 비교하여 출력을 개선합니다.

대상 사용자

• UI 마크업 또는 프로토타입의 자동화를 원하는 AI 에이전트 사용자.
• 디자인 스크린샷을 신속하게 기능적인 프론트엔드 코드(HTML/CSS 또는 WeChat 미니 프로그램)로 변환하고자 하는 개발자.
• AI를 활용해 다양한 UI 방향을 빠르게 탐색하고자 하는 제품 디자이너.

주요 특징

• 참조 기반 디자인: 네비게이션/사이드바를 고정하고 콘텐츠 영역만 재생성하는 '프레임 잠금'을 지원합니다.
• 다중 플랫폼 출력: 표준 웹 코드(HTML/CSS)와 WeChat 미니 프로그램 전용 코드(WXML/WXSS)를 모두 생성합니다.
• 자산 분리: 페이지를 CSS 기반 레이아웃과 독립된 이미지 자산으로 지능적으로 분리하여 텍스트 흐림이나 아티팩트를 방지합니다.
• 반복적 개선: 스크린샷 비교 워크플로우를 사용하여 최종 코드가 원본 디자인의 픽셀과 일치함을 보장합니다.