CraftKit/plugins/dev/skills/design-frontend/SKILL.md

name, description

name	description
design-frontend	基于需求、现有前端代码和项目规范设计页面清单、路由、状态、交互、组件组合和数据流。适用于新页面或复杂前端变更的设计；组件单项选型、纯视觉样式、表单局部布局、接口映射或直接编码不应触发。

前端设计

将用户场景转化为可实现的页面级契约，不生成完整前端代码，不绑定固定框架、组件库或页面模板。

工作流

1. 读取需求、.craftkit/project.json、依赖和锁文件、适用规范及相关页面，确认框架与精确版本。
2. 按 页面规划 明确场景、页面、路由、复用和状态边界。
3. 按 数据设计 设计视图模型、状态所有权、加载与提交转换、错误和权限呈现。
4. 组件、样式和表单结构分别复用 component、style、form 的证据与结论；本 Skill 负责页面级组合。
5. API 契约需要映射时交由 prepare-api，并在设计中记录所需接口、字段和未决项。
6. 按 设计输出 展示方案和风险；用户要求落盘时，先确认项目约定路径。

边界

• 不从接口字段描述反向改写已确认的用户文案和交互含义。
• 不编造组件、属性、事件、接口或业务校验；缺少证据时列为待确认。
• Vue、React 或其他框架的版本差异由当前项目证据决定，不跨版本混用。
• 未执行真实渲染、浏览器或辅助技术检查时，不宣称交互验收通过。