Tracklane 개발자 도구 랜딩 페이지v1.0.5
이 Skill로 다음을 할 수 있습니다: 홈페이지 제작.
급상승
5.0다운로드 32회좋아요 0개저장 0회
$4.99
이 Skill을 구매하면 무엇을 받나요?따뜻한 샌드 톤 캔버스, 민트색 섹션 밴드, 촘촘한 헤드라인, 라이브 제품 창 옆에 놓인 차분한 분할 Hero로 완성도 높은 개발자 도구 마케팅 사이트를 만듭니다. 워크플로 탭, 평가 경로, 보안, 요금제, 부속 페이지가 모두 작동하며, 어떤 브라우저에서도 열리고 오프라인에서도 작동하는 단일 파일로 라이트·다크 테마와 함께 제공됩니다.
2026년 10월 3일 업데이트
미리보기 갤러리
비슷한 Skill
모든 Skill 보기
제공 내용
- 폰트와 이미지가 내장되어 어떤 브라우저에서도 열리고 오프라인에서도 작동하는 단일 독립 웹사이트 파일. 프레임워크 프로젝트가 있다면 그 프로젝트로 이식합니다.
- 보드, 번업, 로드맵 뷰를 갖춘 라이브 제품 창과 함께, 작동하는 bento, 사이클 탭, 커맨드 라인·Git·API 워크플로 탭, 결제 주기 전환이 있는 요금제.
- 요금제 비교, 변경 이력, 로그인, 회원가입, 데모 예약, 보안, 고객 사례, 회사 소개, 법적 고지 페이지와 완전한 다크 테마.
이런 분께 추천
- 이슈 트래커, 기획 도구 등 B2B 개발자 제품을 출시하는 팀.
- 자신의 상태를 보드, 번업, 로드맵 뷰에 대응시킬 수 있는 인시던트·CI·배포 도구.
- 평가 경로, 보안 정보, 비교표를 기대하는 기술 구매자에게 판매하는 제품.
이런 분께는 비추천
- 실제 계정, 로그인, 폼 전송 — 폼은 유효성 검사 후 데모 결과만 정직하게 보여 줍니다.
- 콘텐츠 관리 시스템이나 다국어 지원이 기본으로 필요한 사이트.
- 확인할 수 없는 실제 고객 로고나 주장을 보여 주는 경우 — 실제 고객이 없으면 로고 마퀴와 인용문은 제거됩니다.
제품 런칭·앱 성장웹 디자인·디지털 경험홈페이지 제작랜딩페이지 제작웹 템플릿 제작스타일 고정편집 가능한 결과물전환 중심벤토 그리드라운드 그라데이션 카드샌드·민트 섹션타이트 자간 헤드라인라이브 제품 창 Hero
이 Skill 소개
Tracklane 개발자 도구 랜딩 페이지는 완성된 회사 사이트처럼 느껴지는 개발자 도구 마케팅 사이트를 만듭니다. 따뜻한 샌드 톤 캔버스에 민트색 섹션 밴드, 검정에 가까운 잉크색, 촘촘한 헤드라인, 그리고 오른쪽에 라이브 제품 창이 놓인 차분한 분할 Hero가 특징입니다. 예시는 사이클 기획을 위한 가상의 이슈 트래커 Tracklane으로, 전체 홈페이지와 요금제, 변경 이력, 로그인, 회원가입, 데모, 보안, 고객 사례, 회사 소개, 법적 고지 페이지를 갖추고 있습니다.
제공 내용
- 폰트와 이미지가 내장되어 어떤 브라우저에서도 열리고 오프라인에서도 작동하는 단일 웹사이트 파일. 이미 프레임워크 프로젝트가 있다면 같은 구조를 그 프로젝트로 옮깁니다.
- 사용자의 실제 객체로 그린 제품 창. 보드, 번업, 로드맵 뷰가 한 번 자동으로 전환되고, 브랜치를 푸시하면 카드가 움직입니다.
- 실제로 작동하는 홈 섹션: 숫자가 올라가는 지표 카드, 분류 대기열과 이슈 스레드가 담긴 5칸 bento, 사이클 탭, 복사 기능이 있는 커맨드 라인·Git·API 개발자 워크플로 탭, 평가 경로, 보안, 인용문, 결제 주기 전환이 있는 요금제, FAQ.
- 내부 페이지: 요금제 비교표, 필터와 검색이 있는 변경 이력, SSO 조회가 되는 로그인, 회원가입, 데모 예약, 고객 사례, 채용 중인 직무가 있는 회사 소개, 개인정보 처리방침, 이용약관, 404 페이지.
- 완전한 다크 테마와 동작 줄이기 설정을 존중하는 차분한 모션.
사용 방법
- 제품명과 한 줄 약속, 제품이 관리하는 작업 객체, 핵심 기능 5가지, Git·커맨드 라인·API와 연결되는 방식, 보안 정보, 요금제 등급, 주요 CTA를 알려 주세요. 빠진 정보는 그럴듯한 플레이스홀더로 초안을 작성하고 확인할 수 있도록 목록으로 정리합니다.
- 제품을 가장 잘 보여 줄 뷰 3가지를 에이전트에게 알려 주세요. 예를 들어 이슈 대신 인시던트, 배포, 티켓을 쓸 수 있습니다.
- 모든 페이지를 데스크톱과 휴대폰에서 라이트·다크 모드로 열어 보고, 제품 창, bento, 탭, 폼을 직접 사용해 본 뒤 수정 사항을 요청하세요.
서체는 Inter Tight, Inter, Geist Mono이며 파일에 내장되어 있습니다. 고객·팀 사진은 에이전트의 자체 이미지 도구로 만들며 사용 요금이 부과될 수 있습니다. 제품 화면은 언제나 코드로 그리며, 생성된 스크린샷은 쓰지 않습니다.
시작 전에 필요한 것
- 준비할 것
- 제품명, 한 줄 약속, 제품이 관리하는 작업 객체 · 기능, 개발자 워크플로, 보안 정보, 요금제 등급, 주요 CTA · 사용해도 되는 고객 인용문과 지표, 또는 확인용 플레이스홀더 초안 작성 허락
- 의존성
- 에이전트 컴퓨터의 Node.js 18 이상 — 오프라인 단일 파일을 빌드하는 번들 스크립트 실행용 · 파일 빌드 중 인터넷 연결 — 폰트를 한 번 내려받아 내장하기 위해 필요 · 고객·팀 사진용 에이전트 이미지 도구 또는 직접 준비한 사진
- 외부 비용
- 고객 인물 사진, 사례 사진, 팀 사진은 에이전트의 자체 이미지 도구로 생성하며 사용 요금이 부과될 수 있습니다. 도구가 없다면 직접 사진을 준비하거나 인용문·사례 섹션을 빼면 되며, 제품 창에는 이미지가 필요 없습니다. 예시를 보는 데는 비용이 들지 않습니다.
- 최근 테스트
- v1.0.5 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
사용자 리뷰
리뷰를 불러오는 중…