先看看示例
作者提供的示例，实际效果取决于你的输入和使用工具。
输入
输入后点击搜索；请求中禁重复提交；无结果显示提示；回车也能提交。
输出
编辑示例 · 未运行
| 状态 | 表现 | 操作 |
|---|---|---|
| 初始 | 显示占位文案“搜索资料” | 输入后可提交 |
| 加载 | 按钮显示“搜索中” | 同一请求不重复提交 |
| 无结果 | 保留关键词，提示尝试其他词 | 可修改再次搜索 |
| 错误 | 显示重试入口 | 保留已输入内容 |
键盘：输入框回车提交；结果刷新后不强制移走焦点。
方法说明
整理布局、设计变量、组件状态和响应式细节，减少实现时的猜测。 具体任务 补齐组件状态交付：明确默认、加载、空、错误及权限状态的显示与交互。 说明窄屏和键盘行为：把布局变化、焦点和长内容处理交给开发。 必需材料 设计稿、截图或设计描述 页面用途与前端约定 可选材料 设计变量 组件库与动效说明 使用门槛 精确数值以可读设计文件为准；截图估计值需标记待确认。 这个 Skill 额外提供的方法 把静态画面补成状态之间可以实现和检查的行为。 编辑示例（未运行） 把搜索框补成可开发的状态表 任务：写搜索组件的交互交付说明 输入： 输入后点击搜索；请求中禁重复提交；无结果显示提示；回车也能提交。 结果片段： |状态|表现|操作| |---|---|---| |初始|显示占位文案“搜索资料”|输入后可提交| |加载|按钮显示“搜索中”|同一请求不重复提交| |无结果|保留关键词，提示尝试其他词|可修改再次搜索| |错误|显示重试入口|保留已输入内容| 键盘：输入框回车提交；结果刷新后不强制移走焦点。 以下为官方编辑构造的示例，未运行上游 Skill。表格补齐了静态稿常缺的状态，不猜测未提供的像素尺寸。 首次任务 任务：补齐组件状态交付。 任务重点：明确默认、加载、空、错误及权限状态的显示与交互。 必需材料： - 设计稿、截图或设计描述：[填写或粘贴我的材料；未具备则说明] - 页面用途与前端约定：[填写或粘贴我的材料；未具备则说明] 可选补充： - 设计变量：[可填写，未提供不应假定存在] - 组件库与动效说明：[可填写，未提供不应假定存在] 请交付可直接审阅或编辑的文稿，并单列待确认信息。仅依据这些材料处理；缺少决定结果的信息时先说明缺口，不补造事实。未执行的检查、修改或外部操作明确标为未执行。 使用前提：精确数值以可读设计文件为准；截图估计值需标记待确认。 处理边界：设计说明不代表真实浏览器已验收；未给出的尺寸或动效不能伪装为设计原值 验收要求： 1. 状态表覆盖主要正常与异常路径。 2. 响应式规则能用断点复现。 3. 焦点顺序和键盘操作明确。 验收方法 状态表覆盖主要正常与异常路径 响应式规则能用断点复现 焦点顺序和键盘操作明确 依赖与准备 可用设计描述开始；读取Figma需要相应连接器与文件权限。 使用边界 设计说明不代表真实浏览器已验收 未给出的尺寸或动效不能伪装为设计原值 排错 开发不断追问：核对缺失的是状态、内容边界还是响应式行为。 截图数值对不上：改用设计文件或令牌，保留推测项标签。 固定来源 https://github.com/anthropics/knowledge-work-plugins/blob/da38ec1ee89d41e5380e652a97382695003396e7/design/skills/design-handoff/SKILL.md