UI · 페이지
Ledgerline
코드 렌더 · 같은 결과
AI bookkeeping · prove accuracy before sign-up
Fictional AI bookkeeping assistant for small studios
Ledgerline는 가상 브랜드이고 가격·수치·이미지는 모두 샘플입니다. 레시피는 실제 콘텐츠가 없는 자리를 지어내지 않고 조건 규칙대로 바꿉니다.
실제 페이지를 스크롤하며 녹화한 화면입니다(28초, 소리 없음). 데스크톱 1440×900 · 모바일 390×844 에서 검수했습니다.
섹션 화면

Evidence 
One receipt 
How it works 
Sample month
섹션 순서
위에서 아래 순서입니다. 내비게이션과 푸터는 모든 페이지에 들어 있어 뺐습니다.
- 01HeroH3 Evidence First
A real DOM excerpt of one sample line: source receipt, bank match, confidence and human-review mark.
H3 Evidence First: a hesitant visitor sees checkable evidence before any promise.
- 02Evidence후기·근거
Trace from monthly total → lines → documents, the review trail and a 'what is sample here' note.
Trust comes from the product's own evidence instead of testimonials or badges.
- 03Interlude작업·결과
A square photo plate with a numbered caption.
Editorial breathing room between evidence and demo.
- 04One receipt시연
Pinned demo: one receipt → entry → reconciled month, with a 17-frame image scrub.
Shows exactly how one record moves, so the visitor can predict the result.
- 05How it works이용 과정
Connect → draft → accountant review.
Names who is accountable at each step.
- 06FAQ자주 묻는 질문
Data, accuracy, sign-off, export and deletion answers.
Answers the specific hesitations (data safety, who signs) in plain policy words.
- 07CTA행동 유도
"Open the sample month" plus a quiet "Talk to an accountant".
The goal is inspecting the sample month; talking to a person is the secondary path.
조건별 변형
레시피는 만들기 전에 세 가지를 묻고, 답에 따라 아래 규칙으로 섹션을 바꿉니다.
| 이럴 때 | 이렇게 바꾼다 |
|---|---|
| No verified reviews, certifications or accuracy figures | No testimonials, logos, security badges, accuracy percentages or user counts — trust comes only from the product's evidence. |
| No inspectable sample | This skeleton is wrong (H3 needs evidence) — switch to SaaS × Understand (H1) and say so. |
| Policies not approved | Keep the FAQ questions but answer "Written policy coming before launch" — never invent a region, window or format. |
| Always | One sample record runs through the page; every total is computed from the rows in data.ts, never typed in copy. |
| Same action in several places | Same label everywhere ("Open the sample month", "Talk to an accountant"); a submit button gets its own verb. |
스타일
Journal — masthead, § folios, numbered captions, hairline rules, cool archive paper, one bookkeeper's-green accent
쓰는 법
- 01복사
레시피 복사를 누르면 이 페이지의 전체 코드·토큰·이미지 주소가 든 레시피가 복사돼요.
- 02붙여 넣기
빈 폴더나 지금 프로젝트에서 Claude Code·Codex 를 열고 붙여 넣으세요.
- 03세 가지 답하기
에이전트가 서비스·주 행동·실제로 있는 자료(후기·가격·이미지 등)를 먼저 묻습니다. 있는 것만 답하세요.
- 04확인
답에 맞춰 섹션을 조정해 같은 구성·타이포·모션으로 만듭니다. 없는 후기·수치는 지어내지 않습니다.
레시피
- 길이
- 118,639자 · 약 30k 토큰
- 스택
- React 19 + Vite 7 + Tailwind CSS v4 + motion + Lenis (TypeScript)
- 글꼴
- Instrument Serif · Geist
- 버전
- v1.0.2
- 예시
- 가상 브랜드 · 샘플 데이터
레시피 하나에 이 페이지를 다시 만드는 데 필요한 것이 모두 들어 있습니다. MCP 를 연결했다면 get_ui 로도 받을 수 있어요.
레시피 안 이미지는 duchamp.app 에서 바로 불러옵니다. 내 이미지가 있으면 바꾸라고 말하세요.
첫 화면만 필요하면 히어로 레시피가 따로 있어요. 히어로만 보기 →

