27 lines
2.1 KiB
Markdown
27 lines
2.1 KiB
Markdown
---
|
|
name: design-frontend
|
|
description: 基于需求、现有前端代码和项目规范设计页面清单、路由、状态、交互、组件组合和数据流。适用于新页面或复杂前端变更的设计；组件单项选型、纯视觉样式、表单局部布局、接口映射或直接编码不应触发。
|
|
---
|
|
|
|
# 前端设计
|
|
|
|
将用户场景转化为可实现的页面级契约，不生成完整前端代码，不绑定固定框架、组件库或页面模板。
|
|
|
|
## 工作流
|
|
|
|
1. 读取需求、`.craftkit/project.json`、依赖和锁文件、适用规范及相关页面，确认框架与精确版本。
|
|
2. 按 [页面规划](references/pages.md) 明确场景、页面、路由、复用和状态边界。
|
|
3. 按 [数据设计](references/data.md) 设计视图模型、状态所有权、加载与提交转换、错误和权限呈现。
|
|
4. 组件、样式和表单结构分别复用 `component`、`style`、`form` 的证据与结论；本 Skill 负责页面级组合。
|
|
5. API 契约需要映射时交由 `prepare-api`，并在设计中记录所需接口、字段和未决项。
|
|
6. 按 [设计输出](references/output.md) 展示方案和风险；用户要求落盘时读取 `.craftkit/project.json` 的 `documents` 配置，过程设计使用 `workRoot`，共享设计使用 `designRoot`。
|
|
|
|
落盘前检索同主题的需求、设计、规范或知识，优先更新已有权威文档。共享长期文档新建或实质修改后按 `.craftkit/standards/document-maintenance.md` 更新审核状态；排版和错字修正不改变状态。`r`n`r`n写入后在 `workRoot/<task>/task.json` 登记本次创建、更新或引用的文档及 `relationship`；已有记录时保守合并。关联旧文档不转移所有权，也不产生删除权限；不修改项目级默认配置。
|
|
|
|
## 边界
|
|
|
|
- 不从接口字段描述反向改写已确认的用户文案和交互含义。
|
|
- 不编造组件、属性、事件、接口或业务校验；缺少证据时列为待确认。
|
|
- Vue、React 或其他框架的版本差异由当前项目证据决定，不跨版本混用。
|
|
- 未执行真实渲染、浏览器或辅助技术检查时，不宣称交互验收通过。
|