firecrawl/firecrawl-demo-walkthrough

firecrawl-demo-walkthrough은(는) 무엇을 하나요?

Firecrawl 브라우저를 사용하여 제품의 주요 흐름을 탐색하고 구조화된 UX/제품 둘러보기를 생성합니다. 회원가입, 온보딩, 가격 정책, 문서, 대시보드, 제품 데모 준비, UX 분석 및 첫 실행 경험 분석에 사용하세요.

사용법

이 스킬은 AI 에이전트와 함께 Firecrawl의 헤드리스 브라우저를 사용하여 다음을 수행합니다:

1. 대상 URL 설정: 분석하려는 제품의 시작 URL을 제공합니다.
2. 흐름 정의: 탐색할 사용자 흐름(예: 로그인, 회원가입, 기능 둘러보기)을 지정합니다.
3. 자동 탐색: Firecrawl 브라우저가 각 단계를 순서대로 실행하며 스크린샷과 상태를 기록합니다.
4. 결과 생성: 각 단계마다 설명, 스크린샷, 상호작용 내용을 포함한 마크다운 문서를 출력합니다.

지원 플랫폼

• Claude Code
• Cursor
• Codex
• 기타 AI 코딩 도우미

예시

# 제품 둘러보기: Example SaaS

## 단계 1: 랜딩 페이지
- URL: https://example.com
- 설명: 제품 소개 페이지, '시작하기' 버튼 확인
- 스크린샷: ![랜딩 페이지](screenshot_1.png)

## 단계 2: 회원가입 폼
- URL: https://example.com/signup
- 설명: 이메일, 비밀번호 입력 필드, '가입' 버튼
- 스크린샷: ![회원가입](screenshot_2.png)

## 단계 3: 온보딩
- URL: https://example.com/onboarding
- 설명: 첫 실행 시 나타나는 기능 소개 페이지
- 스크린샷: ![온보딩](screenshot_3.png)

참고 사항

• Firecrawl 브라우저는 실제 브라우저처럼 동작하므로 JavaScript가 많은 SPA(Single Page Application)도 잘 처리합니다.
• 분석 결과는 구조화된 마크다운 형식으로 제공되어 추가 편집이나 공유가 용이합니다.
• 각 단계의 스크린샷은 로컬에 저장되거나 URL로 참조될 수 있습니다.

관련 리소스

• Firecrawl 문서
• 예제 둘러보기

참고: 이 스킬은 Firecrawl 브라우저 기능에 의존하며, 대상 웹사이트의 구조와 로딩 시간에 따라 실행 시간이 달라질 수 있습니다.