UI · 페이지
Halvard Steel
코드 렌더 · 같은 결과
Hand-forged knife · justify the price without reviews
Fictional two-person workshop selling one hand-forged chef's knife
Halvard Steel는 가상 브랜드이고 가격·수치·이미지는 모두 샘플입니다. 레시피는 실제 콘텐츠가 없는 자리를 지어내지 않고 조건 규칙대로 바꿉니다.
실제 페이지를 스크롤하며 녹화한 화면입니다(35초, 소리 없음). 데스크톱 1440×900 · 모바일 390×844 에서 검수했습니다.
섹션 화면

Process 
Bench 
In use 
Proof
섹션 순서
위에서 아래 순서입니다. 내비게이션과 푸터는 모든 페이지에 들어 있어 뺐습니다.
- 01HeroH6 Origin & Craft
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.
- 02Process이용 과정
Pinned 17-frame sequence from raw billet to finished knife, four steps with measured sample data.
Each step carries a number the workshop controls — evidence instead of adjectives.
- 03Bench작업·결과
The same four steps as workshop photos.
Shows the people and the bench behind the process.
- 04In use작업·결과
Three stacked sticky panels of the knife in a kitchen.
Connects the craft to everyday use before the hard facts.
- 05Proof후기·근거
Hardness and edge-angle instruments, a spec sheet and promises in plain words.
Proof without reviews: measurable facts and written promises answer 'will it last?'.
- 06FAQ자주 묻는 질문
Care, rust, chips, returns and sharpening, with an image swap.
Handles the specific fears of an expensive purchase.
- 07CTA행동 유도
"See the knife" opening an in-page product sheet (specs, care, warranty, sample price).
One action everywhere; checkout stays honestly out of scope.
조건별 변형
레시피는 만들기 전에 세 가지를 묻고, 답에 따라 아래 규칙으로 섹션을 바꿉니다.
| 이럴 때 | 이렇게 바꾼다 |
|---|---|
| No reviews, ratings, press or awards | Proof is "numbers, not reviews": measured specs + spec sheet + promises. Never add testimonials or user counts. |
| Fewer than 4 making steps | Use 3 segments (bounds 0, 1/3, 2/3, 1) unless you can name 4 real steps. |
| No written promises | Drop the "In plain words" block and the Warranty tab; FAQ answers say "ask us". |
| No real price | Show the price only as "Sample price" or drop it everywhere. |
| Checkout not built | The sheet footer says "Checkout is not part of this sample page" — never a fake "Add to cart". |
| More than one product | Wrong skeleton — use Commerce × Take Action (H7). |
스타일
Stage — strong scale contrast, cool slate and steel, one fog-light proof band, one patina-copper accent
쓰는 법
- 01복사
레시피 복사를 누르면 이 페이지의 전체 코드·토큰·이미지 주소가 든 레시피가 복사돼요.
- 02붙여 넣기
빈 폴더나 지금 프로젝트에서 Claude Code·Codex 를 열고 붙여 넣으세요.
- 03세 가지 답하기
에이전트가 서비스·주 행동·실제로 있는 자료(후기·가격·이미지 등)를 먼저 묻습니다. 있는 것만 답하세요.
- 04확인
답에 맞춰 섹션을 조정해 같은 구성·타이포·모션으로 만듭니다. 없는 후기·수치는 지어내지 않습니다.
레시피
- 길이
- 134,729자 · 약 34k 토큰
- 스택
- React 19 + Vite 7 + Tailwind CSS v4 + motion + Lenis (TypeScript)
- 글꼴
- Source Serif 4 · Instrument Sans
- 버전
- v1.2.2
- 예시
- 가상 브랜드 · 샘플 데이터
레시피 하나에 이 페이지를 다시 만드는 데 필요한 것이 모두 들어 있습니다. MCP 를 연결했다면 get_ui 로도 받을 수 있어요.
레시피 안 이미지는 duchamp.app 에서 바로 불러옵니다. 내 이미지가 있으면 바꾸라고 말하세요.
첫 화면만 필요하면 히어로 레시피가 따로 있어요. 히어로만 보기 →

