mcpField
F
firecrawl-demo-walkthrough

firecrawl-demo-walkthrough

github.com/firecrawlデザイン・UI1393.7k 回インストール1 週間前に更新
リポジトリ

firecrawl-demo-walkthrough について

Firecrawl browserを使い、製品体験を手順ごとに記録するスキルです。画面や操作の収集を案内し、機密情報や取り消せない操作には制限を設けます。

主な機能

  1. 01文脈から製品URLとフローを推定
  2. 02Firecrawl browserで主要フローを閲覧
  3. 03画面、操作、観察内容を記録
  4. 04並行したウォークスルーに対応
  5. 05観察事実と意見を区別

活用シーン

  1. 01登録とオンボーディングの記録
  2. 02ダッシュボード画面と操作の整理
  3. 03料金ページや製品ドキュメントの確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/firecrawl/skills --skill firecrawl-demo-walkthrough

インストール後、Claude Code で/firecrawl-demo-walkthroughを入力して読み込まれたか確認します。

詳細

Firecrawl のデモ手順

これを使って、製品の利用体験を段階的に記録します。

オンボーディングのヒアリング

文脈から製品 URL、確認するフロー、出力形式を推測します。URL が明確な場合は、すぐに進めます。

行き詰まった場合に限り、URL、確認するフロー、保護された領域へのアクセスに必要な認証情報や制約などについて、簡潔な質問を最大 1～3 件します。

Firecrawl の調査計画

Firecrawl ブラウザーを使って製品を開き、主要なフローをたどります。各ステップでスナップショットを取得し、必要に応じてページをスクレイピングして、ユーザーに表示される内容と実行できる操作を記録します。

ユーザーから明示的な指示と許可がない限り、実際の認証情報の入力、購入、取り消し不能な操作は行わないでください。

並行作業

適切な場合は、サブエージェントまたは同等の並列タスク実行ツールを使用します。

  • ホームページとマーケティング
  • サインアップとオンボーディング
  • 料金とプラン
  • ドキュメントと開発者エクスペリエンス
  • ダッシュボードと主要製品
  • ヘルプとサポート

各調査担当者は、訪問した画面、実行した操作、所見、使いにくい点、参照元 URL を報告します。

最終成果物

# Product Walkthrough: [Product]

## Product Overview
[What the product does]

## Flow Walkthroughs
### [Flow Name]
1. [Screen/Page] - what appears and what action is available
2. [Next Screen] - what changes

## Key Findings
[First impression, standout patterns, friction points]

## Recommendations
[UX/product improvements]

## Pages Visited
[URLs]

## Rerun Inputs
workflow: firecrawl-demo-walkthrough
url: [url]
focus: [full/signup/pricing/docs/dashboard]

品質基準

  • 画面、CTA、フォーム、画面遷移について具体的に記述します。
  • 観察した事実と意見を分けます。
  • 訪問したすべてのページを記録します。

コメント

Markdown 対応