# dev-process-kit 中文文档

规范地址：https://npmcn.com/package/dev-process-kit/

版本：0\.3\.3
npm 元数据更新时间：2026-11-03T10:53:11.424Z
中文译文更新时间：2026-11-03T11:51:32.490Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/dev-process-kit
原文对照：https://npmcn.com/package/dev-process-kit/?lang=original
项目主页：https://github.com/d-kimuson/dev-process-kit#readme
源码仓库：https://github.com/d-kimuson/dev-process-kit

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.7 MB，34 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=24
- 运行依赖：0 个
- 首次发布：2026-09-23T20:17:27.602Z
- 最新版本发布：2026-11-03T10:53:10.990Z
- 已发布版本数：31（近 12 个月 31 个）

## 中文简介

人类在浏览器中审查的单文件HTML页面的Web组件，并将结构化的草稿/反馈循环返回给代理。

## 安装

```sh
npm install dev-process-kit
```

也可以使用：`pnpm add dev-process-kit`、`yarn add dev-process-kit`、`bun add dev-process-kit`

## README

# dev-process-kit

[![npm](https://img.shields.io/npm/v/dev-process-kit?logo=npm&label=npm)](https://www.npmjs.com/package/dev-process-kit) [![npm beta](https://img.shields.io/npm/v/dev-process-kit/beta?logo=npm&label=beta&color=orange)](https://www.npmjs.com/package/dev-process-kit?activeTab=versions) [![jsDelivr](https://img.shields.io/jsdelivr/npm/hm/dev-process-kit?logo=jsdelivr&label=jsDelivr)](https://www.jsdelivr.com/package/npm/dev-process-kit) [![CI](https://img.shields.io/github/actions/workflow/status/d-kimuson/dev-process-kit/ci.yml?branch=main&logo=github&label=CI)](https://github.com/d-kimuson/dev-process-kit/actions/workflows/ci.yml) [![Landing site](https://img.shields.io/github/actions/workflow/status/d-kimuson/dev-process-kit/pages.yml?branch=main&logo=githubpages&label=landing%20site)](https://d-kimuson.github.io/dev-process-kit/) [![License: MIT](https://img.shields.io/npm/l/dev-process-kit?color=blue)](https://npmcn.com/package/dev-process-kit/LICENSE)  
[![Web Components](https://img.shields.io/badge/Web_Components-no_build-29abe2?logo=webcomponentsdotorg&logoColor=white)](https://npmcn.com/package/dev-process-kit/docs/index.md) [![Agent skill](https://img.shields.io/badge/agent_skill-dev--process--kit-d97757?logo=anthropic&logoColor=white)](https://npmcn.com/package/dev-process-kit/skills/dev-process-kit/SKILL.md) [![Claude Code plugin](https://img.shields.io/badge/Claude_Code-plugin-d97757?logo=claude&logoColor=white)](https://npmcn.com/package/dev-process-kit/#readme-install-the-skill)

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

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

## 你得到了什么

### 一页的设计系统

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

### 视图：整个页面

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

| 视图 | 元素 | 它是什么？ |
| --- | --- | --- |
| 用户故事映射 | `dpk-view-usm` | 范围、步骤、故事和发布在一张地图上；里程碑，依赖关系，标签和燃尽 |
| 用户体验原型 | `dpk-view-prototype` | 屏幕流程和每个步骤的样子：活动、故事、步骤、屏幕和预览 |
| 幻灯片 | `dpk-view-slides` | 一次翻页一张幻灯片的甲板 |
| 任务背景 | `dpk-view-task-board` | 设计文档及其下的任务：标记设计文档，待办事项、建议、输出和问题的看板 |
| 代表团扑克 | `dpk-view-delegation-poker` | 管理3.0授权扑克：每个决策领域七个级别，每行确定一个商定级别 |
| 平原 | `dpk-view-plain` | 一个没有自己的域的标题页面：您的标记和评论，因为没有其他视图适合 |

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

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

| 董事会 | 元素 | 它是什么？ |
| --- | --- | --- |
| ER图 | `dpk-board-er-diagram` | 两个模式快照之间发生了什么变化 |
| 状态图 | `dpk-board-state-diagram` | 哪些状态存在，哪些状态在它们之间移动 |
| 序列图 | `dpk-board-sequence-diagram` | 参与者说话的顺序 |
| 依赖关系图 | `dpk-board-dependency-graph` | 什么取决于什么，什么是循环的 |
| 架构图 | `dpk-board-architecture-map` | 哪些服务存在，在哪个边界 |
| 思维导图 | `dpk-board-mind-map` | 一个中心主题和它的子主题，从左到右呈扇形分布，有折叠 |
| 事件风暴 | `dpk-board-event-storming` | 按时间顺序贴在泳道上的便利贴，上面有因果关系 |
| 例子的映射 | `dpk-board-example-mapping` | 一栏一个故事，下面是规则，每条规则下面是例子，每条规则下面都有问题 |
| 白板 | `dpk-board-whiteboard` | 便签，文本，形状和标题框架在一个可平移，可缩放的画布上，由标签连接器连接 |
| 看板 | `dpk-board-kanban` | 有在制品限制的卡片列；审阅者移动和添加卡片作为草稿操作 |

### 组件

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

## 回顾循环

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

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

## 的形状

```html
<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`。

| 条目 | 使用它 |
| --- | --- |
| `views/usm.js` / `views/prototype.js` / `views/plain.js` / `views/slides.js` / `views/task-board.js` / `views/delegation-poker.js` | 页面就是那个视图 |
| `boards.js` | 该页面使用一个板，嵌入或作为其内容 |
| `components.js` | 该页使用没有视图的组件 |
| `index.js` | 一个URL |

```html
<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/`](https://npmcn.com/package/dev-process-kit/docs/index.md)。

## 用法

dev-process-kit是为代理使用而构建的：llm的指令是 [`dev-process-kit` 技能](https://npmcn.com/package/dev-process-kit/skills/dev-process-kit/SKILL.md)． 它被发布到npm [`dev-process-kit`](https://www.npmjs.com/package/dev-process-kit)，一个页面从jsdeliver加载它 与版本固定，每个版本的文档是 [`docs/`](https://npmcn.com/package/dev-process-kit/docs/index.md) 在其 `v<version>` 标签。

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

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

```markdown
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](https://npmcn.com/package/dev-process-kit/docs/claude-artifact.md) 告诉代理何时发布这样的页面和 怎么写；只要能够发布工件，技能就会将代理发送到那里。

### 安装技能

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

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

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

## 为什么dev-process-kit ?

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

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

```mermaid
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图等等——以及 设计系统，使网页构建的感觉就像一个产品。

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

## 许可证

麻省理工学院

## 常见问题

### dev-process-kit 是什么？

人类在浏览器中审查的单文件HTML页面的Web组件，并将结构化的草稿/反馈循环返回给代理。

### 如何安装 dev-process-kit？

在项目目录运行 npm install dev-process-kit，或使用 pnpm add / yarn add / bun add。

### dev-process-kit 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/dev-process-kit 是否存在。

### dev-process-kit 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### dev-process-kit 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=24。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### dev-process-kit 可以商用吗？

dev-process-kit 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### dev-process-kit 还在维护吗？

最新版本 0\.3\.3 发布于 2026/11/03（今天）；至今共发布 31 个版本，其中过去 12 个月发布了 31 个；首次发布于 2026/09/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。