UI · 페이지
Fernwood Joinery
코드 렌더 · 같은 결과
Furniture repair · trust from one worked case, never testimonials
Fictional two-person furniture repair and restoration workshop
Fernwood Joinery는 가상 브랜드이고 가격·수치·이미지는 모두 샘플입니다. 레시피는 실제 콘텐츠가 없는 자리를 지어내지 않고 조건 규칙대로 바꿉니다.
실제 페이지를 스크롤하며 녹화한 화면입니다(37초, 소리 없음). 데스크톱 1440×900 · 모바일 390×844 에서 검수했습니다.
섹션 화면

Case file 
On collection 
In writing 
Visit
섹션 순서
위에서 아래 순서입니다. 내비게이션과 푸터는 모든 페이지에 들어 있어 뺐습니다.
- 01HeroH3 Evidence First
One worked case beside the chair as it arrived: faults found, written range, final bill, working days and the two makers.
H3 Evidence First: a hesitant owner sees a real job's numbers before any promise.
- 02Case file작업·결과
Condition on arrival in close-ups → pinned scroll-scrubbed repair synced to five dated states → before/after drag on one camera, the bill and the returned broken parts.
Shows exactly what happens to the piece, step by step, with dates.
- 03How it works이용 과정
Three photos → written estimate → bench, each step with its own plate.
Makes the first step small and concrete.
- 04In writing후기·근거
The full estimate document, what changes the price, a range figure, the guarantee in plain words, who does the work and what they won't do.
Trust from written policy instead of reviews, ratings or badges.
- 05Visit문의·위치
Address, hours, drop-in assessment and a sketch map.
A local workshop must feel reachable.
- 06Request행동 유도
Photo assessment request form with three sample photo slots and a "Nothing was sent." confirmation.
The only submit on the page, asking for exactly what the estimate needs.
조건별 변형
레시피는 만들기 전에 세 가지를 묻고, 답에 따라 아래 규칙으로 섹션을 바꿉니다.
| 이럴 때 | 이렇게 바꾼다 |
|---|---|
| No finished case you can show in full | Do not invent one — use the How it works and In writing sections only, and drop the hero's case numbers for the written range alone. |
| No photo layers for a repair sequence | Replace the scroll-scrubbed repair with five dated still plates; never crossfade unrelated shots as one sequence. |
| No public prices | Keep the estimate document but show line items without figures and say "Written estimate before any work". |
| No guarantee | Remove the guarantee block entirely — never soften it into a vague promise. |
| No reviews | This recipe already has none: no testimonials, ratings, logos or certifications. |
| Drop-off only, no visits | Turn Visit into drop-off and collection details; keep the photo request as the main action. |
스타일
Journal — workshop case file: § folios, numbered Pl./Fig. captions, hairline rules, warm paper, one oxblood accent
쓰는 법
- 01복사
레시피 복사를 누르면 이 페이지의 전체 코드·토큰·이미지 주소가 든 레시피가 복사돼요.
- 02붙여 넣기
빈 폴더나 지금 프로젝트에서 Claude Code·Codex 를 열고 붙여 넣으세요.
- 03세 가지 답하기
에이전트가 서비스·주 행동·실제로 있는 자료(후기·가격·이미지 등)를 먼저 묻습니다. 있는 것만 답하세요.
- 04확인
답에 맞춰 섹션을 조정해 같은 구성·타이포·모션으로 만듭니다. 없는 후기·수치는 지어내지 않습니다.
레시피
- 길이
- 123,309자 · 약 31k 토큰
- 스택
- React 19 + Vite 7 + Tailwind CSS v4 + motion + Lenis (TypeScript)
- 글꼴
- Fraunces · Schibsted Grotesk
- 버전
- v1.0.2
- 예시
- 가상 브랜드 · 샘플 데이터
레시피 하나에 이 페이지를 다시 만드는 데 필요한 것이 모두 들어 있습니다. MCP 를 연결했다면 get_ui 로도 받을 수 있어요.
레시피 안 이미지는 duchamp.app 에서 바로 불러옵니다. 내 이미지가 있으면 바꾸라고 말하세요.
첫 화면만 필요하면 히어로 레시피가 따로 있어요. 히어로만 보기 →

