desainpakeai-prototype

DesainPakeAI 原型

使用全局安装的 dpai CLI。不要初始化或调用 DesainPakeAI MCP 服务，也不要在每次工作区操作时使用 npx。

当此技能已可用时，日常任务中不要运行 npx skills add、skills check 或 skills update。仅在初始设置期间安装该技能；只有用户明确要求同步技能时，才进行检查或更新。

开始连续任务

只要会话、目标项目和连接保持不变，后续编辑就沿用已确认的设置。

1. 首先运行 <prefix> --version。如果命令不可用，则运行 npm install --global desainpakeai-cli@latest，然后再次检查版本。 不要在每项日常任务中重新安装或更新。
2. 在连续任务的其余部分使用该二进制文件。
3. 运行一次 <prefix> auth status --pretty。如果缺少身份验证，请让用户运行 <prefix> auth login --api-url <url> --api-key <dpai_key>， 然后再运行一次 <prefix> auth status --pretty 以验证登录。
4. 运行 <prefix> project current --pretty 并确认这是目标项目。
5. 运行 <prefix> context --pretty 并保留其最新修订版本。
6. 在首次修改工作区源代码之前，仅当同一会话、项目和运行环境中尚未保留该指南时，运行 <prefix> guide get --topic workspace-authoring --raw。在后续任务中复用该指南。仅当上下文丢失或发生变化时才重新获取。 如果任务保持只读，则跳过此步骤。

将成功通过身份验证的 CLI 命令视为连接信号。仅创建或复制 API 密钥并不能证明编码 Agent 已连接。不要初始化、调用或等待 MCP 握手端点。

CLI 的 workspace-authoring 指南是单 HTML 编写最低要求的权威来源。此技能仅规定何时获取该指南；不要在此处复制或推断相互竞争的 CSS、字体、组件或 JavaScript 要求。 只有用户明确要求在文件系统本地操作时，才使用 --workspace <path>。沿用每次成功修改返回的修订版本。

指南目录与时机

在修改源代码之前，必须获取一次 workspace-authoring；同一会话、项目和运行环境的后续任务中应保留该指南。所有其他指南都是可选的任务专用参考。应在指南涵盖的第一个决策之前立即获取，并在该连续任务中复用；只有出现新的未解决风险时，才获取其他指南。切勿预先加载所有可选指南。

• workspace-authoring - 修改工作区源代码前必须获取。
• design-quality - 需要作出实质性的视觉设计决策时。
• accessibility - 涉及键盘、焦点、表单、ARIA 或缩放时。
• layout-responsive - 涉及响应式布局、溢出、RTL 或长内容时。
• typography - 涉及排版、换行、截断或双向文本时。
• color-system - 涉及令牌、主题、状态颜色或对比度时。
• product-writing - 涉及标签、错误、空状态或本地化时。
• ui-polish-motion - 涉及界面表面、图标、动效或视觉状态时。
• prototype-interactions - 涉及模态框、选择器、筛选器、表单或有状态 UI 时。
• evidence-and-reference - 涉及外部页面、截图或用户提供的参考资料时。
• image-to-prototype - 需要重建用户提供的 UI 图片或截图时。
• interface-review - 仅用于用户明确要求的界面审查。
• component-stress-test - 仅用于用户明确要求的压力测试。
• variant-exploration - 仅用于用户明确要求的设计变体。
• prototype-to-codebase - 仅用于用户明确要求的代码库交接。

仅当触发条件符合时，才使用 <prefix> guide get --topic <topic> --raw 获取可选指南。实质性的视觉设计开始之前，应获取 design-quality；但非视觉维护、画布定位、仅导出操作、清单检查和范围狭窄的修复可跳过此步骤。不要根据推断获取用户限定的指南。

操作不变量

• 进行视觉 UI 工作前，运行 <prefix> design context --pretty 和 <prefix> token list。存在时，将 DESIGN.md 指南、已注册组件和 运行时令牌视为约束。若这些内容不存在，则将探索性值限定在当前页面内。
• 有可用的已注册组件时，优先复用。仅当用户明确提出要求或要求提取可复用内容时，才创建或注册组件； 否则将实现限定在当前页面内。
• 一次只处理一个页面。页面创建命令只创建骨架和 Canvas 画布。每次初始文件编辑只添加一个视觉或工作流分组，并且绝不并行运行页面变更命令。
• 仅在用户选定方向或明确要求保存时，才创建或更改持久化令牌。
• 保留稳定的 data-node-id、data-component、data-part、data-action、 桥接属性和公开 props。可复用值优先使用现有令牌，避免硬编码。
• 直接使用 <iconify-icon icon="collection:name">，不要添加加载器或包装元素。纯图标控件需提供 aria-label，装饰性图标需标记为 aria-hidden="true"。
• 完成页面后，运行 <prefix> preview verify --page <page-id>，修复适用的诊断问题，必要时再次验证，执行 workspace-authoring 要求的渲染检查，然后运行 <prefix> work finish --page <page-id>。

优先使用原生命令

不要手写内联 JSON。常规工作请使用原生标志；CLI 会构建并验证操作载荷，并自动读取最新修订版。 对于 page create，传入不带前导斜杠的路由，例如 --route activity；CLI 会补上斜杠。此形式可避免 Windows 上的 Git Bash/MSYS 路径转换。页面需要指定 Canvas 视口时，请同时传入 --width <320-3840> 和 --height <320-2160>。省略这两个标志时使用 默认的 1440x960 视口；切勿只传一个尺寸。

<prefix> page create --id activity --name "Activity" --route activity --layout app-shell --width 1440 --height 900
<prefix> design context --detail compact --section Overview,Components --pretty
<prefix> token list --type color,spacing --format css
<prefix> token create --name --color-accent --type color --value "#635bff"
<prefix> token set --name --color-accent --value "#574ee8"
<prefix> token delete --name --color-legacy
<prefix> design set-section --heading Overview --content-file overview.md
<prefix> component create --id status-pill --tag x-status-pill --prop tone="Visual tone" --default tone=neutral
<prefix> review get --review <uuid> --output review.png
<prefix> work status --pretty
<prefix> preview verify --page <page-id>
<prefix> work finish --page <page-id>

对于较长的 HTML、CSS、JavaScript 或 Markdown，请通过 stdin 传入原始文本。仅将简短且适用于 shell 的 --before、--after 或 --replace 值用作唯一锚点。要进行精确的多行替换，请将标准 unified diff 通过管道传入 dpai file patch --path <path>；一个 diff 可以包含多个相关区块，并以原子方式应用。这是默认的 Agent 工作流，无需创建临时的新旧文件。

仅在 shell 无法准确保留载荷、产物有助于调试，或 Windows PowerShell 5.1 可能破坏非 ASCII stdin 时，才使用 --content-file、--replace-file 或 --patch-file。这些文件必须使用 UTF-8。

需要使用备用文件时，解析 Git 仓库根目录，并仅将文件放在 <git-root>/.desainpakeai/tmp/<task-slug>/ 中，使用描述性名称。写入第一个文件前，请确保根目录 .gitignore 包含精确的根相对条目 /.desainpakeai/tmp/；若缺少，则仅追加这一行，并保留文件其余内容。如果当前目录不在 Git 仓库中，请使用 <cwd>/.desainpakeai/tmp/<task-slug>/，不要仅为此创建 .gitignore。绝不要将临时输入文件放在原型源文件旁边。使用文件的命令成功后，立即删除备用文件。如果命令失败，仅在恢复期间保留文件，之后删除。运行 work finish 或交接前，请确认任务专用临时目录已不存在；工作完成后绝不要遗留仅用于该任务的文件。

按章节显示页面进度

对于新页面，使用每个章节的两条顺序命令，展示真实的 Canvas 进度。首先，只插入一个可见的章节外壳，并将其置于 之前。为其设置最终的语义元素、稳定的 `data-node-id`、外层行内布局或表面、足以渲染的块大小，以及唯一的嵌套 锚点。然后在该章节的嵌套锚点之前插入其内容，并保留该锚点供后续局部编辑使用。

完成一个章节后再创建下一个章节，沿用每条命令返回的修订版本，绝不要并行执行页面修改。每次成功的编辑都会被保存，并成为 Canvas 进度更新。除非某次修改报告了问题，否则只有在页面完成后才运行 preview verify。

重复使用列表标志，或传入逗号分隔的值。仅在需要混合编辑模式的原子批处理、多令牌原子批处理、组件配方、完整的遗漏项列表或低级集成调试时，才使用 --input @payload.json。以编程方式生成该文件，绝不要在 Shell 中内联编写 JSON。

所有 DesainPakeAI 操作都必须通过 <prefix> 执行，并根据命令输出进行验证、确认完成、处理修订冲突和恢复。