@deppon/deppon-prd-mcp 0.1.2 → 2.5.11

package/README.md

@@ -6,7 +6,7 @@
 
 1. **Web 控制台**（`http://127.0.0.1:3847`）：填写 PRD 要素（标题、背景、筛选字段、列表列等）→ 生成标准化 `prd.md`
 2. **原型生成**：根据同一套配置生成 Tailwind 高保真 `prototype.html`（含 PRD § 标注弹框）
-3. **在线动态调整**：原型 iframe 支持 `?edit=1` 直接改标题等文案；Studio 侧可改工具栏/行操作并实时预览
+3. **在线动态调整（类墨刀）**：设计模式 `?design=1` 下可 **拖拽** 区块/筛选项/列表列/工具栏按钮排序，改文案，移除不合适项，保存后写入 `project.config.json` 并同步 PRD
 4. **MCP 工具**：供 Cursor Agent 调用 `generate_prd`、`generate_prototype`、`open_prd_studio` 等
 
 ## 安装（消费方）
@@ -28,20 +28,27 @@ npx @deppon/deppon-prd-mcp
 
 浏览器打开 Web 控制台：**http://127.0.0.1:3847**
 
+### 设计模式（拖拽调整布局）
+
+1. Web Studio → **③ 原型编辑** → 点 **🎨 设计模式（拖拽）**
+2. 或直接在原型 URL 加 `?design=1`
+3. 拖拽 **⠿** 手柄调整：筛选区/列表区块顺序、筛选项、表头列、工具栏按钮
+4. 点击 **保存布局** → 写入 `project.config.json`，并重新生成 `prd.md` + `prototype.html`
+
 ## Cursor / Claude Desktop MCP 配置
 
 ```json
 {
-  "mcpServers": {
-    "deppon-prd": {
-      "command": "npx",
-      "args": ["-y", "@deppon/deppon-prd-mcp@latest"],
-      "env": {
-        "DEPPON_PRD_WORKSPACE": "/绝对路径/到你的项目根目录",
-        "DEPPON_PRD_HTTP_PORT": "3847"
-      }
+    "mcpServers": {
+        "deppon-prd": {
+            "command": "npx",
+            "args": ["-y", "@deppon/deppon-prd-mcp@latest"],
+            "env": {
+                "DEPPON_PRD_WORKSPACE": "/绝对路径/到你的项目根目录",
+                "DEPPON_PRD_HTTP_PORT": "3847"
+            }
+        }
     }
-  }
 }
 ```
 
@@ -58,9 +65,20 @@ npm run publish:registry      # MCP 官方 Registry（需先 mcp-publisher login
 
 ### MCP 官方 Registry
 
-1. 安装 CLI：`brew install mcp-publisher` 或见 [MCP Registry Quickstart](https://modelcontextprotocol.io/quickstart)
-2. 登录：`mcp-publisher login github`（namespace 须为 `io.github.<你的GitHub用户名>/deppon-prd-mcp`）
-3. 发布：`npm run publish:registry`
+1. **安装 CLI**（Homebrew **没有** `mcp-publisher` formula，须从 GitHub Releases 下载）：
+
+```bash
+# Apple Silicon Mac
+curl -fL "https://github.com/modelcontextprotocol/registry/releases/latest/download/mcp-publisher_darwin_arm64.tar.gz" \
+  | tar xz mcp-publisher
+sudo mv mcp-publisher /usr/local/bin/
+# 若无 sudo，可放到 ~/.local/bin 并确保在 PATH 中
+
+mcp-publisher --help
+```
+
+2. 登录：`mcp-publisher login github`（须用 GitHub 账号 **chriswong1103**）
+3. 发布：`cd packages/deppon-prd-mcp && mcp-publisher publish`
 
 Registry 名称：`io.github.chriswong1103/deppon-prd-mcp`（与 `package.json` 的 `mcpName` 一致，须用 GitHub 账号 **chriswong1103** 登录）
 
@@ -75,18 +93,27 @@ src/prototypes/<slug>/
 
 ## MCP 工具
 
-| 工具 | 说明 |
-|------|------|
-| `generate_prd` | 从 pageName 等要素生成 PRD 并落盘 |
-| `generate_prototype` | 从已有 slug 重新生成 prototype.html |
-| `list_prd_projects` | 列出已生成项目 |
-| `get_prd_project` | 读取项目配置与 PRD 摘要 |
-| `open_prd_studio` | 返回 Web 控制台 URL |
+| 工具                    | 说明                                                          |
+| ----------------------- | ------------------------------------------------------------- |
+| `generate_prd`          | 从 pageName 等要素生成 PRD 并落盘                             |
+| `generate_prototype`    | 从已有 slug 重新生成 prototype.html                           |
+| `list_prd_projects`     | 列出已生成项目                                                |
+| `get_prd_project`       | 读取项目配置与 PRD 摘要                                       |
+| `open_prd_studio`       | 返回 Web 控制台 URL                                           |
+| `export_canvas_handoff` | 导出 Penpot/Reframe/**tldraw** handoff（含 `wireframe.tldr`） |
 
 ## 环境变量
 
-| 变量 | 默认 | 说明 |
-|------|------|------|
-| `DEPPON_PRD_WORKSPACE` | `process.cwd()` | 仓库根目录 |
-| `DEPPON_PRD_HTTP_PORT` | `3847` | Web 控制台端口 |
-| `DEPPON_PRD_HTTP_HOST` | `127.0.0.1` | 绑定地址 |
+| 变量                   | 默认            | 说明           |
+| ---------------------- | --------------- | -------------- |
+| `DEPPON_PRD_WORKSPACE` | `process.cwd()` | 仓库根目录     |
+| `DEPPON_PRD_HTTP_PORT` | `3847`          | Web 控制台端口 |
+| `DEPPON_PRD_HTTP_HOST` | `127.0.0.1`     | 绑定地址       |
+
+## 文档
+
+| 文档                                                             | 说明                                                |
+| ---------------------------------------------------------------- | --------------------------------------------------- |
+| [Cursor + MCP 使用指南](./docs/cursor-mcp-workflow.md)           | Agent 生成 PRD/原型、设计模式、常见问题             |
+| [**Penpot/Reframe 画布联调**](./docs/canvas-handoff-workflow.md) | PRD 走 deppon-prd，原型交 Penpot/Reframe MCP        |
+| [墨刀分析 & 演进路线图](./docs/modao-analysis-and-roadmap.md)    | 墨刀 Proto2 技术反推、scene.json 规划、Phase 1 ～ 3 |

package/dist/core/canvas-handoff.d.ts

@@ -0,0 +1,72 @@
+import type { PrdProject } from './types.js';
+export interface CanvasHandoff {
+    version: '1.0';
+    source: 'deppon-prd-mcp';
+    slug: string;
+    pageName: string;
+    pageType: PrdProject['pageType'];
+    generatedAt: string;
+    paths: {
+        prd: string;
+        config: string;
+        referencePrototype: string;
+        handoff: string;
+        tldrawWireframe?: string;
+    };
+    device: {
+        name: string;
+        width: number;
+        height: number;
+    };
+    spec: {
+        background: string;
+        menuPath: string;
+        filters: PrdProject['filters'];
+        columns: PrdProject['columns'];
+        toolbarButtons: string[];
+        rowActions: string[];
+        features: PrdProject['features'];
+    };
+    widgets: Array<{
+        id: string;
+        type: string;
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        props: Record<string, unknown>;
+    }>;
+    penpot: {
+        frameName: string;
+        width: number;
+        height: number;
+        prompt: string;
+    };
+    reframe: {
+        projectSlug: string;
+        brandHint: string;
+        prompt: string;
+    };
+    tldraw: {
+        relativePath: string;
+        prompt: string;
+    };
+}
+export declare function buildCanvasHandoff(project: PrdProject): CanvasHandoff;
+export declare function saveCanvasHandoff(project: PrdProject): {
+    handoffPath: string;
+    penpotPromptPath: string;
+    reframePromptPath: string;
+    tldrawPromptPath: string;
+    tldrawWireframePath: string;
+    handoff: CanvasHandoff;
+    nextSteps: {
+        penpot: string[];
+        reframe: string[];
+        tldraw: string[];
+    };
+};
+export declare function getHandoffSummary(slug: string): {
+    exists: boolean;
+    paths: string[];
+};

package/dist/core/canvas-handoff.js

@@ -0,0 +1,238 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { getPrototypesRoot } from '../config.js';
+import { getProjectDir } from './project-store.js';
+import { buildTldrawFile, buildTldrawPrompt } from './tldraw-wireframe.js';
+function buildWidgets(project) {
+    const sidebarW = 220;
+    const headerH = 56;
+    const pad = 24;
+    const contentX = sidebarW + pad;
+    const filterH = project.filters.length > 0 ? 160 : 0;
+    const tableTop = headerH + pad + filterH + (filterH ? 16 : 0);
+    const widgets = [
+        {
+            id: 'shell_sidebar',
+            type: 'ShellSidebar',
+            x: 0,
+            y: 0,
+            w: sidebarW,
+            h: 900,
+            props: { menuPath: project.menuPath, activeItem: project.pageName },
+        },
+        {
+            id: 'shell_header',
+            type: 'PageHeader',
+            x: sidebarW,
+            y: 0,
+            w: 1440 - sidebarW,
+            h: headerH,
+            props: { title: project.pageName, breadcrumb: project.menuPath },
+        },
+    ];
+    if (project.filters.length > 0) {
+        widgets.push({
+            id: 'filter_bar',
+            type: 'FilterBar',
+            x: contentX,
+            y: headerH + pad,
+            w: 1440 - sidebarW - pad * 2,
+            h: filterH,
+            props: {
+                title: '筛选条件',
+                fields: project.filters.map(f => ({
+                    name: f.name,
+                    type: f.type,
+                    matchRule: f.matchRule,
+                })),
+            },
+        });
+    }
+    widgets.push({
+        id: 'data_table',
+        type: 'DataTable',
+        x: contentX,
+        y: tableTop,
+        w: 1440 - sidebarW - pad * 2,
+        h: 900 - tableTop - pad,
+        props: {
+            title: `${project.pageName.replace(/列表|管理/g, '').trim() || project.pageName}列表`,
+            columns: project.columns.map(c => c.name),
+            toolbarButtons: project.toolbarButtons,
+            rowActions: project.rowActions,
+            mockRows: project.mockRows?.length ? project.mockRows : undefined,
+        },
+    });
+    return widgets;
+}
+function buildPenpotPrompt(project, handoff) {
+    const filterLines = project.filters.map(f => `- ${f.name}（${f.type}，${f.matchRule}）`).join('\n');
+    const columnLines = project.columns.map(c => `- ${c.name}${c.description ? `：${c.description}` : ''}`).join('\n');
+    return `# Penpot 原型任务：${project.pageName}
+
+请在当前 Penpot 文件中创建一帧 **${handoff.penpot.frameName}**（${handoff.penpot.width}×${handoff.penpot.height}），绘制 B 端后台列表页高保真原型。
+
+## 页面背景
+${project.background}
+
+## 布局结构（绝对坐标参考）
+${handoff.widgets.map(w => `- **${w.type}** @ (${w.x}, ${w.y}) ${w.w}×${w.h}`).join('\n')}
+
+## 筛选区
+${filterLines || '（无）'}
+
+## 列表列
+${columnLines}
+
+## 工具栏按钮
+${project.toolbarButtons.join('、')}
+
+## 行操作
+${project.rowActions.join('、')}
+
+## 视觉规范
+- 风格：Arco Design / 企业后台（白底、slate 边框、blue-600 主色）
+- 左侧固定侧栏 220px，顶栏面包屑
+- 参考 HTML 原型：${handoff.paths.referencePrototype}
+
+## 关联 PRD
+${handoff.paths.prd}
+`;
+}
+function buildReframePrompt(project, handoff) {
+    const filterSummary = project.filters.map(f => f.name).join('、') || '无';
+    const columnSummary = project.columns.map(c => c.name).join('、');
+    return `# Reframe 原型任务：${project.pageName}
+
+基于 deppon-prd-mcp 已生成的 PRD，在 Reframe 画布上创建 B 端后台 **${project.pageName}** 页面。
+
+## 设计要求
+- 品牌/风格：${handoff.reframe.brandHint}
+- 设备：${handoff.device.width}×${handoff.device.height}（MacBook Pro 视口）
+- 页面类型：${project.pageType}
+
+## 内容规格
+- 背景：${project.background}
+- 菜单路径：${project.menuPath}
+- 筛选项：${filterSummary}
+- 表格列：${columnSummary}
+- 工具栏：${project.toolbarButtons.join('、')}
+- 行操作：${project.rowActions.join('、')}
+
+## 布局区块
+${handoff.widgets.map(w => `- ${w.type}：${JSON.stringify(w.props)}`).join('\n')}
+
+## 工作流
+1. 读取参考 HTML：${handoff.paths.referencePrototype}
+2. 使用 reframe_compile 将结构编译为 INode 场景
+3. reframe_inspect 检查对比度与布局
+4. reframe_export format=html 导出
+
+## PRD 文档
+${handoff.paths.prd}
+
+项目 slug：\`${handoff.reframe.projectSlug}\`
+`;
+}
+export function buildCanvasHandoff(project) {
+    const dir = getProjectDir(project.slug);
+    const widgets = buildWidgets(project);
+    const handoff = {
+        version: '1.0',
+        source: 'deppon-prd-mcp',
+        slug: project.slug,
+        pageName: project.pageName,
+        pageType: project.pageType,
+        generatedAt: new Date().toISOString(),
+        paths: {
+            prd: path.join(dir, 'prd.md'),
+            config: path.join(dir, 'project.config.json'),
+            referencePrototype: path.join(dir, 'prototype.html'),
+            handoff: path.join(dir, 'canvas-handoff.json'),
+            tldrawWireframe: path.join(dir, 'wireframe.tldr'),
+        },
+        device: { name: 'MacBook Pro', width: 1440, height: 900 },
+        spec: {
+            background: project.background,
+            menuPath: project.menuPath,
+            filters: project.filters,
+            columns: project.columns,
+            toolbarButtons: project.toolbarButtons,
+            rowActions: project.rowActions,
+            features: project.features,
+        },
+        widgets,
+        penpot: {
+            frameName: `${project.pageName} · 原型`,
+            width: 1440,
+            height: 900,
+            prompt: '',
+        },
+        reframe: {
+            projectSlug: project.slug,
+            brandHint: 'Arco Design Pro · 企业 B 端后台',
+            prompt: '',
+        },
+        tldraw: {
+            relativePath: `${project.slug}/wireframe.tldr`,
+            prompt: '',
+        },
+    };
+    handoff.penpot.prompt = buildPenpotPrompt(project, handoff);
+    handoff.reframe.prompt = buildReframePrompt(project, handoff);
+    handoff.tldraw.prompt = buildTldrawPrompt(project, handoff, handoff.tldraw.relativePath);
+    return handoff;
+}
+export function saveCanvasHandoff(project) {
+    const handoff = buildCanvasHandoff(project);
+    const dir = getProjectDir(project.slug);
+    fs.mkdirSync(dir, { recursive: true });
+    const handoffPath = path.join(dir, 'canvas-handoff.json');
+    const penpotPromptPath = path.join(dir, 'penpot-prompt.md');
+    const reframePromptPath = path.join(dir, 'reframe-prompt.md');
+    const tldrawPromptPath = path.join(dir, 'tldraw-prompt.md');
+    const tldrawWireframePath = path.join(dir, 'wireframe.tldr');
+    fs.writeFileSync(handoffPath, JSON.stringify(handoff, null, 2), 'utf8');
+    fs.writeFileSync(penpotPromptPath, handoff.penpot.prompt, 'utf8');
+    fs.writeFileSync(reframePromptPath, handoff.reframe.prompt, 'utf8');
+    fs.writeFileSync(tldrawPromptPath, handoff.tldraw.prompt, 'utf8');
+    fs.writeFileSync(tldrawWireframePath, JSON.stringify(buildTldrawFile(project, handoff.widgets), null, 2), 'utf8');
+    return {
+        handoffPath,
+        penpotPromptPath,
+        reframePromptPath,
+        tldrawPromptPath,
+        tldrawWireframePath,
+        handoff,
+        nextSteps: {
+            penpot: [
+                '终端：yarn penpot:mcp',
+                '浏览器 design.penpot.app → 插件 → http://localhost:4400/manifest.json → Connect',
+                'Agent 读 penpot-prompt.md，用 penpot MCP 绘制高保真原型',
+            ],
+            reframe: [
+                '终端：yarn reframe:platform（需 yarn reframe:setup）',
+                'Agent 读 reframe-prompt.md，调用 reframe MCP',
+                `预览：http://127.0.0.1:4100/platform/project/${project.slug}`,
+            ],
+            tldraw: [
+                'Cursor 已配置 tldraw MCP（TLDRAW_DIR=src/prototypes）',
+                `打开线框：src/prototypes/${project.slug}/wireframe.tldr（tldraw.com 或 VS Code）`,
+                'Agent 读 tldraw-prompt.md，用 tldraw_add_shape 补充箭头/备注',
+            ],
+        },
+    };
+}
+export function getHandoffSummary(slug) {
+    const dir = path.join(getPrototypesRoot(), slug);
+    const files = [
+        'canvas-handoff.json',
+        'penpot-prompt.md',
+        'reframe-prompt.md',
+        'tldraw-prompt.md',
+        'wireframe.tldr',
+    ];
+    const paths = files.map(f => path.join(dir, f));
+    const exists = paths.every(p => fs.existsSync(p));
+    return { exists, paths };
+}

package/dist/core/prd-generator.js

@@ -6,15 +6,9 @@ export function generatePrdMarkdown(project) {
     const title = project.useDpItTitle ? buildDpItTitle(project) : `${project.pageName} PRD（产品需求文档）`;
     const moduleName = project.pageName;
     const listTitle = `${moduleName.replace(/列表|管理/g, '').trim() || moduleName}列表`;
-    const featureRows = project.features
-        .map(f => `| ${f.module} | ${f.feature} | ${f.description} |`)
-        .join('\n');
-    const permissionRows = project.permissions
-        .map(p => `| ${p.point} | ${p.scope} | ${p.dataScope} |`)
-        .join('\n');
-    const filterRows = project.filters
-        .map(f => `| ${f.name} | ${f.type} | ${f.limit} | ${f.matchRule} |`)
-        .join('\n');
+    const featureRows = project.features.map(f => `| ${f.module} | ${f.feature} | ${f.description} |`).join('\n');
+    const permissionRows = project.permissions.map(p => `| ${p.point} | ${p.scope} | ${p.dataScope} |`).join('\n');
+    const filterRows = project.filters.map(f => `| ${f.name} | ${f.type} | ${f.limit} | ${f.matchRule} |`).join('\n');
     const columnRows = project.columns
         .map(c => `| ${c.name} | ${c.description || '—'} | ${c.sortable ? '是' : '否'} |`)
         .join('\n');

package/dist/core/project-store.d.ts

@@ -16,6 +16,18 @@ export declare function applyOverrides(slug: string, overrides: Partial<Pick<Prd
     listTitle?: string;
     filterTitle?: string;
 }): PrdProject | null;
+export interface DesignSavePayload {
+    layout?: PrdProject['layout'];
+    filters?: PrdProject['filters'];
+    columns?: PrdProject['columns'];
+    toolbarButtons?: string[];
+    overrides?: {
+        pageName?: string;
+        listTitle?: string;
+        filterTitle?: string;
+    };
+}
+export declare function saveDesignLayout(slug: string, payload: DesignSavePayload): PrdProject | null;
 export declare function readProjectFiles(slug: string): {
     prd: string;
     prototype: string;

package/dist/core/project-store.js

@@ -64,6 +64,23 @@ export function applyOverrides(slug, overrides) {
     saveProject(project);
     return project;
 }
+export function saveDesignLayout(slug, payload) {
+    const project = loadProject(slug);
+    if (!project)
+        return null;
+    if (payload.layout)
+        project.layout = payload.layout;
+    if (payload.filters?.length)
+        project.filters = payload.filters;
+    if (payload.columns?.length)
+        project.columns = payload.columns;
+    if (payload.toolbarButtons?.length)
+        project.toolbarButtons = payload.toolbarButtons;
+    if (payload.overrides?.pageName)
+        project.pageName = payload.overrides.pageName;
+    saveProject(project);
+    return project;
+}
 export function readProjectFiles(slug) {
     const project = loadProject(slug);
     if (!project)

package/dist/core/prototype-generator.d.ts

@@ -1,2 +1,2 @@
 import { type PrdProject } from './types.js';
-export declare function generatePrototypeHtml(project: PrdProject): string;
+export declare function generatePrototypeHtml(rawProject: PrdProject): string;