FixWeb

// docs / ai fix prompts

AI improvement prompts

Every finding has a Copy prompt button beneath the remediation. Click it, paste into Claude / Cursor / Copilot, and the agent gets the canonical improvement recipe for that website-quality issue — no Claude API call from us.

仕組み

クリック時に2つのデータが組み合わさります。

  • 検出結果 — タイトル、説明、証拠、修正方法、CWE です。すでにレポートに読み込まれています。
  • コードベースのフレームワーク — スキャンの discovery.tech-fingerprint 検出結果から判定します（Next.js、React、Vue、Django、Express、Rails、Laravel、Flask）。フレームワークが検出されない場合は汎用レシピにフォールバックします（その場合、エージェントプロンプトは LLM にリポジトリ状態から判定するよう求めます）。

Templates live in lib/scanner/fix-prompts.ts. The registry has check-specific guidance for crawlability, search presentation, semantic content, structured data, media, performance, accessibility, forms, mobile/i18n, runtime, owner journeys, and repo-quality issues. For everything else, the existing remediation field on the finding becomes the generic recipe.

プロンプトの見た目

Fix the "Hero image is lazy-loaded and missing dimensions" finding on /pricing.

Issue: The largest above-the-fold image is marked loading="lazy" and has
no explicit width/height. That can delay LCP and create layout shift.

Codebase context: Next.js.

Recommended fix:
Use next/image or the existing image component with explicit width/height,
responsive sizes, meaningful alt text, and priority/fetchPriority for the
first major visual on the page.

Constraints:
- Don't break existing tests; run the test suite after the change.
- Match the codebase's existing style and lint config.
- Add a brief comment explaining the performance reasoning only where the
  fix would otherwise look arbitrary.
- If the fix needs a new dependency, install it via the project's
  package manager (npm / pnpm / pip / bundle / composer).

Reference: Core Web Vitals / Largest Contentful Paint guidance.

対応フレームワーク

次のフレームワーク向けのスニペットを表示します。

  • Next.js、React、Vue、Nuxt、Svelte（フロントエンド）
  • Express、Fastify（Node.js バックエンド）
  • Django、Flask（Python）
  • Ruby on Rails
  • Laravel（PHP）
  • ASP.NET Core（予定、現在は汎用にフォールバック）

フレームワーク検出はベストエフォートです。__NEXT_DATA__ タグ、__NUXT__、ハッシュ Cookie（laravel_session）、X-Powered-By ヘッダー、その他いくつかのシグナルを確認します。カスタムフレームワークを使っている場合、プロンプトは汎用レシピにフォールバックし、エージェントが package.json から判断します。

AI エージェントから使う

MCP server を接続している場合、同じプロンプトがスラッシュコマンドとして公開されます。Claude Desktop からは次のように使います。

/fixweb-fix finding_id=550e8400-e29b-41d4-a716-446655440000

The renderer looks up the finding, detects the framework from the parent scan when available, renders the templated prompt, and injects it into your conversation as the user message. No round-trip to our Claude API; templates are pure and free.

クリックごとに Claude を呼ばない理由

ローンチ時には、コードベースの文脈でプロンプトを洗練するため、クリックごとに Anthropic API を呼ぶことも検討しました。そうしなかった理由は次のとおりです。

  • ユーザーが貼り付ける先のエージェントには、すでにコードベースの文脈があります。Cursor / Claude Desktop でリポジトリを開いて使っているためです。
  • check × framework ごとのテンプレート化により、クリックごとのコストなしで価値の約80%をカバーできます。
  • ユーザーが望む場合、将来的に「自分のコードベース向けに AI で洗練する」オプトインで API を呼べます。現時点では呼びません。
AI improvement prompts — Docs · FixWeb