# design-contextgo 中文文档

规范地址：https://npmcn.com/package/design-contextgo/

版本：6\.1\.1
npm 元数据更新时间：2026-11-03T09:51:08.193Z
中文译文更新时间：2026-11-03T11:46:40.413Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/design-contextgo
原文对照：https://npmcn.com/package/design-contextgo/?lang=original
项目主页：https://github.com/Gusgoooo/Design-anchor#readme
源码仓库：https://github.com/Gusgoooo/Design-anchor

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

- 包体积（解压后）：1.2 MB，212 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.19\.0
- 运行依赖：40 个
- peer 依赖：react \>=18 \<20，react-dom \>=18 \<20
- 首次发布：2026-10-26T02:05:55.380Z
- 最新版本发布：2026-11-03T09:51:07.991Z
- 已发布版本数：4（近 12 个月 4 个）

## 中文简介

Design ContextGo：为你的真实React组件组织、拖动、预览和编辑参数。支持v6和Tailwind。

## 安装

```sh
npm install design-contextgo
```

也可以使用：`pnpm add design-contextgo`、`yarn add design-contextgo`、`bun add design-contextgo`

## README

# Design ContextGo

npm 包名为 `design-contextgo`，主命令为 `contextgo`，同时提供 `design-contextgo` 命令。

6.1 原生提供只读的 `contextgo preflight` / `contextgo govern` 与严格 `contextgo gate`。配置项目主题真源和 governance.checks，即可检查 token、shadcn 组件约定、真实示例并依次执行测试和构建，见[设计治理](https://npmcn.com/package/design-contextgo/docs/DESIGN_GOVERNANCE.md)。工具仓库自身也已接入真实组件与规范文档；自身目录不作为预装组件分发。

Design ContextGo 是项目自己的组件工作台。沿用原来的界面和交互，直接读取真实组件与示例，自由拖拽整理目录，在画布中预览、调参、查看文档与源码，再进入实际项目验证。

在项目中安装开发依赖：

```sh
npm install -D --save-exact design-contextgo@6.1.1
npx design-contextgo workbench --port 6006
```

在项目中添加 `contextgo.config.ts`：

```ts
import { defineWorkbench } from 'design-contextgo/config'

export default defineWorkbench({
  id: 'my-project',
  stories: ['src/**/*.stories.tsx', 'src/**/*.demo.tsx'],
  preview: 'src/stories/preview.tsx',
  appUrl: 'http://localhost:7789',
})
```

-   一个组件入口，以项目组件为主体，Antd 补充适用变体。组件文档、AI Spec、Token 映射统一归属；跨组件指南放在「文档」。
-   组件目录来自项目文件，没有预装组件，也不会向项目复制一套基础组件。
-   自建分组、拖拽移动和排序、菜单移动、搜索、导入导出，按项目自动保存。
-   画布提供视口、缩放、重载、全屏和可调整的参数面板。参数支持草稿、应用、撤销、重置；不会自动写源码。
-   文档保留全部示例和状态，源码读取实际示例文件，事件面板记录组件动作。
-   工具 UI 使用 Design ContextGo 原来的 Tailwind 组件和 token。预览使用消费项目自己的 Antd v6、Tailwind 或其他 React 组件及主题。
-   `design-contextgo/preview` / `design-contextgo/testing` 兼容已有 CSF 示例。Storybook 仅作为预览与 Autodocs 执行适配器；不运行完整管理界面。

```sh
npx design-contextgo build --out-dir contextgo-static
```

生成可部署的静态工作台，支持放在站点子目录。运行命令不会自动打开浏览器或安装业务组件。Design Token 一级页面复用 Antd 官方编辑器，与参数面板同步；只有点击“保存到项目”才写回已配置的 token 源文件。

[发布准备](https://npmcn.com/package/design-contextgo/docs/RELEASE.md) · [详细接入与边界](https://npmcn.com/package/design-contextgo/docs/WORKBENCH.md) · [仓库设计治理](https://npmcn.com/package/design-contextgo/docs/DESIGN_GOVERNANCE.md) · [English](https://npmcn.com/package/design-contextgo/README.md)

## 常见问题

### design-contextgo 是什么？

Design ContextGo：为你的真实React组件组织、拖动、预览和编辑参数。支持v6和Tailwind。

### 如何安装 design-contextgo？

在项目目录运行 npm install design-contextgo，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18 \<20）、react-dom（\>=18 \<20）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 contextgo、design-contextgo，可以用 npx contextgo 直接运行。

### design-contextgo 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### design-contextgo 支持 ESM 还是 CommonJS？

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

### design-contextgo 需要什么版本的 Node\.js？

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

### design-contextgo 可以商用吗？

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

### design-contextgo 还在维护吗？

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