dev-process-kit

一个单页的设计系统，用于代理编写和人工审阅文档。

代理生成一个HTML文件；一个人打开它，阅读它，并留下评论为 结构化的变更请求；代理应用它们并重写相同的文件。dev-process-kit 发送shell，查看循环，以及组成页面的部分——符号，CSS原子， 组件，视图和板-作为Web组件，没有构建步骤。

你得到了什么

一页的设计系统

• 令牌和CSS原子 对于组成页面的东西：布局(堆栈，集群，网格， 工具栏)、控件（按钮、字段、菜单、分段控件、选择、组合框）、表面 （卡片、标注、表格、数据表）和数据显示（时间线、状态、图表、仪表）。
• 组件 组成它们的是：回顾、内联编辑、表格和矩阵、检查清单、 选项卡，对话框，标签过滤器，可注释部分，mock。
• 一个一致的外观光明和黑暗，来自同样的符号。你自己的页面CSS仍然胜出。
• 没有建立。 一个 <script type="module"> 元素都在那里。

视图：整个页面

一个 视图 拥有整个页面，不能嵌入。选一个主题和你一样的 需要与读者意见一致。

板：嵌入一个，或使其成为页面

一个 董事会 是一个自包含的视觉表面。它可以嵌入到视图中 一页的内容这是一种元素的两种用法，而不是两种元素。

组件

组件是您在视图、板或您自己的标记中组合的部分。它们永远填不满 一个单独的页面：回顾栏(dpk-comment-panel)、内联编辑(dpk-inline-edit)， 正式规格(dpk-formal-spec)、表格及矩阵(dpk-table， dpk-matrix)，选取及 组合框(dpk-select， dpk-combobox)、检查表、选项卡、对话框、标签过滤器、可注释 部分和评论弹出窗口/线程，mock和CSS原子。每个都有一页 docs/components/ 和 docs/boards/。

回顾循环

页面不是一幅图画：读者在操作它，而这些操作就是评论。

• 草案的行动。 移动卡片、重命名步骤、添加待办事项或更改关系 记录为一个结构化的动作。页永远不会改变它自己的基数据；代理申请 执行操作并编写下一个版本的HTML。
• 评论。 读者对整页文章进行评论(app:app)，在视图元素上，或者 在棋盘的节点、域或边上。对已经消失的东西的评论留在草稿中 陈腐而不是消失。
• 每份文件一份草稿。 一个有几个板的页面——作用域、域、屏幕——有一个 标题，一份评论，一份草稿和一份简报。
• 问，不要只是展示。 任何一页都可以有问题(data-dpk-grill)供读者阅读 答案;它们是shell的核心功能，而不是自己的视图。
• 传球给队友。 复制更改和注释 将可读标记加上规范的JSON草案 在剪贴板上。在克劳德的作品中，它变成了 寄给克劳德，一键返回 发布该页的会话。

的形状

<dpk-app storage-key="checkout-review">
  <script type="application/json">
    { "title": "Checkout review" }
  </script>

  <dpk-page name="scope" label="Scope">
    <dpk-view-usm>
      <script type="application/json">
        { ...base data... }
      </script>
    </dpk-view-usm>
  </dpk-page>

  <dpk-page name="domain" label="Domain">
    <dpk-board-event-storming>
      <script type="application/json">
        { ...base data... }
      </script>
    </dpk-board-event-storming>
  </dpk-page>

  <dpk-page name="notes" label="Notes">
    <dpk-view-plain>
      <script type="application/json">
        { "sections": [{ "id": "decision", "title": "Decision" }] }
      </script>
      <section slot="main" data-dpk-target="section:decision">...</section>
    </dpk-view-plain>
  </dpk-page>
</dpk-app>

• <dpk-app> -每个HTML文件一个。标题，审查，一份草稿，一份存储记录， 散列和撤销/重做。
• <dpk-page name="…"> -一个可切换的主题。它只持有一个视图或板。
• 风景或板 -页面的内容。嵌入视图内的板；直接板 页面内部是页面本身。
• 组件 -在内容或您自己的标记内。

标签是公共契约；这是一个实现细节。目标是 type:id@page （story:checkout.pay@scope)，哈希值为 #page=scope&scope.activity=signup，和 文档范围的目标是 app:app． 没有与旧别名兼容的别名 template-and-board标签。

加载它

从jsdeliver加载一个条目，并固定版本。一个页面必须在新的时候保持工作 版本已发布，因此永远不要针对浮动URL生成HTML，例如 @latest。

<script type="module" src="https://cdn.jsdelivr.net/npm/dev-process-kit@<version>/dist/views/usm.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/dev-process-kit@<version>/dist/boards.js"></script>

视图条目注册视图， <dpk-app>， <dpk-page>，审查轨道和内联编辑。 添加 boards.js 当页面使用板时，和 components.js 当它使用组件时，视图 不能携带。完整的契约，槽，页面高度和每个视图的基本数据的形状是 在 docs/。

用法

dev-process-kit是为代理使用而构建的：llm的指令是 dev-process-kit 技能． 它被发布到npm dev-process-kit，一个页面从jsdeliver加载它 与版本固定，每个版本的文档是 docs/ 在其 v<version> 标签。

的着陆点 main 是现场直播 https://d-kimuson.github.io/dev-process-kit/。

最简单的方法就是把技能交给代理，告诉他们你想要什么：

Create a USM for this product.
Follow https://raw.githubusercontent.com/d-kimuson/dev-process-kit/main/skills/dev-process-kit/SKILL.md.

克劳德的工件

Claude Code可以将该页作为Claude Artifact而不是本地文件发布，并且 Dev-process-kit将其作为一级目标支持：

• 一键式传球给队友。 与 comments 和 db 能力声明，审查轨道 提供了 寄给克劳德 代替了复制。审查在Claude Code会话中到达 发布该页面的程序应用该页面并将其重新发布到相同的URL。
• 适合观众。 这一页跟着读者的思路走。一个明亮/黑暗的主题和大小本身 到观众的框架。
• 无需配置。 页面在运行时检测工件；在外一人，或当一送 不能着陆，拷贝交接就保持原样。

文档/ claude-artifact.md 告诉代理何时发布这样的页面和 怎么写；只要能够发布工件，技能就会将代理发送到那里。

安装技能

这个 dev-process-kit 代理技能告诉代理何时到达页面以及如何保持它 专注。

# Any agent supported by the skills CLI
npx skills add d-kimuson/dev-process-kit

# Claude Code
/plugin marketplace add d-kimuson/dev-process-kit
/plugin install dev-process-kit@dev-process-kit

为什么dev-process-kit ?

既然人工智能编写代码，瓶颈已经转移到人类方面：认知负荷 阅读，检查并同意所构建的内容。Dev-process-kit支持这种人类环境 工程。

它通过一个一致的循环来完成：

flowchart LR
  ask["① Human asks the agent"] --> present["② Agent presents the context and what<br/>it understood, in a form a human<br/>reads at a glance"]
  present --> review["③ Human reviews it and feeds<br/>back the gaps and the details"]
  review -->|"draft actions + brief"| present

这就是为什么套件会提供视图、电路板和组件，这些都证明了它们适合建造 人类工程师之间共享的理解——用户故事映射、ER图等等——以及 设计系统，使网页构建的感觉就像一个产品。

③比显示图片更进一步：在视图允许的地方，可以直接操作页面 在浏览器中，这些操作被收集为日志并交给代理，代理 重写页面本身。

许可证

麻省理工学院