Phase 3

Cursor 工作流

用同一套风格包与 PageIR，在 Cursor 里约束生成 / 增量改稿，再到 uxdesign.pengyoo.com 预览。

← 返回出稿台

1. 风格包

Commerce

促销感电商流 · 价格与商品卡优先

  • CommerceHeader — 顶栏
  • PromoBanner — 促销横幅
  • CategoryRow — 分类行
  • ProductGrid — 商品网格
  • BottomTab — 底部导航
  • Frame — 容器
  • Text — 文本
  • Rectangle — 矩形
  • Ellipse — 椭圆

Social

信息流社交 · 头像与互动条

  • SocialTopBar — 顶栏
  • ProfileCard — 资料卡
  • FeedItem — 动态
  • ComposerBar — 发布条
  • Frame — 容器
  • Text — 文本
  • Rectangle — 矩形
  • Ellipse — 椭圆

Chat

会话列表与气泡 · 沟通场景

  • ChatNav — 导航栏
  • SessionList — 会话列表
  • ChatBubble — 气泡
  • ChatInput — 输入栏
  • Frame — 容器
  • Text — 文本
  • Rectangle — 矩形
  • Ellipse — 椭圆

2. MCP 工具

{
  "mcpServers": {
    "pengyoo-ux": {
      "command": "node",
      "args": ["<repo>/packages/mcp-server/dist/index.js"],
      "env": {
        "PENGYOO_UX_WORKSPACE": "<your-project-dir>"
      }
    }
  }
}

仓库内文档：docs/cursor-rules/mcp-config.example.md · Rules：docs/cursor-rules/pengyoo-ux.mdc

3. 推荐流程

  1. 在出稿台生成页面，导出 PageIR JSON
  2. 把 JSON 放进项目为 draft.page.json
  3. 在 Cursor 启用 pengyoo-ux MCP，按 pack 组件增量修改
  4. 改完后 validate_ir，再回站点预览或继续属性编辑

4. 硬规则