WeaveFox: 설계 도면에서 직접 소스 코드를 생성하는 지능형 프런트엔드 개발 플랫폼

일반 소개

위브폭스는 앤트그룹에서 출시한 AI 프론트엔드 지능형 R&D 플랫폼으로, AI 기술을 통해 프론트엔드 개발의 효율성과 품질을 향상시키는 것을 목표로 합니다. 이 플랫폼은 Ant가 자체 개발한 Bailing 멀티모달 대형 모델을 기반으로 설계 도면을 기반으로 프론트엔드 소스 코드를 직접 생성할 수 있으며, React, Vue 등 다양한 클라이언트 및 기술 스택을 지원합니다. 위브폭스는 설계 초안을 정확하게 복원할 뿐만 아니라 개인화된 요구 사항에 맞게 2차 조정까지 지원합니다. 현재 위브폭스는 비공개 소스 개발 중이며 내년에 정식으로 오픈되어 프론트엔드 개발자에게 혁신적인 개발 경험을 선사할 예정입니다.

기능 목록

• 설계 도면을 기반으로 프런트엔드 소스 코드 생성
• 여러 클라이언트 유형(콘솔, 모바일 H5, 애플릿 등) 지원
• 여러 기술 스택(예: React, Vue 등)과 호환 가능
• 세분화된 UI 이해 및 최적화 서비스 제공
• 개별 요구 사항을 충족하기 위한 2차 조정 지원
• 프론트엔드 개발의 효율성과 품질 향상

도움말 사용

설치 프로세스

현재 위브폭스는 비공개 소스 개발 중이며 아직 다운로드 및 설치가 불가능합니다. 내년에 공식적으로 오픈되면 공식 웹사이트를 통해 플랫폼을 다운로드하여 설치할 수 있을 것으로 예상됩니다.

사용 가이드라인

1. 로그인 및 설정위브폭스 공식 웹사이트에 방문하여 계정을 등록하고 로그인합니다. 안내에 따라 초기 설정을 완료합니다.
2. 디자인 업로드다양한 형식(예: PNG, JPEG 등)을 지원하는 플랫폼 인터페이스에서 설계 도면을 업로드합니다.
3. 기술 스택 선택프로젝트 요구 사항에 따라 적합한 기술 스택(예: React, Vue 등)을 선택합니다.
4. 코드 생성"코드 생성" 버튼을 클릭하면 WeaveFox가 설계 도면에 따라 프런트엔드 소스 코드를 자동으로 생성합니다.
5. 코드 조정생성된 코드는 플랫폼 내에서 개별 요구 사항을 충족하기 위해 두 번 수정할 수 있습니다.
6. 다운로드 및 배포튜닝을 완료한 후 생성된 코드를 다운로드하여 적절한 개발 환경에 배포합니다.

세부 기능 작동

• 디자인 업로드드래그 앤 드롭 업로드와 파일 선택을 모두 지원하며, 업로드 후 플랫폼에서 자동으로 디자인을 파싱합니다.
• 기술 스택 선택다양한 기술 스택 옵션을 사용할 수 있으므로 사용자는 프로젝트의 필요에 따라 자유롭게 선택할 수 있습니다.
• 코드 생성위브폭스는 앤트가 자체 개발한 베일링 멀티모달 매크로 모델을 기반으로 설계 도면에 부합하는 프론트엔드 코드를 정확하게 생성할 수 있습니다.
• UI 최적화세분화된 UI를 이해하고 정확한 코드 최적화 권장 사항을 제공할 수 있는 플랫폼입니다.
• 보조 조정사용자는 플랫폼 내에서 생성된 코드를 2차적으로 조정하여 최종 코드가 프로젝트 요구 사항을 충족하는지 확인할 수 있습니다.
• 프로젝트 관리프로젝트 관리: 사용자가 플랫폼 내에서 여러 프로젝트를 관리할 수 있는 프로젝트 관리 기능을 제공하여 버전 관리 및 협업을 용이하게 합니다.

데모

다음 움직이는 그림을 살펴 보겠습니다. 움직이는 그림을 통해 배경 페이지에서 그림을 할 수 있음을 알 수 있으며 단순히 "게으른 인공물"의 프런트 엔드 개발자 일뿐입니다!

애초에이미지를 조각으로 자르고 코드를 생성할 부분을 선택한 다음 "코드 생성" 버튼을 세게 누르세요!

수락를 클릭하고 선호하는 기술 스택과 프레임워크(예: React + AntD)를 선택하면 이 똑똑한 슬래커가 선택한 기술 아키텍처에 따라 코드를 생성합니다.

그 후그런 다음 '확인'을 세게 누르면 코드 생성 마법이 작동하기 시작합니다!

궁극긴장을 풀고 몇 분간 기다리면 티타임이 끝나면 반짝이는 코드와 효과의 멋진 미리보기를 볼 수 있습니다!

생성해야 하는 모바일 인터페이스의 사진을 업로드하면 자동으로 인터페이스를 식별한 다음 지능적으로 모바일 코드를 생성하고 효과를 미리 볼 수 있도록 도와줍니다. 움직이는 그림은 다음과 같습니다:

만족스럽지 않다면? 보조 조정도 지원하므로 순식간에 프론트엔드 신이 될 수 있습니다!

페이지가 크면 어떻게 하나요? 자동 컷 파티션에서 코드 생성까지, 원래 몇 시간씩 개발해야 했던 B 스테이션 홈 페이지를 단 몇 분 만에 복제해 보겠습니다.