
미리보기 갤러리
비슷한 Skill
모든 Skill 보기제공 내용
- 오프라인에서도 열리는 단일 독립 HTML 파일로 된 완전한 개발 도구 사이트: 홈, 문서, 변경 로그, 다운로드, 보안, 고객 사례, 가입, 로그인, 문의, 약관, 404
- 실제로 작동하는 제품 인터페이스: 실행과 재생이 되는 플로 캔버스, 클릭 가능한 노드, 트리거 스위치, 조정 가능한 재시도 정책, 필터링되는 실행 기록, 기간을 전환하는 차트, 실시간 로그 tail
- 시안 포인트 컬러 하나를 쓴 다크 퍼스트 뉴트럴 그레이, 완성된 라이트 테마, 내장된 Hanken Grotesk와 JetBrains Mono, 그리고 고객 사례·러너·아바타에만 쓰이는 사진
이런 분께 추천
- 디자인 작업 없이 신뢰감 있는 다크 사이트가 필요한 데스크톱 앱, CLI, 자동화 플랫폼, 오픈소스 개발 도구 출시 팀
- 실행, 재시도, 로그, 로컬 실행처럼 말로 설명하기보다 보여 주는 편이 쉬운 강점을 가진 제품
- 지금 바로 쓸 독립형 사이트나, 같은 디자인을 자신의 Next.js, React, Vue, Svelte, Astro 프로젝트로 옮기고 싶은 개발자
이런 분께는 비추천
- 라이트 퍼스트 룩이 필요한 브랜드: 라이트 테마도 완성되어 있지만 디자인은 다크 기준으로 만들어졌습니다
- 처음부터 CMS 기반이나 다국어 사이트가 필요한 팀
- 실제 고객 로고나 언론 보도를 기대하는 경우: 모든 브랜드, 인물, 인용문, 수치는 직접 교체하기 전까지 가상입니다
제품 런칭·앱 성장웹 디자인·디지털 경험홈페이지 제작랜딩페이지 제작웹 템플릿 제작스타일 고정편집 가능한 결과물단계별 확인시안 포인트다크 우선차트 패널노드 캔버스 Hero그레인 텍스처
이 Skill 소개

개발 도구를 설명해 주면 제품이 스스로를 설명하는 차분한 다크 퍼스트 제품 사이트를 받을 수 있습니다. 차분한 두 줄 헤드라인 아래에서 플로 캔버스가 실행되고, 실패한 단계를 재시도하며, 로그를 스트리밍합니다. 어떤 브라우저에서도 열리고 오프라인에서도 작동하는 단일 독립 파일로 제공됩니다.

제공 내용
- Tab형 플로 탐색기, 단계 라이브러리 레일, 관측성 차트, 로컬 퍼스트 다이어그램, 코드형 플로 섹션, 고객 사례, 비교표가 포함된 요금제, FAQ, OS별 설치 섹션을 갖춘 랜딩 페이지
- 문서, 변경 로그, 다운로드, 보안, 고객 사례, 가입, 로그인, 문의, 개인정보 처리방침, 이용약관, 404 페이지
- 인터랙티브 제품 패널: 트리거 스위치, 조정하고 시뮬레이션할 수 있는 재시도 정책, 필터와 검색이 있는 실행 기록, 실시간 로그 tail
- 시안 포인트 컬러 하나에 은은한 글로와 미세한 그레인을 더한 블랙 계열 그레이, 그리고 완성된 라이트 테마
- 내 프로젝트 안에서는 같은 디자인을 사용 중인 스택의 컴포넌트와 라우트로 구현

사용 방법
- 제품명, 내 제품에서 플로가 의미하는 것, 트리거 유형, 실행 환경, 설치 방법, 요금제, CTA를 알려 주세요
- 내 단계와 명령어를 중심으로 캔버스, 탐색기, 문서를 다시 구성하고, 임의로 작성한 고객·가격·보안 정보는 목록으로 정리해 줍니다
- 완성된 파일을 브라우저에서 열고, 요금제를 3단계로 바꾸거나 탐색기 Tab을 변경하는 식으로 원하는 수정을 평소 말투로 요청하세요

고객 사진과 아바타 사진은 에이전트의 이미지 도구로 생성되며, 해당 도구의 사용 요금이 발생할 수 있습니다. 폰트와 이미지는 완성된 파일에 내장됩니다.
시작 전에 필요한 것
- 준비할 것
- 제품명, 한 줄 약속, 내 제품에서 플로가 의미하는 것과 실행 환경 · 트리거 유형, 런타임 또는 연동 서비스, 설치 경로, 요금제와 가격, CTA(다운로드, 가입, 체험, Star)
- 의존성
- 에이전트 컴퓨터의 Node.js 18 이상 — 오프라인 단일 파일을 빌드하는 번들 스크립트 실행용 · 파일 빌드 중 인터넷 연결 — 폰트를 한 번 내려받아 내장하기 위해 필요 · 선택 사항: 고객 사례, 러너, 아바타 사진을 위한 에이전트의 이미지 생성 도구
- 외부 비용
- 고객 사례, 러너 이미지, 아바타 사진은 에이전트의 자체 이미지 도구로 생성되며, 해당 도구의 사용 요금이 발생할 수 있습니다. 이미지 도구가 없으면 직접 준비한 사진이나 명확하게 표시된 이미지 자리를 사용합니다.
- 최근 테스트
- v1.0.6 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
사용자 리뷰
리뷰를 불러오는 중…









