ScreenCoder: 디자인 스크린샷을 구조가 명확하고 편집 가능한 HTML/CSS 코드로 변환 232

임의의 디자인 스크린샷을 구조가 명확하고 편집 가능한 HTML/CSS 프런트엔드 코드로 변환해주는 오픈소스 AI 도구입니다. 모듈형 멀티 에이전트 아키텍처를 기반으로 시각 이해, 레이아웃 분석, 코드 생성 기술을 결합하여 의미가 정확하고 레이아웃이 정밀한 코드를 출력합니다.

#Ai工具箱 #Ai编程建站

방문 ScreenCoder: 디자인 스크린샷을 구조가 명확하고 편집 가능한 HTML/CSS 코드로 변환

ScreenCoder: 디자인 스크린샷을 구조가 명확하고 편집 가능한 HTML/CSS 코드로 변환소개

ScreenCoder는 임의의 디자인 스크린샷을 구조가 명확하고 편집 가능한 HTML/CSS 프론트엔드 코드로 변환할 수 있는 오픈소스 ai 도구입니다. 모듈형 멀티 에이전트 아키텍처를 사용하여 시각적 이해, 레이아웃 분석 및 코드 생성 기술을 결합하며, 출력되는 코드는 의미가 정확하고 레이아웃이 정밀합니다. 사용자는 인터페이스 구조와 스타일을 손쉽게 조정하여 디자인 이미지에서 실행 가능한 프론트엔드 인터페이스까지의 seamless한 연계를 실현할 수 있으며, 빠른 프로토타입 개발과 픽셀 단위 복원이 필요한 프로젝트에 적합하고 개발 효율을 눈에 띄게 향상시킬 수 있습니다.

ScreenCoder 주요 기능

스크린샷을 프론트엔드 코드로 변환: ScreenCoder는 UI 스크린샷이나 디자인 시안을 클릭 한 번으로 구조가 잘 갖춰진 HTML 및 CSS 코드로 변환하는 것을 지원합니다.
고충실도 복원: ScreenCoder가 생성한 코드는 시각적 레이아웃과 의미적 구조가 원본 디자인과 매우 유사하여 픽셀 단위 정렬과 기능의 완전성을 보장합니다.
유연한 편집 가능성: 사용자는 생성된 레이아웃 구조와 스타일 속성을 자유롭게 수정할 수 있어 후속 개발과 맞춤 조정이 편리합니다.
다중 모델 통합: Doubao, Qwen, GPT, Gemini 등 다양한 주요 대규모 모델과 호환되며, 사용자는 필요에 따라 생성 엔진을 선택할 수 있습니다.
바로 사용 가능한 출력: 생성된 코드는 프로덕션 수준 품질에 도달하여 프로젝트에 직접 사용할 수 있으며, 빠른 프로토타입이나 완전한 프론트엔드 인터페이스 구축을 지원합니다.

ScreenCoder 기술 아키텍처

ScreenCoder의 핵심 기술은 UI에서 코드로의 복잡한 작업을 세 가지 전문 하위 작업으로 분할하는 것이며, 각 하위 작업은 전용 에이전트가 담당합니다:
위치 파악 에이전트(Grounding Agent): 시각 언어 모델(VLM)을 사용하여 UI 인터페이스의 핵심 컴포넌트를 감지하고 표시합니다.
계획 에이전트(Planning Agent): 프론트엔드 엔지니어링의 모범 사례에 따라 이러한 컴포넌트를 계층적 레이아웃 트리로 구성합니다.
생성 에이전트(Generation Agent): 레이아웃 트리와 사용자 지침을 기반으로 고품질 코드를 적응적으로 생성합니다.

ScreenCoder 활용 시나리오

프론트엔드 개발 가속: UI 디자인 스크린샷을 고품질 HTML/CSS 코드로 빠르게 변환하여 프론트엔드 개발 주기를 단축합니다.
디자인과 개발 협업: 디자인 스크린샷을 직접 작동 가능한 코드로 변환하여 디자인 팀과 개발 팀 간의 seamless한 협업을 촉진합니다.
빠른 프로토타입 제작: 디자인 개념을 즉시 상호작용 가능한 프론트엔드 프로토타입으로 변환하여 제품 디자인의 초기 검증 및 사용자 테스트를 가속화합니다.
교육 및 훈련: 학생과 신입 개발자가 UI 디자인과 프론트엔드 코드 간의 관계를 이해하도록 돕는 교육 도구로 사용됩니다.
소규모 팀 및 스타트업: 자원이 제한된 소규모 팀과 스타트업에 효율적인 코드 생성 솔루션을 제공합니다.

ScreenCoder 사용 방법

설치 및 배포

1. 저장소 복제: 터미널에서 다음 명령을 실행하여 ScreenCoder 프로젝트를 로컬로 복제합니다:

git clone https://github.com/leigest519/ScreenCoder.git
cd ScreenCoder

2. 가상 환경 생성: 의존성 충돌을 방지하기 위해 Python 가상 환경을 생성할 것을 권장합니다:

python3 -m venv .venv
source .venv/bin/activate

Windows 사용자는 다음을 사용합니다: source .venv\Scripts\activate.

3. 의존성 설치: 프로젝트에 필요한 Python 라이브러리를 설치합니다:

pip install -r requirements.txt

4. 모델 및 API 키 구성:

프로젝트 루트 디렉터리에 선택한 모델에 해당하는 텍스트 파일(예: doubao_api.txt, qwen_api.txt, gpt_api.txt, gemini_api.txt)을 생성하고 API 키를 파일에 붙여넣습니다.
block_parsor.py 및 html_generator.py에서 필요한 모델을 설정하며, 지원되는 옵션은 다음과 같습니다: Doubao(기본값), Qwen, GPT, Gemini.