name: handoff-to-claude-code
description: "Developer handoff package"
user-invocable: true

Handoff to Claude Code / 交接给 Claude Code

Create a comprehensive handoff package so a developer using Claude Code can implement this design in a real codebase.

创建一份全面的交接包，使使用 Claude Code 的开发者能够在真实代码库中实现本设计。

Steps / 步骤

1. Create a handoff folder in the project directory:
   在项目目录中创建一个交接文件夹：

   mkdir -p <project-folder>/design_handoff_<feature-name>/
   

   Use a descriptive feature name derived from the design (e.g., design_handoff_onboarding_flow, design_handoff_settings_redesign).
   使用从设计中派生的描述性功能名（例如 design_handoff_onboarding_flow、design_handoff_settings_redesign）。

2. Create a README.md in the handoff folder with the following sections:
   在交接文件夹中创建一个 README.md，包含以下章节：

README.md Structure / README.md 结构

# Handoff: <Feature Name>

## Overview
Brief description of what this design is for and what it accomplishes.

## About the Design Files
State clearly that the files in this bundle are **design references created in HTML** — prototypes showing intended look and behavior, not production code to copy directly. Explain that the task is to **recreate these HTML designs in the target codebase's existing environment** (React, Vue, SwiftUI, native, etc.) using its established patterns and libraries — or, if no environment exists yet, to choose the most appropriate framework for the project and implement the designs there.

## Fidelity
State clearly whether the mocks/prototypes created in this conversation are:
- **High-fidelity (hifi)**: Pixel-perfect mockups with final colors, typography, spacing, and interactions. The developer should recreate the UI pixel-perfectly using the codebase's existing libraries and patterns.
- **Low-fidelity (lofi)**: Wireframes or rough layouts showing structure and flow. The developer should use these as a guide for layout and functionality but apply the codebase's existing design system for styling.

## Screens / Views
For each screen or view in the design:
- **Name**: What this screen is called
- **Purpose**: What the user does here
- **Layout**: Detailed description of the layout (grid structure, flex directions, widths, heights, margins, padding)
- **Components**: List each UI component with:
  - Position and size
  - Colors (exact hex values if hifi)
  - Typography (font family, size, weight, line-height, letter-spacing)
  - Border radius, shadows, borders
  - Hover/active/focus states
  - Content/copy (exact text used)

## Interactions & Behavior
- Click handlers and navigation flows
- Animations and transitions (duration, easing, properties)
- Hover states
- Loading states
- Error states
- Form validation rules
- Responsive behavior (if applicable)

## State Management
- What state variables are needed
- State transitions and their triggers
- Any data fetching requirements

## Design Tokens
List all design values used:
- Colors (with hex values)
- Spacing scale
- Typography scale
- Border radius values
- Shadow values

## Assets
List any images, icons, or other assets used in the design and where they came from.

## Files
List the HTML/CSS/JS files in the project that contain the design, so the developer can reference them.

3. Copy relevant design files into the handoff folder (the HTML prototypes, any component files, etc.)
   将相关设计文件复制到交接文件夹中（HTML 原型、所有组件文件等）

4. Use the present_fs_item_for_download tool with the handoff folder path so the user can download it as a zip.
   使用 present_fs_item_for_download 工具并传入交接文件夹路径，让用户能将其下载为 zip。

Important Notes / 重要注意事项

• Be extremely precise about measurements, colors, and typography — the developer will rely on this documentation
  对尺寸、颜色和排版要极其精确——开发者将依赖这份文档
• Make sure the README states up front that the bundled HTML files are design references, and that the user's described behavior should be understood as recreating those designs in the target app's existing environment (or the best choice of framework if none exists yet) — not shipping the HTML directly
  确保 README 开篇即说明捆绑的 HTML 文件是设计参考，且用户描述的行为应理解为在目标应用的现有环境中重现这些设计（若尚无环境则选择最合适的框架）——而不是直接交付 HTML
• If the design uses Anthropic brand assets, mention that they should use the existing brand system in their codebase
  如果设计使用了 Anthropic 品牌资产，要说明他们应使用其代码库中已有的品牌系统
• After creating, ask user if they want screenshots of the designs to be included. Don't include them by default.
  创建完成后，询问用户是否希望将设计截图包含在内。默认不包含。
• The README should be self-sufficient — a developer who wasn't in this conversation should be able to implement the design from the README alone
  README 应当自洽完备——未参与本对话的开发者仅凭 README 就能实现该设计