활용 사례와 프롬프트 · 2026.10.11
CLAUDE
HAIKU 5.5활용 사례와 복사해서 쓰는 프롬프트
게임·3D·웹앱·SVG, 실제 결과부터 살펴보세요.
해보고 싶은 작업의 한국어 프롬프트를 한 번에 복사할 수 있어요.

먼저 이렇게 해보세요
결과를 보고
프롬프트를 복사하세요
- 01Claude나 Claude Code에서 Haiku 5.5를 선택하세요.
- 02영상·원본 데모를 열고, 만들고 싶은 사례를 고르세요.
- 03한국어 프롬프트 복사를 눌러 새 대화에 붙여넣으세요. 코드를 실행할 수 있는 환경에서 결과를 확인하세요.
각 프롬프트에 목표·입력·제약·결과 형식과 실제 조작을 확인하는 기준을 넣었어요. API와 Claude Code의 기본 추론 수준은 medium이에요. 긴 구현에서 작업을 일찍 끝낸다면 high를 비교해 보세요.
작성 기준은 Anthropic의 Haiku 5.5 공식 프롬프트 가이드예요. PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
사례와 프롬프트
어떤 걸 만들어 볼까요?
Haiku 5.5로 만든 게임·3D·웹앱·SVG를 모았어요. 결과를 보고 마음에 드는 프롬프트를 복사하세요.
23개의 사례
원본 결과 보기 ↗3D · 이미지와 원본 결과
꽃잎과 조명이 바뀌는 하늘섬 탑
Haiku 5.5 medium으로 만든 Sakura Pagoda예요. 벚나무·붉은 문·떠 있는 섬 위 탑과 시간 슬라이더가 있어요. 시작 카메라가 가까워 마우스 휠로 확대 범위를 조절할 수 있어요.
제작·공개: Vito Ruocco · VitoMind · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 자료는 이 명세이며 별도 파일은 없어. 떠 있는 섬 위 5층 복셀 탑을 만들어 줘. 벚나무·떨어지는 꽃잎·붉은 문·계단·폭포를 넣고 밤에는 창문 조명·반딧불·별이 나타나게 해. 시간 슬라이더와 새벽·낮·노을·밤 버튼, 꽃잎 켜기, 시점 초기화를 제공해. ## 제약 Three.js CDN을 사용하는 단일 HTML로 작성해. 반복되는 큐브는 InstancedMesh로 묶고 드래그 회전·스크롤 확대를 지원해. 초기 시점에 섬과 탑 전체를 보여주고 확대 범위를 제한해. 외부 이미지·음원·유료 API 없이 코드 도형과 직접 생성한 소리만 사용해. 가로 390px와 데스크톱에서 화면과 조작 버튼이 잘리지 않게 해. 소리는 사용자 조작 뒤에만 재생해. 기존 프로젝트가 있으면 구조와 지침을 먼저 읽고 그 안에서 구현해. 새 작업은 독립 폴더를 사용해. 요청한 범위를 끝까지 구현하고 실제 화면과 아래 핵심 동작을 점검해 오류를 고쳐. 완료 후 요청하지 않은 기능이나 리팩터링을 더하지 마. ## 완료 기준 네 시간대를 전환해 하늘·조명·별이 같이 바뀌는지 확인해. 꽃잎을 여러 번 켜고 꺼도 입자가 중복되지 않고 초기화하면 탑 전체가 다시 보여야 해. ## 결과 형식 전체 실행 파일 → 실행 방법 → 실제 확인한 동작과 남은 항목 순서로 한국어로 짧게 답해. 실행 도구가 없으면 사용자가 따라 할 구체적인 점검 순서를 제공해.
원본 결과 보기 ↗게임 · 이미지와 원본 결과
네온 도시 위를 도는 호버 레이싱
Haiku 5.5 low로 만든 Neon Apex예요. 5대의 경쟁 차량·3바퀴 트랙·부스트·미니맵을 제공해요. 제작자는 GO! 문구가 화면에 계속 남는 오류를 밝혔어요.
제작·공개: Vito Ruocco · VitoMind · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 자료는 이 명세이며 별도 파일은 없어. 네온 도시 위 공중 트랙에서 달리는 3D 호버 레이싱을 만들어 줘. 플레이어와 AI 경쟁 차량 5대가 세 바퀴를 돌고 가속 패드·부스트·순위·랩 시간·미니맵을 표시해. 시작 카운트다운과 완주 결과를 넣어. ## 제약 Three.js CDN을 쓰는 단일 HTML로 만들어. W/S 가속·제동, A/D 조향, Space 부스트와 모바일 버튼을 제공해. 고정된 트랙 진행 거리로 AI와 플레이어의 순위를 계산하고 체크포인트를 순서대로 통과해야 랩을 집계해. 외부 이미지·음원·유료 API 없이 코드 도형과 직접 생성한 소리만 사용해. 가로 390px와 데스크톱에서 화면과 조작 버튼이 잘리지 않게 해. 소리는 사용자 조작 뒤에만 재생해. 기존 프로젝트가 있으면 구조와 지침을 먼저 읽고 그 안에서 구현해. 새 작업은 독립 폴더를 사용해. 요청한 범위를 끝까지 구현하고 실제 화면과 아래 핵심 동작을 점검해 오류를 고쳐. 완료 후 요청하지 않은 기능이나 리팩터링을 더하지 마. ## 완료 기준 카운트다운 뒤 GO!는 사라져야 해. 가속·제동·부스트를 조작하고 세 바퀴 완주·재시작을 확인해. 역주행이나 결승선 반복 통과로 랩이 늘지 않고 부스트가 0 이하로 내려가지 않아야 해. ## 결과 형식 전체 실행 파일 → 실행 방법 → 실제 확인한 동작과 남은 항목 순서로 한국어로 짧게 답해. 실행 도구가 없으면 사용자가 따라 할 구체적인 점검 순서를 제공해.
원본 결과 보기 ↗3D · 이미지와 원본 결과
냉장고와 가전을 둘러보는 따뜻한 3D 주방
Haiku 5.5 low로 만든 Warm Kitchen이에요. 가구와 조명·걷기 UI가 있어요. 제작자는 냉장고·토스터와 달리 주전자·수도꼭지·레인지에는 클릭이 전달되지 않는다고 설명했어요.
제작·공개: Vito Ruocco · VitoMind · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 자료는 이 명세이며 별도 파일은 없어. 따뜻한 조명의 3D 주방을 만들어 줘. 냉장고·서랍·수납장·토스터·주전자·수도꼭지·레인지를 배치하고 클릭하면 문 열기·빵 올라오기·수증기·물·불빛이 각각 동작하게 해. 마우스를 올리면 물건 이름을 표시해. ## 제약 Three.js CDN을 사용하는 단일 HTML로 작성해. 궤도 카메라와 WASD 걷기 모드를 제공해. Raycaster가 실제 조작 부품이나 부모 상호작용 객체를 찾게 하고 앞의 장식이 클릭을 가로채지 않게 해. 물체 애니메이션은 중복 클릭에도 하나만 실행해. 외부 이미지·음원·유료 API 없이 코드 도형과 직접 생성한 소리만 사용해. 가로 390px와 데스크톱에서 화면과 조작 버튼이 잘리지 않게 해. 소리는 사용자 조작 뒤에만 재생해. 기존 프로젝트가 있으면 구조와 지침을 먼저 읽고 그 안에서 구현해. 새 작업은 독립 폴더를 사용해. 요청한 범위를 끝까지 구현하고 실제 화면과 아래 핵심 동작을 점검해 오류를 고쳐. 완료 후 요청하지 않은 기능이나 리팩터링을 더하지 마. ## 완료 기준 각 가전과 수납장을 한 번씩 실제 클릭해 올바른 물체가 움직이는지 확인해. 주전자·수도꼭지·레인지까지 반응해야 해. 걷기 모드 진입·종료와 초기 시점 복원, 반복 클릭 후 상태를 점검해. ## 결과 형식 전체 실행 파일 → 실행 방법 → 실제 확인한 동작과 남은 항목 순서로 한국어로 짧게 답해. 실행 도구가 없으면 사용자가 따라 할 구체적인 점검 순서를 제공해.
원본 결과 보기 ↗SVG · 이미지와 원본 결과
카드 삽입부터 영수증까지 이어지는 결제 단말기
Haiku 5.5 medium으로 만든 SVG 단말기예요. 카드·PIN 키·승인 표시·영수증이 순서대로 움직이며 재생 속도와 다시 시작 버튼이 있어요.
제작·공개: Vito Ruocco · VitoMind · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 자료는 이 명세이며 별도 파일은 없어. 아이소메트릭 SVG 결제 단말기 애니메이션을 만들어 줘. 카드가 삽입되고 PIN 버튼이 눌린 뒤 처리 중·승인 상태가 표시되고 영수증이 말리듯 나오는 루프를 구성해. 처음부터 버튼과 0.5–2배 속도 조절을 넣어. ## 제약 HTML·CSS·JavaScript와 인라인 SVG 하나로 만들어. 결제 금액과 카드 번호는 가상 데이터로 고정하고 네트워크 결제·실제 카드 입력은 구현하지 마. 하나의 타임라인으로 카드·키·화면·영수증을 제어하고 움직임 감소 설정에서는 정지 장면을 보여줘. 외부 이미지·음원·유료 API 없이 코드 도형과 직접 생성한 소리만 사용해. 가로 390px와 데스크톱에서 화면과 조작 버튼이 잘리지 않게 해. 소리는 사용자 조작 뒤에만 재생해. 기존 프로젝트가 있으면 구조와 지침을 먼저 읽고 그 안에서 구현해. 새 작업은 독립 폴더를 사용해. 요청한 범위를 끝까지 구현하고 실제 화면과 아래 핵심 동작을 점검해 오류를 고쳐. 완료 후 요청하지 않은 기능이나 리팩터링을 더하지 마. ## 완료 기준 카드 삽입·PIN·승인·영수증 순서를 확인해. 재시작 중간에 다시 눌러도 애니메이션이 겹치지 않고 속도를 바꿔도 단계 순서가 유지돼야 해. 작은 화면에서 SVG와 버튼을 읽을 수 있어야 해. ## 결과 형식 전체 실행 파일 → 실행 방법 → 실제 확인한 동작과 남은 항목 순서로 한국어로 짧게 답해. 실행 도구가 없으면 사용자가 따라 할 구체적인 점검 순서를 제공해.
원본 결과 보기 ↗게임 · 이미지와 원본 결과
라운드마다 몰려오는 농가 좀비 생존 게임
Haiku 5.5 low로 만든 Last Light예요. 출력이 끊겨 추가 요청으로 완성했어요. 제작자는 시작 무기가 화면에 안 보이고 좀비가 카메라와 겹치는 한계를 밝혔어요.
제작·공개: Vito Ruocco · VitoMind · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 자료는 이 명세이며 별도 파일은 없어. 안개 낀 농가에서 창문을 수리하며 버티는 1인칭 좀비 생존 게임을 만들어 줘. 라운드·적 수·점수·탄약·체력을 표시하고 시작 무기, 재장전, 판자 수리, 문 구매, 무기 상자와 업그레이드 작업대를 넣어. ## 제약 Three.js CDN을 쓰는 단일 HTML로 만들어. WASD 이동·마우스 시점·클릭 발사·R 재장전·F 상호작용·G 연습용 무적 모드를 제공해. 총 모델은 시작부터 카메라 앞에 표시하고 적은 벽을 피하며 플레이어와 최소 거리를 유지해. 모바일 조작과 시작·재시작을 넣어. 외부 이미지·음원·유료 API 없이 코드 도형과 직접 생성한 소리만 사용해. 가로 390px와 데스크톱에서 화면과 조작 버튼이 잘리지 않게 해. 소리는 사용자 조작 뒤에만 재생해. 기존 프로젝트가 있으면 구조와 지침을 먼저 읽고 그 안에서 구현해. 새 작업은 독립 폴더를 사용해. 요청한 범위를 끝까지 구현하고 실제 화면과 아래 핵심 동작을 점검해 오류를 고쳐. 완료 후 요청하지 않은 기능이나 리팩터링을 더하지 마. ## 완료 기준 발사·재장전·창문 수리·문 구매·첫 라운드 종료를 직접 확인해. 첫 무기가 보이고 적이 시점을 관통하지 않아야 해. 재시작하면 적·판자·점수·탄약이 초기화되고 무적 모드 표시와 상태가 일치해야 해. ## 결과 형식 전체 실행 파일 → 실행 방법 → 실제 확인한 동작과 남은 항목 순서로 한국어로 짧게 답해. 실행 도구가 없으면 사용자가 따라 할 구체적인 점검 순서를 제공해.
애니메이션 · 영상
컵과 화분 위를 도는 점토 종이비행기
Haiku 5.5로 만든 Blender 점토 장면이에요. 컵에서 수증기가 올라오고 비행기가 돌며, 원본 6분할 영상의 아래 가운데가 Haiku 결과예요.
제작·공개: Wayne Lowry · @wikiwayne · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 Blender에서 실행하는 파스텔 점토 책상 애니메이션을 만들어 줘. 입력 파일은 없고 모든 형태와 재질을 Python 코드로 생성해. 책상 위에 손잡이가 있는 머그컵, 올라오는 수증기, 잎 다섯 개의 화분, 컵 주위를 도는 종이비행기를 배치해. 24fps·96프레임·4초 루프이며 포즈를 두 프레임씩 유지해 스톱모션 느낌을 내 줘. ## 제약 Blender 4.5의 bpy로 실행하는 하나의 Python 스크립트를 제공해. 외부 모델·이미지·HDRI·유료 API 없이 점토의 작은 표면 요철과 부드러운 그림자를 코드로 만들고, 밝은 배경에서도 흰 비행기와 수증기가 구분되게 해. 고정 시드와 고정 카메라를 사용하고 카메라 안에 세 오브젝트가 모두 들어오게 해. 결과는 scene.blend와 960×540 PNG 96장으로 저장해. 출력 폴더는 스크립트 옆에 만들고 같은 이름의 기존 결과를 덮어쓰기 전에 확인해. ## 완료 기준 1·24·48·72·96프레임을 실제 렌더링해 확인해. 컵 손잡이와 화분 잎이 분명히 보이고 비행기가 컵을 관통하지 않아야 해. 마지막에서 첫 프레임으로 넘어갈 때 위치·조명·수증기가 자연스럽게 이어져야 해. 프레임 1–2, 3–4처럼 두 장씩 같은 포즈가 유지되는지 확인해. 기존 프로젝트가 있으면 구조와 지침을 먼저 읽고 그 안에서 구현해. 새 작업은 독립 폴더를 사용해. 요청한 범위를 끝까지 구현하고 실제 점검까지 마친 뒤 작업을 종료해. 실행 도구가 있으면 결과 화면과 핵심 동작을 확인하고 발견한 오류를 수정해. ## 결과 형식 전체 실행 파일 → 실행 방법 → 실제 확인한 동작과 남은 항목 순서로 한국어로 짧게 답해. 실행 도구가 없으면 사용자가 따라 할 구체적인 점검 순서를 제공해.
원본 결과 보기 ↗웹 UI · 이미지와 원본 결과
사진과 상세창으로 보는 네온 자동차 갤러리
Haiku 5.5로 만든 자동차 12종 갤러리예요. 로컬·수입차 필터와 사진·사양을 담은 상세창이 있으며, 제작자는 일부 사진이 오래된 것이라고 밝혔어요.
제작·공개: u/No_Complex4623 · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 네온 청록·보라색의 자동차 소개 웹페이지를 만들어 줘. 상단에는 큰 제목과 움직이는 차량명 띠, 아래에는 사진 카드·원산지 필터·상세창을 넣어. 다음 목록을 로컬/수입 구분용 데모 데이터로 사용해. 로컬: Suzuki Alto, Suzuki Cultus, Suzuki Wagon R, Toyota Corolla Altis, Honda Civic, Honda City, Toyota Yaris, Toyota Hilux Revo, Toyota Fortuner. 수입: Toyota Land Cruiser Prado, BYD Atto 3, MG HS. ## 제약 차량 사진은 사용 권한과 원본 링크가 확인되는 자료만 쓰고 사진마다 출처·라이선스를 표시해. 자료를 찾을 수 없으면 차량명을 담은 카드로 대체해. 사양은 연식·트림과 출처가 확인된 값만 넣고 모르는 값은 ‘정보 없음’으로 표시해. 가격·성능·원산지를 현재 판매 정보로 단정하지 마. 유료 API·로그인·결제·자동 배포는 넣지 마. 기존 데이터가 있으면 이 데모 목록 대신 그것을 사용해. 카드는 차량명·사진·차체 유형을 보여 주고 상세창은 사진·엔진·변속기·특징·출처를 중앙에 표시해. 키보드로 카드와 필터를 선택할 수 있고 Escape·닫기·배경 클릭으로 상세창을 닫게 해. 닫은 뒤 원래 카드로 초점을 돌려줘. 움직임 감소 설정에서는 글자 애니메이션을 정지해. ## 완료 기준 전체 12개, 로컬 9개, 수입 3개가 필터와 일치하는지 확인해. 서로 다른 두 차량의 상세창을 열어 내용이 바뀌고 닫히는지 점검해. 가로 390px에서도 카드·사진·상세창이 화면 밖으로 넘치지 않아야 해. 기존 프로젝트가 있으면 구조와 지침을 먼저 읽고 그 안에서 구현해. 새 작업은 독립 폴더를 사용해. 요청한 범위를 끝까지 구현하고 실제 점검까지 마친 뒤 작업을 종료해. 실행 도구가 있으면 결과 화면과 핵심 동작을 확인하고 발견한 오류를 수정해. ## 결과 형식 전체 실행 파일 → 실행 방법 → 실제 확인한 동작과 남은 항목 순서로 한국어로 짧게 답해. 실행 도구가 없으면 사용자가 따라 할 구체적인 점검 순서를 제공해.
원본 결과 보기 ↗게임 · 이미지와 원본 결과
찬바람을 피하며 과자를 모으는 40초 게임
제작자가 기존 캐릭터 그림을 넣어 Haiku 5.5로 만든 미니게임이에요. 좌우로 이동하며 과자를 모으고 찬바람을 피하며, 과자와 바람은 코드 도형으로 남아 있어요.
제작·공개: ぽてむし · AIゲーム制作のぽてむし · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 가을밤의 찬바람을 피하며 과자를 모으는 40초 브라우저 미니게임을 만들어 줘. 플레이어는 잠옷이나 침낭을 입은 작은 캐릭터로 좌우 이동해. 입력 자료는 이 명세이며, 내가 제공한 캐릭터 PNG가 있으면 대기·이동·수집·피격·결과 포즈에 사용해. 제공된 이미지가 없으면 코드 도형으로 독자적인 캐릭터를 그려. 다른 제작자의 캐릭터나 사이트 자산을 가져오지 마. ## 동작과 제약 Canvas·HTML·CSS·JavaScript로 만들고 좌우 방향키 또는 화면을 누르고 드래그해 움직이게 해. 위에서 과자와 차가운 바람이 떨어지고 과자를 모으면 점수·연속 수집 콤보가 올라가게 해. 바람에 맞으면 하트가 하나 줄고 0.7초 동안 무적이야. 하트 3개가 없어지거나 40초가 지나면 점수·수집 수·최대 콤보·충돌 수를 보여줘. 최고 점수는 localStorage에 저장해. 설명·시작·재시작·타이틀 복귀·소리 켜기 버튼을 넣고 소리는 사용자 클릭 뒤에만 재생해. 외부 이미지·음원·유료 API는 쓰지 마. ## 완료 기준 수집과 피격 때 각각 올바른 점수·하트 변화가 한 번만 발생하는지 실제 조작해 확인해. 화면을 떠나면 게임을 일시정지하고 돌아오면 남은 시간을 이어가게 해. 재시작은 시간·하트·점수·콤보·낙하물을 초기화해야 해. 가로 390px와 데스크톱에서 캐릭터·점수·버튼이 보이고 드래그가 페이지 스크롤을 방해하지 않아야 해. 기존 프로젝트가 있으면 구조와 지침을 먼저 읽고 그 안에서 구현해. 새 작업은 독립 폴더를 사용해. 요청한 범위를 끝까지 구현하고 실제 점검까지 마친 뒤 작업을 종료해. 실행 도구가 있으면 결과 화면과 핵심 동작을 확인하고 발견한 오류를 수정해. ## 결과 형식 전체 실행 파일 → 실행 방법 → 실제 확인한 동작과 남은 항목 순서로 한국어로 짧게 답해. 실행 도구가 없으면 사용자가 따라 할 구체적인 점검 순서를 제공해.
원본 결과 보기 ↗SVG · 이미지와 원본 결과
차들이 램프를 따라 도는 고속도로 교차로
Haiku 5.5 xhigh로 만든 SVG예요. 교량 아래로 차량이 지나가며, 제작자는 램프가 위 도로에 연결되지 않고 아래 도로로 돌아오는 한계를 짚었어요.
제작·공개: BitsMinds Lab · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 파일은 없고 아래 명세를 사용해. 위에서 내려다보는 고속도로 교차로 애니메이션을 만들어 줘. 동서 도로 위를 남북 고가도로가 가로지르고 네 개의 연결 램프가 두 도로를 이어야 해. 자동차와 작은 밴 16대 이상이 우측통행하며 직진하거나 램프를 따라 이동하게 해. 초록 지면·나무·차선·교량 그림자를 코드 도형으로 그려. 차량 이동은 24초에 한 번 반복해. ## 제약 외부 리소스·JavaScript 없이 하나의 SVG에 도형과 CSS 또는 SMIL 애니메이션을 담아. viewBox를 지정해 가로 390px에서도 전체 장면이 보이게 하고, title·desc와 움직임 감소 설정의 정지 장면을 제공해. 기존 프로젝트가 있으면 구조와 실행 방법을 확인하고 그 안에서 구현해. 새 작업이면 독립 폴더에 전체 파일을 만들어 줘. 외부 이미지·음원·유료 API와 미구현 자리표시자는 사용하지 마. 요청한 범위를 완성하고 점검하면 작업을 마쳐. ## 완료 기준 0초·6초·12초·18초·24초를 확인해. 램프의 양 끝이 서로 다른 도로에 연결되고 차량이 차선과 높이를 바꿀 때 순간 이동하지 않아야 해. 아래 도로의 차는 교량 밑에서 가려지고 위 도로의 차는 교량 위에 보여야 해. 화면 안에서 갑자기 생기거나 사라지는 차가 없어야 해. 실행 도구가 있으면 실제 화면과 핵심 동작을 확인하고 발견한 오류를 고쳐 줘. ## 결과 형식 완성 파일 → 실행 방법 → 실제 점검 결과 순서로 한국어로 답해. 점검 결과에는 사용한 조작과 화면에서 관찰한 변화를 적어. 실행 도구가 없으면 사용자가 따라 할 점검 순서를 제공해.
원본 결과 보기 ↗SVG · 이미지와 원본 결과
노을과 바다에 비치는 해변 놀이공원
Haiku 5.5 max로 만든 SVG예요. 관람차 객실이 수평을 유지하며 돌고 바다에 반사돼요. 목마는 제자리에서 위아래로 움직여요.
제작·공개: BitsMinds Lab · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 파일은 없고 아래 명세를 사용해. 노을 진 해변 부두의 놀이공원 애니메이션을 만들어 줘. 대관람차에 객실 12개를 달고 24초마다 한 바퀴 회전하게 해. 회전목마에는 말 6마리와 줄무늬 지붕을 넣고 중심 기둥 주위를 함께 돌게 해. 각 말은 서로 다른 타이밍에 위아래로 움직여. 조명 줄·반짝이는 전구·수평선의 해·바다에 비치는 반사를 코드 도형으로 표현해. ## 제약 외부 리소스·JavaScript 없이 하나의 SVG에 도형과 CSS 또는 SMIL 애니메이션을 담아. viewBox를 지정해 가로 390px에서도 전체 장면이 보이게 하고, title·desc와 움직임 감소 설정의 정지 장면을 제공해. 기존 프로젝트가 있으면 구조와 실행 방법을 확인하고 그 안에서 구현해. 새 작업이면 독립 폴더에 전체 파일을 만들어 줘. 외부 이미지·음원·유료 API와 미구현 자리표시자는 사용하지 마. 요청한 범위를 완성하고 점검하면 작업을 마쳐. ## 완료 기준 대관람차가 한 바퀴 도는 동안 객실 바닥이 수평을 유지하고 부두를 관통하지 않아야 해. 지붕·바닥·말은 같은 중심과 주기로 돌고 말은 이동 방향을 향해야 해. 옆면 전환이 한 프레임에 튀지 않아야 해. 0초·6초·12초·18초 화면에서 반사가 원래 구조물 위치를 따라가는지 확인해. 실행 도구가 있으면 실제 화면과 핵심 동작을 확인하고 발견한 오류를 고쳐 줘. ## 결과 형식 완성 파일 → 실행 방법 → 실제 점검 결과 순서로 한국어로 답해. 점검 결과에는 사용한 조작과 화면에서 관찰한 변화를 적어. 실행 도구가 없으면 사용자가 따라 할 점검 순서를 제공해.
원본 결과 보기 ↗시뮬레이션 · 이미지와 원본 결과
복엽기를 조종하는 3D 비행 데모
제작자가 Haiku 5.5로 소개한 Three.js 비행 데모예요. 산·활주로·복엽기와 속도·고도·레이더를 담았어요. 공개 코드로 이륙과 일시정지를 확인했어요.
제작·공개: senko · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 파일은 없고 아래 명세를 사용해. Three.js로 복엽기 비행 데모를 만들어 줘. 기본 메시로 동체·두 날개·프로펠러를 조립하고 활주로·산·구름·작은 나무를 배치해. Enter로 시작, W/S로 기수 조절, A/D로 좌우 기울기, Q/E로 방향타, X/Z로 추력 조절, C로 추적·조종석·전체 시점 전환, P로 정지·재개를 구현해. 속도·지상 고도·추력·기체 상태를 HUD에 표시해. ## 제약 HTML 한 파일로 만들고 Three.js는 고정 버전의 공개 CDN에서 불러와. 단순한 게임용 양력·항력·중력을 사용하고 실제 항공 훈련용 시뮬레이터라고 표시하지 마. 외부 모델 없이 코드를 사용해. 충돌하면 3초 뒤 활주로로 돌아오게 해. 작은 화면에서는 터치 조작부와 접을 수 있는 설명을 제공해. WebGL과 CDN 실패 안내를 넣어. 기존 프로젝트가 있으면 구조와 실행 방법을 확인하고 그 안에서 구현해. 새 작업이면 독립 폴더에 전체 파일을 만들어 줘. 외부 이미지·음원·유료 API와 미구현 자리표시자는 사용하지 마. 요청한 범위를 완성하고 점검하면 작업을 마쳐. ## 완료 기준 시작 후 추력을 올려 활주로에서 이륙하고 고도 표시가 변하는지 확인해. 세 시점에서 기체가 보이고 정지하면 물리·프로펠러·HUD가 함께 멈춰야 해. 충돌 후 복귀는 이전 속도를 초기화해야 해. 390px에서 조작부가 화면 안에 들어오는지 확인해. 실행 도구가 있으면 실제 화면과 핵심 동작을 확인하고 발견한 오류를 고쳐 줘. ## 결과 형식 완성 파일 → 실행 방법 → 실제 점검 결과 순서로 한국어로 답해. 점검 결과에는 사용한 조작과 화면에서 관찰한 변화를 적어. 실행 도구가 없으면 사용자가 따라 할 점검 순서를 제공해.
게임 · 영상
마을을 키우며 버티는 타워 디펜스
건설·방어탑·지휘관 전투를 한 화면에 묶은 브라우저 게임이에요.
제작·공개: Adam Holter · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 파일은 없고, 아래 설명을 작업 명세로 사용해. 탑다운 2D 생존 게임을 만들어 줘. 자원 생산 건물, 성벽, 사거리 안의 적을 자동 공격하는 방어탑, WASD 또는 화면 조이스틱으로 움직이는 지휘관을 구현해. 적을 물리치면 경험치를 얻고 레벨업 때 강화 3개 중 하나를 선택하게 해. 적의 공격은 웨이브마다 강해지고 20웨이브 생존을 목표로 해. 시작·일시정지·재시작과 현재 자원·체력·웨이브 표시를 넣어. ## 제약 기존 프로젝트가 있으면 구조와 실행 방법을 먼저 확인해. 없으면 브라우저에서 실행할 수 있는 HTML·CSS·JavaScript로 만들어 줘. 외부 이미지·영상·음원·유료 API 없이 코드로 화면을 구성해. 라이브러리가 필요하면 버전을 고정하고 불러오지 못했을 때 안내를 보여 줘. 모바일 390px와 데스크톱 1440px에서 화면과 조작부가 잘리지 않게 해. 키보드로도 주요 버튼을 사용할 수 있게 해. 요청 범위를 구현하고 확인하면 작업을 마쳐. ## 완료 기준 건물 구매 시 자원이 한 번만 차감되고, 적 처치와 지휘관 피격·레벨업·재시작이 작동해야 해. 최소 2웨이브를 직접 플레이해. 전체 20웨이브 밸런스는 끝까지 시험하지 않았다면 미확인으로 남겨. 실행 도구가 있으면 브라우저에서 실제 화면과 주요 조작을 확인하고 오류를 고쳐. 코드 문법 확인만으로 동작 검증을 대신하지 마. 실행 도구가 없으면 실행하지 않았다고 명시하고 사용자가 확인할 순서를 알려 줘. ## 결과 형식 실행 가능한 전체 파일과 시작 명령을 제공하고, 조작 방법 → 실제 확인한 항목 → 남은 한계 순서로 한국어로 짧게 답해. 생략 부호나 미구현 자리표시자를 남기지 마.
애니메이션 · 영상
바나나가 작은 배가 되는 드로잉
노란 바나나 윤곽이 배가 되고 사람·물결·태양이 더해지는 손그림 애니메이션이에요.
제작·공개: Adam Holter · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 파일은 없고, 아래 설명을 작업 명세로 사용해. 36초짜리 Canvas 드로잉 애니메이션을 만들어 줘. 흰 종이 위에서 바나나의 노란 곡선 윤곽을 그리고, 그 형태를 배의 선체로 이어 그려. 작은 사람과 돛·깃발, 푸른 물결과 태양을 순서대로 추가해. 마지막에는 배가 물결에 맞춰 천천히 흔들리게 해. 사진 입력 없이 선과 면으로 그리는 장면이야. 진행 막대·일시정지·처음부터 재생 버튼을 넣어. ## 제약 기존 프로젝트가 있으면 구조와 실행 방법을 먼저 확인해. 없으면 브라우저에서 실행할 수 있는 HTML·CSS·JavaScript로 만들어 줘. 외부 이미지·영상·음원·유료 API 없이 코드로 화면을 구성해. 라이브러리가 필요하면 버전을 고정하고 불러오지 못했을 때 안내를 보여 줘. 모바일 390px와 데스크톱 1440px에서 화면과 조작부가 잘리지 않게 해. 키보드로도 주요 버튼을 사용할 수 있게 해. 요청 범위를 구현하고 확인하면 작업을 마쳐. ## 완료 기준 0초·12초·24초·36초 화면을 확인해. 배와 사람이 끝까지 보이고, 재시작하면 모든 선의 진행도가 초기화되어야 해. 실행 도구가 있으면 브라우저에서 실제 화면과 주요 조작을 확인하고 오류를 고쳐. 코드 문법 확인만으로 동작 검증을 대신하지 마. 실행 도구가 없으면 실행하지 않았다고 명시하고 사용자가 확인할 순서를 알려 줘. ## 결과 형식 실행 가능한 전체 파일과 시작 명령을 제공하고, 조작 방법 → 실제 확인한 항목 → 남은 한계 순서로 한국어로 짧게 답해. 생략 부호나 미구현 자리표시자를 남기지 마.
원본 결과 보기 ↗3D · 이미지와 원본 결과
시간대를 바꾸며 보는 로켓 발사
푸른 하늘과 지면 위 로켓, 발사 버튼과 시간대 슬라이더가 있는 3D 데모예요.
제작·공개: BridgeBench · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 파일은 없고, 아래 설명을 작업 명세로 사용해. Three.js로 로켓 발사 시각화를 만들어 줘. 원통형 동체·원뿔형 끝·엔진을 기본 도형으로 조립하고 발사대와 지면을 배치해. 발사 버튼을 누르면 3초 카운트다운 뒤 불꽃과 연기 입자가 나타나고 로켓이 상승하게 해. 시간대 슬라이더로 하늘·조명 색을 바꾸고 재설정 버튼으로 처음 상태로 돌아가게 해. 물리적으로 정확한 궤도 계산이 아닌 시각 데모라고 표시해. ## 제약 기존 프로젝트가 있으면 구조와 실행 방법을 먼저 확인해. 없으면 브라우저에서 실행할 수 있는 HTML·CSS·JavaScript로 만들어 줘. 외부 이미지·영상·음원·유료 API 없이 코드로 화면을 구성해. 라이브러리가 필요하면 버전을 고정하고 불러오지 못했을 때 안내를 보여 줘. 모바일 390px와 데스크톱 1440px에서 화면과 조작부가 잘리지 않게 해. 키보드로도 주요 버튼을 사용할 수 있게 해. 요청 범위를 구현하고 확인하면 작업을 마쳐. ## 완료 기준 발사 버튼 연타가 애니메이션을 중복 생성하지 않아야 해. 상승 뒤 재설정하면 로켓과 입자가 초기화되고 시간대 슬라이더가 실제 조명에 반영되어야 해. 실행 도구가 있으면 브라우저에서 실제 화면과 주요 조작을 확인하고 오류를 고쳐. 코드 문법 확인만으로 동작 검증을 대신하지 마. 실행 도구가 없으면 실행하지 않았다고 명시하고 사용자가 확인할 순서를 알려 줘. ## 결과 형식 실행 가능한 전체 파일과 시작 명령을 제공하고, 조작 방법 → 실제 확인한 항목 → 남은 한계 순서로 한국어로 짧게 답해. 생략 부호나 미구현 자리표시자를 남기지 마.
원본 결과 보기 ↗시뮬레이션 · 이미지와 원본 결과
서로 합쳐지는 블랙홀 시각화
별과 빛의 고리 속 블랙홀을 보여 주는 데모예요. 질량비 조절과 다시 재생하는 조작부가 있어요.
제작·공개: BridgeBench · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 파일은 없고, 아래 설명을 작업 명세로 사용해. WebGL 또는 Canvas로 두 블랙홀이 서로 공전하다 합쳐지는 20초 애니메이션을 만들어 줘. 어두운 중심, 밝은 강착원반, 별 배경과 합체 직후 퍼지는 빛의 고리를 표현해. 질량비 슬라이더로 두 중심의 크기와 공전 중심을 바꾸고 재생·일시정지·처음부터 버튼을 넣어. 일반상대성이론 계산이 아닌 개념 시각화임을 작은 안내로 밝혀. ## 제약 기존 프로젝트가 있으면 구조와 실행 방법을 먼저 확인해. 없으면 브라우저에서 실행할 수 있는 HTML·CSS·JavaScript로 만들어 줘. 외부 이미지·영상·음원·유료 API 없이 코드로 화면을 구성해. 라이브러리가 필요하면 버전을 고정하고 불러오지 못했을 때 안내를 보여 줘. 모바일 390px와 데스크톱 1440px에서 화면과 조작부가 잘리지 않게 해. 키보드로도 주요 버튼을 사용할 수 있게 해. 요청 범위를 구현하고 확인하면 작업을 마쳐. ## 완료 기준 질량비를 바꿨을 때 두 크기가 구별되어야 하고, 합체 뒤 검은 중심 하나로 남아야 해. 재시작 3회 후에도 애니메이션 속도가 중복 증가하지 않아야 해. 실행 도구가 있으면 브라우저에서 실제 화면과 주요 조작을 확인하고 오류를 고쳐. 코드 문법 확인만으로 동작 검증을 대신하지 마. 실행 도구가 없으면 실행하지 않았다고 명시하고 사용자가 확인할 순서를 알려 줘. ## 결과 형식 실행 가능한 전체 파일과 시작 명령을 제공하고, 조작 방법 → 실제 확인한 항목 → 남은 한계 순서로 한국어로 짧게 답해. 생략 부호나 미구현 자리표시자를 남기지 마.
원본 결과 보기 ↗시뮬레이션 · 이미지와 원본 결과
파도와 태양 높이를 조절하는 바다
수평선으로 이어지는 물결과 수면의 반사를 보여 줘요. 파도 상태와 태양 높이를 바꾸는 슬라이더가 있어요.
제작·공개: BridgeBench · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 파일은 없고, 아래 설명을 작업 명세로 사용해. Three.js와 셰이더로 노을이 비치는 바다 장면을 만들어 줘. 반복되는 여러 방향의 파도, 먼 수평선, 낮게 뜬 태양과 수면의 길게 이어지는 반사를 표현해. 파도 세기 0~1과 태양 높이 1~12도를 조절하는 슬라이더, 초기화 버튼을 넣어. 조작부에 현재 수치를 표시해. 실제 해양 예보나 물리 검증 결과로 소개하지 마. ## 제약 기존 프로젝트가 있으면 구조와 실행 방법을 먼저 확인해. 없으면 브라우저에서 실행할 수 있는 HTML·CSS·JavaScript로 만들어 줘. 외부 이미지·영상·음원·유료 API 없이 코드로 화면을 구성해. 라이브러리가 필요하면 버전을 고정하고 불러오지 못했을 때 안내를 보여 줘. 모바일 390px와 데스크톱 1440px에서 화면과 조작부가 잘리지 않게 해. 키보드로도 주요 버튼을 사용할 수 있게 해. 요청 범위를 구현하고 확인하면 작업을 마쳐. ## 완료 기준 두 슬라이더의 최소·중간·최대 값을 시험해. 파도 세기에 따라 수면이 바뀌고 태양 높이를 바꾸면 반사 위치와 하늘색이 반응해야 해. 화면 크기를 바꿔도 수평선과 조작부가 보여야 해. 실행 도구가 있으면 브라우저에서 실제 화면과 주요 조작을 확인하고 오류를 고쳐. 코드 문법 확인만으로 동작 검증을 대신하지 마. 실행 도구가 없으면 실행하지 않았다고 명시하고 사용자가 확인할 순서를 알려 줘. ## 결과 형식 실행 가능한 전체 파일과 시작 명령을 제공하고, 조작 방법 → 실제 확인한 항목 → 남은 한계 순서로 한국어로 짧게 답해. 생략 부호나 미구현 자리표시자를 남기지 마.
원본 결과 보기 ↗3D · 이미지와 원본 결과
회전 속도와 바늘을 조절하는 턴테이블
나무 받침과 무늬 있는 레코드, 톤암을 표현한 3D 턴테이블이에요. 33/45 속도와 Cue 조작부가 있어요.
제작·공개: BridgeBench · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 파일은 없고, 아래 설명을 작업 명세로 사용해. Three.js로 책상 위 턴테이블을 만들어 줘. 나무 받침, 원판의 홈과 중앙 라벨, 회전축, 움직이는 톤암을 기본 도형과 절차적 텍스처로 구현해. 전원 버튼, 33⅓/45 RPM 전환, 바늘을 들고 내리는 Cue 버튼을 넣어. 레코드 회전과 바늘 움직임을 자연스럽게 연결해. 음원은 입력되지 않았으므로 소리는 재생하지 마. ## 제약 기존 프로젝트가 있으면 구조와 실행 방법을 먼저 확인해. 없으면 브라우저에서 실행할 수 있는 HTML·CSS·JavaScript로 만들어 줘. 외부 이미지·영상·음원·유료 API 없이 코드로 화면을 구성해. 라이브러리가 필요하면 버전을 고정하고 불러오지 못했을 때 안내를 보여 줘. 모바일 390px와 데스크톱 1440px에서 화면과 조작부가 잘리지 않게 해. 키보드로도 주요 버튼을 사용할 수 있게 해. 요청 범위를 구현하고 확인하면 작업을 마쳐. ## 완료 기준 전원을 끄면 레코드가 천천히 멈추고 속도 전환이 회전 속도에 반영되어야 해. Cue를 연속 조작해도 톤암이 정해진 두 위치 사이에서 움직여야 해. 실행 도구가 있으면 브라우저에서 실제 화면과 주요 조작을 확인하고 오류를 고쳐. 코드 문법 확인만으로 동작 검증을 대신하지 마. 실행 도구가 없으면 실행하지 않았다고 명시하고 사용자가 확인할 순서를 알려 줘. ## 결과 형식 실행 가능한 전체 파일과 시작 명령을 제공하고, 조작 방법 → 실제 확인한 항목 → 남은 한계 순서로 한국어로 짧게 답해. 생략 부호나 미구현 자리표시자를 남기지 마.
원본 결과 보기 ↗3D · 이미지와 원본 결과
노란 빛의 라바 램프 렌더링
금속 받침과 노란 유리관을 표현한 라바 램프 데모예요.
제작·공개: BridgeBench · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 파일은 없고, 아래 설명을 작업 명세로 사용해. WebGL로 책상 위 라바 램프를 만들어 줘. 금속 받침과 뚜껑, 투명한 유리관 안에서 천천히 떠오르고 가라앉는 노란 왁스 덩어리를 표현해. 덩어리가 서로 가까워지면 매끈하게 합쳐졌다 분리되는 효과를 넣어. 배경은 차분한 회색, 조명은 따뜻한 색으로 해. 속도 슬라이더와 일시정지·초기화 버튼을 넣어. 유체 역학의 정확한 계산이 아닌 시각 효과라고 표시해. ## 제약 기존 프로젝트가 있으면 구조와 실행 방법을 먼저 확인해. 없으면 브라우저에서 실행할 수 있는 HTML·CSS·JavaScript로 만들어 줘. 외부 이미지·영상·음원·유료 API 없이 코드로 화면을 구성해. 라이브러리가 필요하면 버전을 고정하고 불러오지 못했을 때 안내를 보여 줘. 모바일 390px와 데스크톱 1440px에서 화면과 조작부가 잘리지 않게 해. 키보드로도 주요 버튼을 사용할 수 있게 해. 요청 범위를 구현하고 확인하면 작업을 마쳐. ## 완료 기준 10초 간격으로 화면을 비교해 덩어리 위치와 형태가 달라지는지 확인해. 유리관 밖으로 덩어리가 튀어나오거나 관 전체가 불투명한 단색으로 가려지지 않도록 점검해. 실행 도구가 있으면 브라우저에서 실제 화면과 주요 조작을 확인하고 오류를 고쳐. 코드 문법 확인만으로 동작 검증을 대신하지 마. 실행 도구가 없으면 실행하지 않았다고 명시하고 사용자가 확인할 순서를 알려 줘. ## 결과 형식 실행 가능한 전체 파일과 시작 명령을 제공하고, 조작 방법 → 실제 확인한 항목 → 남은 한계 순서로 한국어로 짧게 답해. 생략 부호나 미구현 자리표시자를 남기지 마.
웹 UI · 영상
수익 공유 커뮤니티의 초록색 랜딩 페이지
설명·참여 절차·조건·신청 폼으로 이어지는 차분한 초록색 웹페이지예요.
제작·공개: Adam Holter · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 파일은 없고, 아래 설명을 작업 명세로 사용해. 가상의 창작자 협업 커뮤니티 랜딩 페이지를 만들어 줘. 상단에는 한 문장 소개와 참여 신청 버튼, 아래에는 동료 연결 방식·주간 활동·참여 조건·FAQ·신청 폼을 배치해. 데모 조건은 수입의 5%를 공동 운영비로 납부한다는 것이며 이를 임의로 축소하거나 숨기지 마. 초록색과 아이보리, 넓은 여백, 간단한 막대그래프로 구성해. 이름·이메일·관심 분야 폼은 브라우저 안에서만 검증하고 실제 전송하지 마. ## 제약 기존 프로젝트가 있으면 구조와 실행 방법을 먼저 확인해. 없으면 브라우저에서 실행할 수 있는 HTML·CSS·JavaScript로 만들어 줘. 외부 이미지·영상·음원·유료 API 없이 코드로 화면을 구성해. 라이브러리가 필요하면 버전을 고정하고 불러오지 못했을 때 안내를 보여 줘. 모바일 390px와 데스크톱 1440px에서 화면과 조작부가 잘리지 않게 해. 키보드로도 주요 버튼을 사용할 수 있게 해. 요청 범위를 구현하고 확인하면 작업을 마쳐. ## 완료 기준 FAQ 열기·닫기, 이메일 오류 표시, 신청 버튼의 폼 이동을 확인해. 5% 조건이 상단 요약과 상세 조건에서 일치해야 해. 실제 결제·가입이 이루어졌다고 표시하지 마. 실행 도구가 있으면 브라우저에서 실제 화면과 주요 조작을 확인하고 오류를 고쳐. 코드 문법 확인만으로 동작 검증을 대신하지 마. 실행 도구가 없으면 실행하지 않았다고 명시하고 사용자가 확인할 순서를 알려 줘. ## 결과 형식 실행 가능한 전체 파일과 시작 명령을 제공하고, 조작 방법 → 실제 확인한 항목 → 남은 한계 순서로 한국어로 짧게 답해. 생략 부호나 미구현 자리표시자를 남기지 마.
웹 UI · 영상
개념 지도와 데이터셋을 만드는 학습 앱
개념 지도·데이터셋 생성·주장 정리 기능을 한곳에 모은 학습 도구예요.
제작·공개: Adam Holter · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 파일은 없고, 아래 설명을 작업 명세로 사용해. LLM 활용을 배우는 웹앱을 만들어 줘. 주제를 입력하면 개념과 관계를 보여 주는 개념 지도, 열 이름을 지정하면 예시 행 5개를 만드는 데이터셋 도구, 글에서 주장과 근거를 나누는 주장 정리 패널을 배치해. 이번 입력에는 API 키가 없으므로 명확히 표시된 고정 데모 데이터로 모든 조작을 체험하게 해. 실제 AI 호출을 했다고 표시하지 마. 향후 서버 API를 연결할 위치만 함수로 분리하고 브라우저에 비밀 키를 저장하지 마. ## 제약 기존 프로젝트가 있으면 구조와 실행 방법을 먼저 확인해. 없으면 브라우저에서 실행할 수 있는 HTML·CSS·JavaScript로 만들어 줘. 외부 이미지·영상·음원·유료 API 없이 코드로 화면을 구성해. 라이브러리가 필요하면 버전을 고정하고 불러오지 못했을 때 안내를 보여 줘. 모바일 390px와 데스크톱 1440px에서 화면과 조작부가 잘리지 않게 해. 키보드로도 주요 버튼을 사용할 수 있게 해. 요청 범위를 구현하고 확인하면 작업을 마쳐. ## 완료 기준 세 기능에 각각 예시 입력을 넣어 결과가 바뀌는지 확인해. 빈 입력·초기화·표 복사를 시험하고, 긴 열 이름이 있어도 390px 화면 전체가 가로로 넘치지 않게 해. 실행 도구가 있으면 브라우저에서 실제 화면과 주요 조작을 확인하고 오류를 고쳐. 코드 문법 확인만으로 동작 검증을 대신하지 마. 실행 도구가 없으면 실행하지 않았다고 명시하고 사용자가 확인할 순서를 알려 줘. ## 결과 형식 실행 가능한 전체 파일과 시작 명령을 제공하고, 조작 방법 → 실제 확인한 항목 → 남은 한계 순서로 한국어로 짧게 답해. 생략 부호나 미구현 자리표시자를 남기지 마.
원본 결과 보기 ↗SVG · 이미지와 원본 결과
검은 게임 컨트롤러 SVG
비대칭 스틱과 버튼, 검은 표면의 질감을 코드로 그린 컨트롤러예요.
제작·공개: Adam Holter · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 파일은 없고, 아래 설명을 작업 명세로 사용해. 단일 SVG 파일로 정면에서 본 검은 게임 컨트롤러 일러스트를 만들어 줘. 좌상단과 우하단의 비대칭 아날로그 스틱, 왼쪽 십자 버튼, 오른쪽 4개 버튼, 상단 숄더 버튼을 배치해. 미세한 점무늬와 부드러운 그라데이션으로 플라스틱 표면과 그림자를 표현해. 특정 상표 로고나 실제 제품의 정확한 복제를 요구하지 않아. SVG viewBox는 0 0 960 600으로 하고 title과 desc를 포함해. ## 제약 기존 프로젝트가 있으면 구조와 실행 방법을 먼저 확인해. 없으면 브라우저에서 실행할 수 있는 HTML·CSS·JavaScript로 만들어 줘. 외부 이미지·영상·음원·유료 API 없이 코드로 화면을 구성해. 라이브러리가 필요하면 버전을 고정하고 불러오지 못했을 때 안내를 보여 줘. 모바일 390px와 데스크톱 1440px에서 화면과 조작부가 잘리지 않게 해. 키보드로도 주요 버튼을 사용할 수 있게 해. 요청 범위를 구현하고 확인하면 작업을 마쳐. ## 완료 기준 XML이 유효하고 외부 이미지 없이 렌더링되어야 해. 320px와 960px 너비에서 버튼·스틱이 본체 밖으로 잘리지 않는지 확인해. 결과물은 편집 가능한 controller.svg로 제공해. 실행 도구가 있으면 브라우저에서 실제 화면과 주요 조작을 확인하고 오류를 고쳐. 코드 문법 확인만으로 동작 검증을 대신하지 마. 실행 도구가 없으면 실행하지 않았다고 명시하고 사용자가 확인할 순서를 알려 줘. ## 결과 형식 실행 가능한 전체 파일과 시작 명령을 제공하고, 조작 방법 → 실제 확인한 항목 → 남은 한계 순서로 한국어로 짧게 답해. 생략 부호나 미구현 자리표시자를 남기지 마.
원본 결과 보기 ↗SVG · 이미지와 원본 결과
흰색과 검은색의 대칭형 컨트롤러 SVG
대칭 스틱·중앙 터치패드·밝은 본체를 조합한 SVG 일러스트예요.
제작·공개: Adam Holter · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 파일은 없고, 아래 설명을 작업 명세로 사용해. 단일 SVG 파일로 흰색 본체와 검은 안쪽 패널을 가진 게임 컨트롤러를 그려 줘. 아래쪽에 대칭으로 배치한 아날로그 스틱, 중앙의 넓은 터치패드, 왼쪽 방향 버튼과 오른쪽 4개 도형 버튼, 상단 트리거를 넣어. 둥근 손잡이와 얕은 그림자를 사용하고 작은 파란 상태 표시등을 넣어. 로고 없이 독자적인 장치 디자인으로 만들고 viewBox와 접근성 설명을 포함해. ## 제약 기존 프로젝트가 있으면 구조와 실행 방법을 먼저 확인해. 없으면 브라우저에서 실행할 수 있는 HTML·CSS·JavaScript로 만들어 줘. 외부 이미지·영상·음원·유료 API 없이 코드로 화면을 구성해. 라이브러리가 필요하면 버전을 고정하고 불러오지 못했을 때 안내를 보여 줘. 모바일 390px와 데스크톱 1440px에서 화면과 조작부가 잘리지 않게 해. 키보드로도 주요 버튼을 사용할 수 있게 해. 요청 범위를 구현하고 확인하면 작업을 마쳐. ## 완료 기준 좌우 스틱의 크기와 높이가 같고 터치패드가 중앙에 있어야 해. 외부 이미지 없이 SVG만으로 렌더링되는지, 밝은 본체가 배경과 구별되는지 확인해. 전체 SVG 파일과 미리보기 방법을 제공해. 실행 도구가 있으면 브라우저에서 실제 화면과 주요 조작을 확인하고 오류를 고쳐. 코드 문법 확인만으로 동작 검증을 대신하지 마. 실행 도구가 없으면 실행하지 않았다고 명시하고 사용자가 확인할 순서를 알려 줘. ## 결과 형식 실행 가능한 전체 파일과 시작 명령을 제공하고, 조작 방법 → 실제 확인한 항목 → 남은 한계 순서로 한국어로 짧게 답해. 생략 부호나 미구현 자리표시자를 남기지 마.
원본 결과 보기 ↗SVG · 이미지와 원본 결과
자전거를 타는 펠리컨 SVG
큰 부리의 펠리컨이 자전거를 타는 벡터 그림이에요. 공개된 max effort 결과를 골랐어요.
제작·공개: Simon Willison · Haiku 5.5
한국어 프롬프트 펼치기
PEAKON 재작성본으로, 원본과 차이가 있을 수 있어요.
## 목표와 입력 Claude Haiku 5.5로 다음 결과물을 만들어 줘. 입력 파일은 없고, 아래 설명을 작업 명세로 사용해. SVG로 자전거를 타는 흰 펠리컨을 그려 줘. 긴 주황색 부리와 목주머니, 회색 날개, 주황색 다리를 표현해. 두 바퀴·삼각형 프레임·체인·페달·핸들이 연결된 자전거에 앉히고 한 날개는 핸들, 두 발은 서로 다른 페달에 닿게 해. 배경에는 잔디와 푸른 하늘·태양을 넣어. 평면 벡터 스타일로 그리되 몸과 기계 부품이 구별되도록 명암을 사용해. ## 제약 기존 프로젝트가 있으면 구조와 실행 방법을 먼저 확인해. 없으면 브라우저에서 실행할 수 있는 HTML·CSS·JavaScript로 만들어 줘. 외부 이미지·영상·음원·유료 API 없이 코드로 화면을 구성해. 라이브러리가 필요하면 버전을 고정하고 불러오지 못했을 때 안내를 보여 줘. 모바일 390px와 데스크톱 1440px에서 화면과 조작부가 잘리지 않게 해. 키보드로도 주요 버튼을 사용할 수 있게 해. 요청 범위를 구현하고 확인하면 작업을 마쳐. ## 완료 기준 바퀴가 둥글고 같은 크기이며 프레임이 두 바퀴와 연결되는지 확인해. 발·페달·핸들 접점을 점검해. 외부 이미지 없이 렌더링되는 하나의 완결된 SVG 파일과 짧은 시각 점검 결과를 제공해. 실행 도구가 있으면 브라우저에서 실제 화면과 주요 조작을 확인하고 오류를 고쳐. 코드 문법 확인만으로 동작 검증을 대신하지 마. 실행 도구가 없으면 실행하지 않았다고 명시하고 사용자가 확인할 순서를 알려 줘. ## 결과 형식 실행 가능한 전체 파일과 시작 명령을 제공하고, 조작 방법 → 실제 확인한 항목 → 남은 한계 순서로 한국어로 짧게 답해. 생략 부호나 미구현 자리표시자를 남기지 마.
