Claude Code 前端需求交接技能:把界面状态转成后端数据需求
EnglishClaude Code 安装步骤
- 从固定版本 GitHub 工作副本获取完整的 `cli-tool/components/skills/enterprise-communication/frontend-to-backend-requirements` 目录。
- 把该目录放入目标项目的 `.claude/skills/`,确认 `.claude/skills/frontend-to-backend-requirements/SKILL.md` 存在,再从项目根目录启动 Claude Code 并输入 `/frontend-to-backend-requirements`。
中文摘要
从界面要呈现的信息、用户操作和异常状态出发,写一份后端可评审的数据需求。适合在接口设计开始前明确产品约束和待确认项。
SKILL.md 中文导读
可复现示例
为虚构的社区空间预约列表写需求。管理员看到预约时段和可取消状态。让文档分别描述无预约、读取失败和已过期三种界面状态,并询问能否取消已过期预约。工作步骤
- 逐个界面列出用户需要看到的信息、可采取的动作和预期反馈。
- 记录加载、空结果、出错和特殊状态,再将未定的业务规则整理成问题。
验收方法
应生成 `.claude/docs/ai/room-bookings/backend-requirements.md`,列出列表显示信息、取消后的反馈和三个状态。是否可取消过期预约作为待确认规则保留。
GitHub 原文 · 更新日期
适用环境
Claude Code 和固定版本的技能目录。准备界面草图或流程描述、用户角色和预期操作结果。
常见问题
前端交接里需要先定接口 URL 和字段名吗?
先说明页面需要的数据含义、状态和反馈。接口地址、字段名和存储结构由双方随后对齐。