AI 요약
샤오미가 출시한 AI 코딩 에이전트 'MiMo Code'의 공식 웹사이트가 높은 디자인 완성도로 주목받는 가운데, 한 개발자가 OpenAI Codex를 활용해 해당 웹사이트를 1:1로 복제하는 과정을 공유했다. 개발자는 웹사이트 링크를 Codex에 직접 전달하는 방식으로 약 10분 만에 홈페이지를 복제했으며, 마우스 이동 시 배경 이미지가 드러나는 '마우스擦除露图' 효과와 타이포그래피, 레이아웃까지 높은 정확도로 재현했다. 또한 DESIGN.md 파일을 추출해 다른 웹사이트에 UI 스타일을 이식하는 방법과 특수 효과를 기술 문서화하여 재사용하는 워크플로우도 제안했다.
핵심 포인트
- MiMo Code는 샤오미가 출시한 AI 코딩 에이전트로, 100만 토큰 컨텍스트를 무료로 제공
- Codex에 웹사이트 URL만 전달해 1:1 복제에 성공, Plus 구독 한도의 절반 정도를 사용
- 복제 과정에서 폰트, 이미지 등 리소스도 자동으로 크롤링됨
- DESIGN.md 파일 추출 및 기술 문서화를 통한 UI 스타일 이식 방법론 제시
향후 전망
- AI 에이전트를 활용한 웹사이트 복제 및 스타일 이식이 프론트엔드 개발 워크플로우의 새로운 표준이 될 가능성
- 디자인 시스템 추출 자동화를 통한 UI 개발 생산성 대폭 향상 기대
출처:juejin