design-delivery

# 设计到交付 让设计师围绕一个真实可运行的工程，从需求走到页面与代码交付。工程准备、页面制作、检查、修改和交付使用同一份项目资料；面向设计师说明当前结果和下一步，用“启动页面”“打开预览”“保存修改”等说法。 ## 先找到本次工作 读取用户指定的目录或仓库、本项目的工程说明，以及存在的 `.design-sop/project.json`。用 `node <本Skill目录>/scripts/project.mjs inspect <项目目录>` 核对项目、运行命令、代码分支和记录；记录用于恢复进度，当前文件与 Git 状态用于确认现状。多应用仓库定位到本次页面所属应用目录。 确定本次是新建、接入还是继续。已给出的项目、规范和交付约定直接采用；仅对影响执行的缺失信息集中询问。已有项目需要的基础代码、组件资料和启动说明通常找项目的前端；需求找产品经理；设计规范沿用团队资料。 按当前环节读取对应说明： - 新项目或已有项目尚未启动：读 [工程准备](references/project-setup.md)。 - 开始页面制作：读 [需求与设计衔接](references/page-work.md)。 - 页面已做好、需要预览修改：读 [检查与预览](references/preview-review.md)。 - 页面已确认或用户明确要求交付：读 [构建与交付](references/delivery.md)。 ## 推进顺序 1. **准备工程。** 新项目使用用户提供的基础代码或配套 React 工程；已有项目沿用它的组件、依赖和启动方式。准备本次工作分支，启动基础页面，确认浏览器可打开。留下项目位置、分支和预览地址。 2. **理解需求，衔接制作。** 接收现有 PRD、文档或直接输入的需求，明确业务流程、页面信息与状态变化。确认过的需求整理保存，再按“业务流程 → 页面框架 → 组件使用 → 全局样式”衔接页面制作。 3. **检查与修改。** 按 PRD 检查业务完整性，按本次采用的设计规范检查页面。修正问题后提供浏览器预览，让设计师按实际使用顺序检查；反馈直接修改到当前工程，再检查修改结果。 4. **构建并交付。** 沿用项目的提交、推送、构建和预览发布方式。交付页面地址、仓库、分支、提交位置和构建结果；新项目尚无团队发布方式时，先准备可构建的产物，并在需要共享页面时确认发布去向。 首次使用可以走全流程；继续任务从当前环节接着做。用户已认可当前页面或明确要求直接交付时，推进相应操作，不重复确认已确定事项。 ## 页面设计从哪里来 有 Design Skill 时，按用户选择使用它，并提供工程、PRD、组件和规范的位置。独立使用时，由当前 AI 根据相同资料制作页面。已有项目读取现成规范，普通 React 代码和 CSS 的工程也可沿用；从零使用基础工程时，以配套组件的默认样式起步，并保存本次已确认的布局和交互要求。 SOP 保存资料位置与执行进度。页面选型、组件组合、视觉和交互的具体判断归入本项目的设计要求，供生成和检查使用。 ## 保存进度与交接 在工程准备好、需求确认后、页面检查后和交付后，运行 `node <本Skill目录>/scripts/project.mjs record <项目目录>` 保存或刷新 `.design-sop/project.json`；需要补充进度、资料位置、预览和交付结果时使用 `--update <JSON文件>`。数据格式与操作示例见 [工程准备](references/project-setup.md)。 每次结束交代本次完成的工作、可打开的页面，以及下一步。仅交付已实际执行和检查的结果；构建日志、浏览器检查和远端结果分别作为对应操作的依据。