Beacon SaaS 랜딩 페이지v1.0.4
이 Skill로 다음을 할 수 있습니다: 랜딩페이지 제작.
인기
5.0다운로드 117회좋아요 1개저장 3회
무료
따뜻한 뉴트럴 톤 위에 부드러운 파란 빛줄기 하나가 비추는 차분한 SaaS 마케팅 사이트입니다. 그라디언트 헤드라인, 조용한 중앙 정렬 Hero, 스크린샷 대신 실제로 작동하는 콘솔로 보여주는 제품 화면이 특징입니다. 그 아래로 기능, Tab형 제품 투어, 설정 단계, 고객 사례, 비교 표가 있는 월간·연간 요금제, 보안, FAQ가 이어지고, 회원가입, 로그인, 영업 문의, 변경 로그, 상태, 약관, 404 페이지도 포함됩니다. 라이트·다크 테마 모두 완성되어 있으며 모든 링크와 폼이 작동합니다.
2026년 10월 3일 업데이트
미리보기 갤러리
비슷한 Skill
모든 Skill 보기
제공 내용
- 어떤 브라우저에서도 오프라인으로 열리는 단일 HTML 파일로 된 완성형 SaaS 사이트: 랜딩 페이지와 회원가입, 로그인, 영업 문의, 변경 로그, 상태, 약관, 404 페이지
- 정적인 스크린샷 대신 내 제품의 용어로 다시 만든 실시간 제품 콘솔: 기간 전환, 차트 툴팁, 실시간 카운터, 장애 타임라인 포함
- Geist 서체, 파란 빛줄기 하나, 따뜻한 뉴트럴 톤 표면, 완성된 라이트·다크 테마, 유효성 검사·로딩·완료 상태가 있는 폼. 자체 프로젝트에서는 같은 디자인을 내 스택으로 구현
이런 분께 추천
- 이번 주 안에 요금제, 회원가입, 변경 로그를 갖춘 신뢰감 있는 SaaS 마케팅 사이트가 필요한 창업자와 인디 해커
- 제품 자체를 작동하는 인터페이스로 보여주고 싶은 개발자 도구, 모니터링, API, 인프라 제품
- 완성도 높은 페이지에서 포지셔닝 문구를 바로 다듬고 싶은 프로덕트 마케터
이런 분께는 비추천
- CMS, 블로그, 실제 계정이 필요한 사이트. 회원가입과 문의 폼은 페이지 안에서만 확인되며, 백엔드 연결은 직접 해야 합니다
- 기존 디자인 시스템을 따라야 하는 브랜드. 따뜻한 뉴트럴 톤, 파란 빛줄기 하나, 그라디언트 헤드라인 자체가 이 Skill의 핵심입니다
- 사진을 전면에 내세우는 소비자·라이프스타일 브랜드. 이미지는 고객 사례, 후기, 에디토리얼 사진 1장, 팀 사진으로 한정됩니다
제품 런칭·앱 성장웹 디자인·디지털 경험랜딩페이지 제작스타일 고정편집 가능한 결과물빠른 결과물미니멀리스트글로우 포인트그라데이션 타이포소프트 뉴트럴
이 Skill 소개
제품을 설명하면 완성된 SaaS 마케팅 사이트를 받습니다. 따뜻한 뉴트럴 톤의 표면, 부드러운 파란 빛줄기 하나, 그라디언트 헤드라인, 그리고 스크린샷이 아닌 실시간 콘솔로 보여주는 제품 화면이 특징입니다. 어떤 브라우저에서도 열리고 오프라인에서도 작동하는 단일 파일로 제공됩니다.
제공 내용
- 기능 벤토, 실시간 제품 콘솔, Tab형 투어, 설정 단계, 고객 사례와 후기, 비교 표가 있는 요금제, 보안, FAQ, 마무리 CTA로 구성된 랜딩 페이지
- 모두 연결되어 작동하는 회원가입, 로그인, 영업 문의, 변경 로그, 상태, 개인정보 처리방침, 이용약관, 404 페이지
- 완성된 라이트·다크 테마, 차분한 스크롤 등장 효과, 동작 줄이기를 선호하는 방문자에게는 꺼지는 모션
- 입력 즉시 유효성을 검사하고 로딩·완료 상태를 보여주는 폼, 그리고 변경 로그 필터와 검색
- 자체 프로젝트 안에서는 같은 디자인을 해당 스택의 컴포넌트로 구현
사용 방법
- 제품명, 제품이 하는 일, 요금제, 사용할 수 있는 고객사나 인용문을 알려 주세요. 대략적인 메모로도 충분합니다
- 섹션과 페이지를 알아서 고르게 하거나 원하는 것을 지정하세요. 제공하지 않은 내용은 초안으로 작성되고 확인할 수 있도록 목록으로 정리됩니다
- 완성된 파일을 브라우저에서 열고, 문구, 섹션, 요금제 수정을 평소 쓰는 말로 요청하세요
사진은 에이전트의 이미지 도구로 생성되며 해당 도구의 사용 요금이 발생할 수 있습니다. 도구가 없으면 이니셜과 제품 카드로 대체됩니다. 폰트와 이미지가 내장되어 있어 완성된 파일은 네트워크 요청을 보내지 않습니다.
시작 전에 필요한 것
- 준비할 것
- 제품명, 하는 일과 대상, 4~6개의 기능, 실제 한도가 있는 2~4개 요금제(대략적인 메모도 괜찮습니다) · 선택 사항: 사용 허가를 받은 고객명, 인용문, 수치, 사진
- 의존성
- 에이전트 컴퓨터의 Node.js 18 이상 — 오프라인 단일 파일을 빌드하는 번들 스크립트 실행용 · 파일 빌드 중 인터넷 연결 — 폰트를 한 번 내려받아 내장하기 위해 필요 · 선택 사항: 고객, 에디토리얼, 후기, 팀 사진을 위한 에이전트의 이미지 생성 도구
- 외부 비용
- 사진은 에이전트의 자체 이미지 도구로 생성되며 해당 도구의 사용 요금이 발생할 수 있습니다. 도구가 없어도 사이트는 빌드됩니다. 후기는 이니셜을 사용하고, 에디토리얼 사진은 제품 카드로 바뀌며, 팀 사진은 생략됩니다.
- 최근 테스트
- v1.0.4 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
사용자 리뷰
리뷰를 불러오는 중…