ByteDance 업데이트 프로그래밍 모델인 Doubao-Seed-Code는 Claude Code에서 이미지 모드를 지원합니다. 사용 가능한 이미지 리소스를 제공하지 않고 Figma에서 템플릿을 직접 복제해 보겠습니다. 👇 이번에는 모든 프롬프트가 공개되었습니다. 원래 웹사이트는 다음과 같았습니다. (1/9)
제가 사용한 복제 프롬프트는 다음과 같습니다. [이미지 #1]의 복제본을 만들어 주세요. 이 작업을 위해 어떤 라이브러리든 사용하세요. 하지만 모든 것을 하나의 HTML 파일에 붙여넣고 Chrome에서 열 수 있는지 확인하세요. 흥미롭고 세부적으로 만들고, 아무도 예상하지 못했던 세부 사항을 보여주며, 하나의 코드 블록에서 완벽하고 아름다운 모습을 보여주세요. (2/9)
확실한 것은 Doubao가 이 프로그래밍 업그레이드 이후 SVG 드로잉을 완전히 익혀서 허공에서 산을 만들어냈다는 것입니다. 상단 탐색 모음(왼쪽 로고, 가운데 링크, 오른쪽 버튼), 메인 타이틀(모든 항목 탐색), 하단의 주요 시각적 영역을 포함하여 전반적인 구조가 복제되었습니다. 이미지 리소스가 부족했음에도 불구하고 Doubao는 헤더 이미지를 최대한 이해하기 위해 노력했고, SVG 산봉우리에 별을 추가하여 원본 이미지의 데이터 포인트를 모방하기도 했습니다. 만약 단점이 있다면, 바로 글꼴입니다. 원본은 세리프 글꼴을 사용했지만 Doubao는 산세리프 글꼴을 사용했고, 테마 색상도 서로 다릅니다. 하나는 연두색이고 다른 하나는 올리브색입니다. (3/9)
해당 이미지 자료를 실행 디렉토리에 추가하고 클로드 코드의 플랜 모드(클로드 코드와 Shift+Tab 간 전환)를 사용하면 잘 고안된 두보의 성능이 더 높아지지 않을까요? 헤더 이미지의 SVG 복제본이 훨씬 더 자세하다는 것은 육안으로 확실히 알 수 있습니다. 텍스트, 폴리라인, 타임라인이 모두 복제되었습니다. 결과적으로 중첩된 계층적 페이지가 더욱 정확해졌습니다. 이전에는 흰색 프레임이 경계로 사용되었지만, 이제는 이미지가 녹색 배경에 겹쳐진 iPad 스타일의 프레임에 배치되어 있음을 명확하게 알 수 있습니다. 또한, 상단 메뉴와 버튼은 이제 원본과 90% 유사하며 누락되거나 잘못된 문자가 없습니다. 제가 올린 이미지는 사용하지 않았지만, 전반적인 품질이 크게 향상되었습니다. 다만, 플랜 모드를 사용하면 실행 시간이 두 배로 늘어납니다. (4/9)
또한 3D 및 게임 애플리케이션에서 Doubao의 성능을 테스트했습니다. 프롬프트의 본문은 다음과 같습니다. 클래식 지뢰찾기 게임을 작성하세요. 요구 사항: 애플리케이션의 구조나 컴포넌트화 패러다임을 변경하는 JavaScript 프레임워크/라이브러리(예: React, Vue, Angular)는 사용하지 마세요. Three.js 및 p5js와 같은 타사 라이브러리는 CDN을 통해 참조되어 요구 사항을 충족할 수 있습니다. 최종 결과물은 순수 HTML, CSS, JS 파일이어야 합니다. 여러 파일(HTML/CSS/JS)이 필요한 경우, 모든 파일 참조는 상대 경로를 사용해야 합니다. 모든 파일은 현재 디렉터리에 저장해야 합니다. (5/9)
프롬프트의 본문은 다음과 같습니다. 파워업, 여러 레벨, 점수 추적 UI를 갖춘 복잡한 뱀 게임을 JavaScript로 만들어 보세요. (6/9)
3D 부분에 관해서는, 프롬프트의 본문은 다음과 같습니다. 공중에 떠 있는 탄력 있는 공들로 만들어진 정육면체의 3D 시뮬레이션입니다. 정육면체는 바닥부터 시작하여 층층이 천천히 무너집니다. 공들은 테이블 위에서 튕기다가 결국 정지합니다. 이 시뮬레이션은 물리 법칙을 준수하고, 멋진 효과를 내며, 사실적인 환경을 조성해야 합니다. 이는 단일 HTML 파일로 구현되어야 합니다. 이 경우, 두보는 레이어, 큐브, 조명과 그림자를 다시 만들었지만 붕괴 효과는 없었습니다. (7/9)
프롬프트의 본문은 다음과 같습니다. 시각적으로 놀랍고 인터랙티브한 태양계 3D 시뮬레이션을 하나의 HTML 파일에 우아하게 담아 제작해 보세요. 사실적인 궤도 운동, 역동적인 조명 효과, 정확한 행성 질감, 그리고 부드러운 카메라 컨트롤을 통해 몰입감 넘치는 경험을 선사합니다. (8/9)
솔직히 말해서, 두보의 3D 시뮬레이션 기능은 좀 부족합니다. 모델은 만들 수 있지만, 상호작용이 좋지 않습니다. 플랜 모드로 전환해서 네다섯 번 정도 돌려야 하는데, 각 대사마다 5~10번 정도 돌려야 원하는 효과를 얻을 수 있습니다. 하지만 다ark.cn-beijing.volces.com/api/compatible여전히 매력적입니다. 환경 변수 구성은 다음과 같습니다. ANTHROPIC_BASE_URL=https://t.co/AGuK3Pa7gI 내보내기 ANTHROPIC_AUTH_TOKEN=를 내보내세요 ANTHROPIC_MODEL=doubao-seed-code-preview-lates 내보내기 (9/9)
