UI · 페이지

Sotto

코드 렌더 · 같은 결과

AI meeting notes · get people to try a sample

Fictional AI meeting-notes tool

AI 도구·SaaS
이해
명료
H1 Product in Use

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

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

섹션 화면

Demo
Benefits
How it works
CTA

섹션 순서

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

01
HeroH1 Product in Use
Headline over a live product surface (title, status chip, progress strip, tabs, two lists) in real DOM.
H1 Product in Use: a first-time visitor understands the tool by seeing its output, not by reading claims.
02
Sequence시연
Pinned 17-frame image scrub: a paper strip turns into a waveform, then into stacked sheets.
Shows the transformation (talk → notes) as one motion before any detail.
03
Demo시연
Pinned demo walking transcript → summary → decisions → action items.
Understanding comes from the real result; each step answers 'what do I get back?'.
04
Benefits혜택·기능
Three-column band (summary, decisions, actions) plus a large Share feature.
Names the value of each output only after the visitor has seen it.
05
Interlude작업·결과
A framed image that opens to full bleed.
A pause between explanation and process keeps the page calm.
06
How it works이용 과정
Three steps with small UI vignettes and a scroll-drawn line.
Removes the last doubt about effort: upload, summarize, share.
07
CTA행동 유도
Same label and link as the hero button, image scales down.
Hero and final CTA lead to one goal: try a sample.

조건별 변형

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

이럴 때	이렇게 바꾼다
No customer reviews	No testimonial, logo wall, rating or user count anywhere — this skeleton ships without a proof section.
Product not live yet	Primary CTA becomes "Join the waitlist"; hero and demo keep fixed demo data captioned "Preview with sample data."
No public pricing	No pricing section or prices in copy; the CTA's secondary link may say "Talk to us".
Pricing exists	Still no pricing section in this skeleton; mention only what the user confirmed.
Different product output	Keep the same surface structure (header, progress, tabs, paragraph, two lists) and relabel rows to what the product really outputs — real DOM, never a screenshot.

스타일

Clarity — information hierarchy, ordered 12-col grid, ivory paper, one cobalt accent

다른 페이지