# deepseek-design

> Adds a visual Design view to DeepSeek Harness for generating and refining website and app prototypes, posters, info cards, and other non-slide works directly within conversations. Includes 29 curated templates.

## Metadata

- Author: [@Devin-AXIS](https://github.com/Devin-AXIS)
- Repo: <https://github.com/Devin-AXIS/deepseek-design.git>
- GitHub: [Devin-AXIS/deepseek-design](https://github.com/Devin-AXIS/deepseek-design)
- Stars: 195
- Language: JavaScript
- License: [NOASSERTION](https://spdx.org/licenses/NOASSERTION.html)
- Homepage: <https://github.com/Devin-AXIS/iPolloWork>
- Topics: `ai-design`, `deepseek`, `deepseek-harness`, `design`, `design-studio`, `dsh-plugin`, `ipollowork`, `ipollowork-plugin`, `plugin`, `ppt`, `presentation`, `prototyping`, `visual-editor`
- Forks: 67
- Open Issues: 2
- Last push: 2026-08-18T09:54:38.000Z
- Added: 2026-08-20T00:00:00.000Z

## Install

```bash
dsh plugin --profile web add github:Devin-AXIS/deepseek-design/packages/deepseek-idesign
```

## Wiki

## 一句话定位
deepseek-idesign 是 iPolloWork 为 DeepSeek Harness 推出的 Design 视图插件，把 iPolloWork Design Studio 作为 Harness 对话里的原生 Design 视图，AI 在工作区里生成和修改真实 HTML/CSS 项目文件，你也能在画布里选中元素精调文字、字体、颜色、间距和图片。

## 核心能力
- 在 Harness 对话中多出 **Design** 视图（label `Design`，与 PPT 视图并存），在该视图里预览与编辑
- AI 在对话中直接生成或大范围修改设计，并支持选区级 **Ask AI**（选中元素后填好草稿，由用户发送）
- 29 个非幻灯片精选模板，覆盖 site / app / article / poster / cards / report / other 7 大类
- 画布内直接编辑文字、排版、颜色、尺寸、间距、背景、链接与图片，并支持桌面和移动端预览
- 共享 iPolloWork 设计令牌系统：通过 `design-tokens.css` 统一管理颜色、字体、背景、圆角、阴影、间距
- 保存带 `baseUpdatedAt` 冲突检测 + 原子替换，模板应用先在隔离目录校验再原子替换，失败时恢复旧项目

## 技术实现
- **语言**: TypeScript（子包 `type: module`，主源码在 `source/plugins/deepseek-idesign/src/`，构建产物在 `packages/deepseek-idesign/lib/`）；Studio 端用 React 18 + Vite 6 + Tailwind CSS v4
- **关键依赖**: `@deepseek-ai/cordis`、`@deepseek-ai/dsh-host-webserver`、`@deepseek-ai/dsh-workspace`、`@deepseek-ai/dsh-client-runtime`、`@deepseek-ai/dsh-client-ui-conversation`、`react` 18.2（全部为可选 peer dependency）；运行期只用 Node 内置 `node:crypto` / `node:fs` / `node:fs/promises` / `node:path` / `node:url`
- **架构模式**: DSH 适配器插件 —— `cordis.patch.yml` 向宿主插入 Cordis 插件 `id: ipollowork-design-studio`；`client.tsx` 用 `ctx.slots.inject("conversation.view")` 把 `Design` 视图组件挂到 Harness 对话里；`index.ts` 用 `ctx.webServer.register({ kind: "prefix", path: "/ipollowork-design" })` 把 Studio 静态资源和 `/ipollowork-design/api/*` 接口挂到 Harness 内置 Web 服务器
- **入口文件**: `source/plugins/deepseek-idesign/src/index.ts`（服务端，调用 `createDeepSeekDesignStudioPlugin` 工厂传 `mode: "design"`、`routeRoot: "/ipollowork-design"`、`studioTitle: "DeepSeek iDesign"`、`defaultTemplateId: "ipollowork.deepseek-harness.design"`），客户端入口 `source/plugins/deepseek-idesign/src/client.tsx`，编译后分别是 `packages/deepseek-idesign/lib/index.js` 与 `packages/deepseek-idesign/lib/client.js`

## 适用场景
希望直接在 Harness 对话里产出网站、App 原型、海报、信息卡、数据报告或杂志视觉作品的非技术用户，痛点是：以前只能在对话里得到一次性图片或截图，无法继续精调单个元素。本插件把可编辑的 HTML/CSS 项目留在工作区，并允许画布直接编辑与选区级 AI 修改交替进行。Design 项目落在 `design/<sessionId>/`，与 PPT 视图的 `design/<sessionId>-ippt/` 互不覆盖，可以只装这一份，也可以与 deepseek-ippt 同时安装。

## 前置依赖与兼容性
| 依赖 | 最低版本 | 说明 |
|---|---|---|
| DSH | `>=0.0.1-rc.1` 且 `<0.2.0-0`，开发期锁定 `0.1.0-rc.6` | `package.json#peerDependencies` 声明 `@deepseek-ai/dsh-host-webserver`、`@deepseek-ai/dsh-client-runtime`、`@deepseek-ai/dsh-client-ui-conversation`、`@deepseek-ai/dsh-workspace` 需要该区间（package.json:52-57），开发依赖实际锁定 `0.1.0-rc.6`（package.json:80-83） |
| Node.js | `^22.19.0` 或 `>=24.0.0` | 子包 `package.json` 没有 `engines` 字段；沿用父仓库 README.md:74 声明；`@types/node` devDep 锁到 `25.6.0`（package.json:85） |
| React | `^18.2.0` | 由 Harness 宿主提供，列在 peerDependencies（package.json:56） |
| 平台 | 跨平台（macOS / Windows / Linux） | `package.json` 没有 `os`/`cpu` 限制；客户端用 iframe + `sandbox` 属性隔离（lib/client.js:103） |
| 原生模块 | 无 | 运行时只使用 Node 内置模块（lib/index.js:1-5），安装不会拉 sharp/onnxruntime-node 等预编译二进制 |
| 浏览器运行时 | Chromium（由 Harness 宿主提供） | Studio 是浏览器内运行的 React/Vite 应用（packages/deepseek-idesign/studio/dist/），插件不自带浏览器二进制 |

## 安装方式
```bash
dsh plugin --profile web add github:Devin-AXIS/deepseek-design/packages/deepseek-idesign
```

## 配置项
| 配置 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| 本插件无需额外配置 | — | `cordis.patch.yml` 不读任何字段；`createDeepSeekDesignStudioPlugin` 只在编译期接收 `mode/routeRoot/studioTitle/defaultTemplateId/projectSuffix` 等构造参数（已硬编码为 `design` / `/ipollowork-design` / `DeepSeek iDesign` / `ipollowork.deepseek-harness.design` / 无后缀）。运行期所有交互（工作区 ID、会话 ID、模板 ID、选区上下文）通过 URL 查询参数和 PostMessage 在 Studio 与 Harness 之间传递 | — |

## 常见问题

**Q: 这个插件和 deepseek-design 仓库是什么关系？**

A: 它是 deepseek-design 套件里的 Design（iDesign）那一支，`packages/deepseek-idesign/` 是独立发布的 npm 包（package.json 的 name 为 `deepseek-idesign`），只携带 Design 视图所需的浏览器资源；不会拉 iPolloWork 桌面端，也不会附带 PPT（`deepseek-ippt`）和 Video（`deepseek-ivideo`）这两个独立插件。

**Q: 装了它会不会顺便下载 iPolloWork 桌面端或 PPT、Video？**

A: 不会。npm 包自带 Studio 浏览器资源（`packages/deepseek-idesign/lib/client.js`、`packages/deepseek-idesign/studio/dist/`），既不下载 iPolloWork 桌面应用，也不加载 iPPT 或 iVideo；安装命令只拉这一份插件。

**Q: 作品真实文件落在哪里，能继续手动编辑吗？**

A: 落在 Harness 工作区的 `design/<sessionId>/` 下，是真实的 `index.html`、`design-tokens.css`、`manifest.json`、`brief.json` 等文件，不是云端封闭画布；你可以用任意编辑器改这些文件，也可以让 AI 通过对话继续修改。插件的 API 路径前缀强制只接受 `design/` 路径（lib/index.js:75-77 / 4046），其他目录不会被读取或写入。

**Q: 自带了哪些模板？**

A: 29 个非幻灯片精选模板，覆盖 7 个分类：site（5 个，如 Afterglow Festival、Orbit Data Cloud）、app（3 个，如 Calm Mobile App、Finance Dashboard）、article（5 个，含中文公众号长图）、poster（3 个）、cards（4 个，如 Twitter Share Card、Spotify Now-Playing Card）、report（4 个，如 Data Visualization Report、Experiment Readout）、other（5 个）。其中 `ipollowork.wechat-article` 锁定了页头 / 页尾品牌资产，编辑时只允许替换中间正文图片与外层 CTA 链接。

**Q: 安装命令是什么？**

A: `dsh plugin --profile web add github:Devin-AXIS/deepseek-design/packages/deepseek-idesign`，装完在项目目录里跑 `dsh web` 启动 Harness Web 界面，默认 http://127.0.0.1:3080，新建对话后选 Design 视图即可。

**Q: Ask AI 会自动发出消息吗？**

A: 不会。Ask AI 只把"目标元素 + 文件路径 + CSS 定位 + 当前样式（文字 / alt / src 截断到 240 字）"组装成一段草稿填进当前对话，必须由用户点发送才会提交，插件也不会自动执行任何工具调用。

**Q: 保存会覆盖我的手工编辑吗？**

A: 不会。文本写入带 `baseUpdatedAt` 冲突检查——文件自上次读取后被外部改动时返回 409 让用户先刷新再保存；写入采用临时文件 + `rename` 的原子替换，避免半写状态。模板应用也是先在隔离目录校验再原子替换，失败时恢复旧项目。

**Q: Design 视图能不能和 PPT 视图同时用？**

A: 可以。两个视图独立注册（`viewId: "ipollowork-design-studio"` vs `ipollowork-ppt-studio`），且项目目录分别为 `design/<sessionId>/` 与 `design/<sessionId>-ippt/`，互不覆盖；同时安装 `deepseek-idesign` 与 `deepseek-ippt` 即可。

## 上手难度
入门 — 在新对话里点 Design 视图即开用，常见路径是"AI 生成初稿 → 在 Studio 精调或 Ask AI 改元素 → 保存到工作区 → 继续迭代"；想榨干选区上下文、设计令牌、manifest schema 则需要再读 iPolloWork 主仓库与子包 README。

## 已知问题与限制
- **DSH 仍处开发者预览**：Harness 主版本号与插件 peer 范围（`>=0.0.1-rc.1 <0.2.0-0`）较宽，DSH 升级到下一个主版本时本插件需要重新验证（README.md:76-77）
- **路径写入有强约束**：写入路径必须落在工作区 `design/` 前缀内，符号链接不能逃逸工作区，相对路径里含 `..` 或绝对路径会返回 400/403；这意味着"跨工作区移动项目"会被原样拒绝（lib/index.js:3889-3917）
- **生成产物不可在 `packages/` 直接改**：仓库采用 iPolloWork 上游同步模型，`packages/` 是构建产物，应改 `source/plugins/deepseek-idesign/` 并提交 PR，由上游合并后同步回来（source/README.md:1-7）
- **每进程 Studio token 不可跨进程复用**：进程级随机 base64url token 失效后所有 API 请求会 401，重启 Harness 即可（lib/index.js:4167、3899-3901）
- **公众号模板锁定资产不可编辑**：`ipollowork.wechat-article` 模板的页头 / 页尾 JPG 资产与 `:root` 颜色被 `applyChecklist` 强制锁定，只允许替换中间正文图片与外层 CTA 链接，违反规则的 AI 修改会被 manifest 拒绝（lib/templates/ipollowork.wechat-article/manifest.json:32-39）
- **iPPT/iVideo 复用同一 token 协议**：本插件的服务端用 `x-ipollowork-design-token` 头校验 Studio iframe；同进程内的 iPPT / iVideo 复用同一套 host channel 和 token 协议，互不冲突但也不各自独立密钥（lib/index.js:3899-3901、source/shared/design-studio/src/bridge.ts:3-16）

---

This document is auto-generated by [deepseek-plugin.org](https://deepseek-plugin.org). HTML page: [deepseek-design](https://deepseek-plugin.org/plugins/Devin-AXIS/deepseek-design/packages/deepseek-idesign)
Wiki generated by AI (model: `MiniMax-M3`)