UIGEN-X-32B-0727 리뷰: 프롬프트를 웹사이트로 바꾸는 로컬 모델

작성자 Andrew Miller · 2025년 8월 7일

보관된 글입니다. 2025년 8월에 작성된 글이며, 이후 가격, 모델, 기능이 바뀌었을 수 있습니다. 최신 내용은 최고의 AI 코딩 모델에서 확인하세요.

범용 챗봇에 웹 페이지를 요청하면 작동은 하지만 제대로 된 디자인이 없는 코드를 받기 쉽습니다. UIGEN-X-32B-0727은 프런트엔드 코드를 쓰도록 특별히 학습된 언어 모델입니다. Tesslate가 만들었고, Qwen 3를 기반으로 하며, HTML, CSS, JavaScript를 쓰기 전에 디자인을 계획하고 추론합니다.

UIGEN-X-32B 웹사이트 스크린샷 — UIGEN-X-32B 공식 사이트

곧바로 코드로 가지 않고 세 단계로 작업합니다.

요청한 내용을 분석합니다.
페이지 구조와 디자인 시스템을 정합니다.
컴포넌트로 나뉜 깔끔한 코드를 씁니다.

사양

항목	내용
모델 크기	32B 매개변수(여러 샤드, 전체 정밀도에서 VRAM 약 61GB)
라이선스	Apache 2.0(상업적 사용 허용)
추론 우선	코드를 생성하기 전에 여러 단계로 계획
UI 프레임워크	React, Next.js, Tailwind, Chakra, Material UI, Flutter, Electron 등
시각 스타일	Glassmorphism, Neomorphism, Cyberpunk, Brutalism
모바일	React Native, Expo, Flutter
상태 관리	Zustand, Pinia
애니메이션	Framer Motion, GSAP
아이콘 라이브러리	Lucide, Heroicons, Font Awesome 등

필요한 것

요구 사항	권장
OS	Ubuntu 20.04+ 또는 WSL2/macOS
GPU	최소 VRAM 48GB(예: RTX A6000 또는 H100)
RAM	시스템 메모리 32GB+
소프트웨어	Python 3.10+, vLLM, Node.js, npm

설치하기

1단계: vLLM 설치와 모델 제공

pip install vllm

그런 다음 실행합니다.

python3 -m vllm.entrypoints.openai.api_server \
  --model "TestlateAI/UAGX-32B" \
  --port 8000

약 14개 샤드를 내려받고 localhost:8000에서 OpenAI 호환 API로 모델을 제공합니다.

2단계: 웹 인터페이스 설치

git clone https://github.com/TesslateAI/UIGEN-T2-Artifacts.git
cd UIGEN-Demo
npm install

필요하면 다음을 수정합니다.

개발 설정용 vite.config.js
모델 목록에 "UAGX-32B"를 추가하기 위한 src/app.tsx

그런 다음 실행합니다.

npm run dev

인터페이스는 http://localhost:5173에 있고, 모델 자체는 Hugging Face에 있습니다.

예시 프롬프트

아래 결과는 이 글을 쓸 당시 보고된 내용입니다.

데이팅 앱

프롬프트: "Create a modern dating app UI using React and Tailwind. Include profile cards, swipe animation, and a match list."

결과는 색 구성을 설명해 준 탭 인터페이스, 구조화된 프로필 컴포넌트, React와 Tailwind로 만든 애니메이션이었습니다.

SaaS 분석 대시보드

프롬프트: "Create a responsive analytics dashboard using Next.js and Tailwind. Dark mode, glassmorphism cards, collapsible sidebar."

반응형 사이드바 레이아웃, 그래프 자리 표시자, 은은한 호버 효과가 있는 카드, 올바른 Tailwind 설정을 만들었습니다.

React Native 습관 추적기

프롬프트: "Create a habit tracking app in React Native using Expo with tabs: dashboard, calendar, profile."

코드는 올바르게 생성되었지만 미리보기가 렌더링되지 않았습니다. 현재 웹 인터페이스에서 복잡한 모바일 레이아웃에 생기는 알려진 문제입니다.

점수

항목	점수(1에서 5)
UI 추론	5.0
코드 구조	4.5
프레임워크 정확도	4.5
시각적 렌더링	4.0
모바일 지원	3.5
VRAM 효율	3.0

주의할 점: 최소 48GB 카드가 필요하고, 전체 정밀도로 돌리려면 약 61GB가 필요하므로 대부분의 사람은 집에서 돌릴 수 없습니다. 모바일 레이아웃이 약점입니다. 코드는 맞을 수 있지만 미리보기는 틀리는 경우가 많습니다.

결론: 하드웨어를 갖춘 개발자나 제품 디자이너에게는 프로젝트 초반의 지루한 몇 시간을 덜어 줍니다. UI 상용구, SaaS 대시보드, 마케팅 랜딩 페이지, React나 Next.js 프로토타입에서 가장 잘하며, 프런트엔드 작업을 가르치는 데도 쓸모 있는 도구입니다.