UI · 섹션 · 히어로
Halvard Steel hero
코드 렌더 · 같은 결과
Hand-forged knife · justify the price without reviews
Fictional two-person workshop selling one hand-forged chef's knife
Halvard Steel는 가상 브랜드이고 가격·수치·이미지는 모두 샘플입니다. 레시피는 실제 콘텐츠가 없는 자리를 지어내지 않고 조건 규칙대로 바꿉니다. 전체 페이지 보기 →
히어로 레시피만으로 새 프로젝트를 만들어 빌드한 화면을 녹화했습니다(4.5초, 소리 없음). 데스크톱 1440×900 · 모바일 390×844.
히어로
- 히어로가 하는 일
- H6 Origin & Craft
- 섹션
- Hero / 히어로
- 페이지에서 다음 섹션
- Process
보여 주는 것
The knife as the hero object with the one-line reason to trust (forged once, sharpened for life).
이 자리에 둔 이유
H6 Origin & Craft: trust starts from how the product is made and the promise behind it.
스타일
Stage — strong scale contrast, cool slate and steel, one fog-light proof band, one patina-copper accent
첫 화면이 불러가는 이미지
img/hero-wide.webp · img/knife-canon.webp
쓰는 법
- 01복사
히어로 레시피 복사를 누르면 내비 + 히어로의 코드·토큰·이미지 주소가 든 레시피가 복사돼요.
- 02붙여 넣기
빈 폴더나 지금 프로젝트에서 Claude Code·Codex 를 열고 붙여 넣으세요.
- 03세 가지 답하기
에이전트가 서비스·주 행동·실제로 있는 자료를 먼저 묻습니다. 있는 것만 답하세요.
- 04확인
첫 화면 수락 기준(1440·390, 가로 스크롤 없음, 글꼴, 동작 줄이기)을 에이전트가 하나씩 확인합니다.
레시피
- 길이
- 43,473자 · 약 11k 토큰
- 스택
- React 19 + Vite 7 + Tailwind CSS v4 + motion + Lenis (TypeScript)
- 글꼴
- Source Serif 4 · Instrument Sans
- 예시
- 가상 브랜드 · 샘플 데이터
레시피 하나에 이 페이지를 다시 만드는 데 필요한 것이 모두 들어 있습니다. MCP 를 연결했다면 get_ui 로도 받을 수 있어요.
레시피 안 이미지는 duchamp.app 에서 바로 불러옵니다. 내 이미지가 있으면 바꾸라고 말하세요.
