SaaS 랜딩 템플릿
제품 한 장 랜딩을 10블록으로 짜고, 원본·정돈판·제품 화면 우선판 세 판을 눈으로 보고 골라 씁니다.
- 조회
- —
- 설치
- —
개요
- 적용 대상
- 웹으로 알리고 가입·시작 버튼으로 전환시키는 제품을 만드는 팀
- 만들어지는 것
- 세 판 비교 화면(데스크톱·휴대폰 폭), 블록마다 채울 산출물과 없을 때 규칙, 한국어 문구 규칙
- 작동 방식
- index.html로 세 판을 보고 하나를 고른 뒤, 블록마다 적힌 설계 산출물에서 문구를 채우고 토큰을 프로젝트 값으로 바꿉니다.
아키텍처와 파이프라인
- 01세 판을 데스크톱·휴대폰 폭으로 비교
- 02블록 10개 순서(내비·히어로·증거·세 걸음·기능·다음 행동·지표·사례·마지막 행동·푸터)
- 03블록마다 채울 산출물과 없을 때 규칙
- 04토큰을 프로젝트 디자인 시스템 값으로 교체
- 05휴대폰 390px·데스크톱 1280px에서 한 줄 문구 확인
기대효과
- 01
빈 화면이 아니라 고른 판에서 시작합니다.
- 02
문구가 앞 단계 설계 산출물에서 나와 지어낸 수치가 들어가지 않습니다.
- 03
첫 화면에 약속 한 줄과 행동 하나가 남습니다.
이 Kit을 프로젝트에 적용하세요
PurplePrint를 연결한 뒤, 지금 쓰는 AI 에이전트에게 이 Kit을 설치해달라고 말하면 됩니다. 무료 체험 중에도, 구독 중에도 받을 수 있습니다.