AI 개선 프롬프트 — Docs

작동 방식

클릭하면 두 가지 데이터가 결합됩니다.

발견 항목—제목, 설명, 근거 및 수정 방법—은 이미 보고서와 함께 로드됩니다.
코드베이스 framework — scan의 discovery.tech-fingerprint finding에서 감지합니다(Next.js, React, Vue, Django, Express, Rails, Laravel, Flask). framework를 감지하지 못하면 generic recipe로 fallback합니다(그 경우 agent prompt가 repo 상태에서 직접 감지하도록 LLM에 요청합니다).

템플릿은 lib/scanner/fix-prompts.ts에 있습니다. 레지스트리는 크롤링 가능성, 검색 표시, 시맨틱 콘텐츠, 구조화 데이터, 미디어, 성능, 접근성, 폼, 모바일/i18n, 브라우저 호환성, 동의/인터스티셜 동작, 런타임, 소유자 여정 및 저장소 품질 문제에 대한 검사별 지침을 제공합니다. 그 외에는 발견 항목의 기존 remediation 필드가 일반 레시피가 됩니다.

프롬프트 예시

text

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.

지원 framework

다음에 대해 framework-specific snippet을 제공합니다.

Next.js, React, Vue, Nuxt, Svelte(프런트엔드)
Express, Fastify(Node.js 백엔드)
Django, Flask(Python)
Ruby on Rails
Laravel(PHP)
ASP.NET Core(계획 중, 현재는 generic fallback)

Framework 감지는 best-effort입니다. __NEXT_DATA__ tag, __NUXT__, hash cookie(laravel_session), X-Powered-By header, 그리고 몇 가지 signal을 sniff합니다. Custom framework를 쓰는 경우 prompt는 generic recipe로 fallback하고, agent가 package.json에서 직접 파악합니다.

AI 에이전트에서 사용

MCP 서버를 연결했다면 같은 prompt가 slash command로 노출됩니다. Claude Desktop에서:

bash

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

렌더러는 발견 사항을 조회하고, 가능한 경우 상위 스캔에서 프레임워크를 감지한 뒤 템플릿 프롬프트를 렌더링하여 사용자 메시지로 대화에 삽입합니다. Claude API를 왕복 호출하지 않습니다. 템플릿은 순수하며 무료입니다.

클릭마다 Claude를 호출하지 않는 이유

출시 전에는 클릭할 때마다 Anthropic API를 호출해 코드베이스 context로 prompt를 다듬는 방안을 고려했습니다. 하지 않은 이유는 다음과 같습니다.

사용자가 붙여넣는 agent는 이미 코드베이스 context를 가지고 있습니다. repo를 연 Cursor 및 Claude Desktop을 쓰고 있기 때문입니다.
check × framework별 template만으로도 클릭당 비용 없이 가치의 약 80%를 제공합니다.
사용자가 원한다면 나중에 “내 코드베이스용으로 AI로 다듬기” opt-in이 API를 호출할 수 있습니다. 현재는 호출하지 않습니다.