문서

프롬프트와 워크플로

프롬프트와 워크플로의 작동 예제와 작성 인터페이스입니다.

프롬프트는 독자가 다른 도구로 복사하는 글입니다. DocumentPrompt는 정확한 텍스트를 보존하고 긴 줄을 줄바꿈하며 복사 동작을 보이게 유지합니다. 편집 가능한 입력란이나 모의 채팅으로 표시하지 않습니다.

Review a component

Review this component’s layout, keyboard behavior and reduced-motion state. Explain the observed issue before changing it.

Prepare a site change

Read the site instructions and inspect the existing components. Reuse the shared design tokens and verify both themes at a narrow width.

제안된 변경 검토

Inspect
Read the source and reproduce the issue.
Preview
Review the proposed change and its effect.
Verify
Check the affected behavior and output.

범위를 좁힌 소스 변경

소스

<button>Save</button>

결과

<button type="button">Save</button>

스타일을 적용한 버튼

스타일 견본입니다. 이 버튼은 데이터를 저장하지 않습니다.

<DocumentPrompt  title="Review a component"  text="Review this component's classes and keyboard behavior."/>

작업을 설명하는 짧은 제목을 사용하세요. 문단과 목록을 텍스트 자체에 넣어 클립보드와 이식 가능한 내보내기에 전체 지침을 유지하세요. 짧은 작업과 긴 설정 프롬프트는 같은 레이아웃을 사용하며 모두 읽기 열 안에서 줄바꿈됩니다. 본문은 읽기용 글꼴을 쓰면서 모든 줄바꿈과 복사 텍스트를 정확히 보존합니다. 제목, 안쪽 이음선, 본문은 24px 시작점을 공유합니다. 텍스트는 서버가 렌더링하고 복사 버튼만 클라이언트 상태가 필요합니다.

프롬프트에 도구 이름을 위한 DocumentOptions, 순서 있는 워크플로를 위한 DocumentFlow, 검증된 변경 전후를 위한 DocumentCodeExample을 조합하세요. 워크플로 그림은 도구를 실행하거나 승인이 이루어졌음을 뜻하지 않습니다. 프롬프트는 측정 대상 데모 영역 밖에 두고 공백이 중요한 소스에 가로 스크롤이 필요하면 일반 코드 블록을 사용하세요.

맥락, 검토, 프로젝트 규칙의 레시피는 AI 코딩을, 실제 미리보기/적용 과정은 MCP 서버를 참고하세요. 안내서의 버튼은 독립적인 스타일 견본입니다. 제품별 에이전트 예제는 제품 Guide에 유지합니다.

Inspect

Preview

Verify