UI · 페이지

Mardel

코드 렌더 · 같은 결과

Handmade pour-over set · show what it is and how it's used

Fictional ceramics studio selling one stoneware pour-over set

커머스
이해
저널
H4 Product Spotlight

Mardel는 가상 브랜드이고 가격·수치·이미지는 모두 샘플입니다. 레시피는 실제 콘텐츠가 없는 자리를 지어내지 않고 조건 규칙대로 바꿉니다.

실제 페이지를 스크롤하며 녹화한 화면입니다(27초, 소리 없음). 데스크톱 1440×900 · 모바일 390×844 에서 검수했습니다.

섹션 화면

Showcase
Benefits
How it works
FAQ

섹션 순서

위에서 아래 순서입니다. 내비게이션과 푸터는 모든 페이지에 들어 있어 뺐습니다.

01
HeroH4 Product Spotlight
The set as the object, with callouts for each piece and the sample price.
H4 Product Spotlight: the visitor first learns exactly what is in the box.
02
Showcase작업·결과
Pinned horizontal photo essay of one morning, with a timeline.
Understanding a product means seeing it used — a use scene, not a feature list.
03
Benefits혜택·기능
Each physical detail → what it changes for the user, with a pinned image swap.
Turns specs into use value as a guide, never a guarantee.
04
How it works이용 과정
Choose → receive → use & care, with a scroll-drawn line.
Covers the path from order to first brew so nothing feels unknown.
05
FAQ자주 묻는 질문
Size, care and fit, with dimension lines drawn on an elevation photo.
Answers the fit questions a ceramics buyer actually has.
06
CTA행동 유도
"See the set" with the same price and label as the hero.
The goal is the product detail, reached from one consistent button.

조건별 변형

레시피는 만들기 전에 세 가지를 묻고, 답에 따라 아래 규칙으로 섹션을 바꿉니다.

이럴 때	이렇게 바꾼다
No reviews or press	No testimonial, rating, star or "as seen in" line — this skeleton has no proof section by design.
One product	No option picker, swatches or cart; one CTA label/href in nav, hero and CTA. Step 01 lists at most one add-on.
Several products	Wrong skeleton — use Commerce × Take Action instead and say so.
No real photos	Generate them or use the Mardel set as labelled placeholder art; never stock photos.
No confirmed dimensions	Keep the elevation photo but drop the measurement lines; the size answer says "Dimensions on the product page".
Prices not live	Keep "Sample price" next to every price and the masthead line "Fictional studio · sample data".

스타일

Journal — masthead line, roman folios, figure captions, hairline rules, serif display, one rust accent

다른 페이지