内容
# omp-designer — 自主AI设计系统 (v4.0)
适用于 oh-my-pi 的 `/designer` 扩展程序，将您的AI编码代理转变为UI/UX设计专家。
```bash
omp install npm:omp-designer
```
然后 `/designer` → 设计模式开启。
---
## 工作原理
```
用户：“为我构建一个关于AI的网站”
│
▼
┌─────────────────────────────────────────────┐
│ 步骤 1：分支选择 │
│ “随机选择” → 提问情感问题 │
│ 否则 → 提问3-5个多选题 │
└─────────────────┬───────────────────────────┘
▼
┌─────────────────────────────────────────────┐
│ 步骤 2：产品文档 + 证据文档 │
│ 编写简介 + 设计前跟踪证据 │
└─────────────────┬───────────────────────────┘
▼
┌─────────────────────────────────────────────┐
│ 步骤 3：计划（必填） │
│ 7节计划，含MCP研究日志 │
│ 用户输入“接受”以批准 │
└─────────────────┬───────────────────────────┘
▼
┌─────────────────────────────────────────────┐
│ 步骤 4：MCP研究 │
│ designmd，ui-layouts，21st-dev，浏览器 │
│ 备用：MCP不可用时使用web搜索 │
└─────────────────┬───────────────────────────┘
▼
┌─────────────────────────────────────────────┐
│ 步骤 5：设计令牌 │
│ 从colors.csv（按行号）调色板 │
│ 从typography.csv选择字体 │
│ 在任何组件之前编写DESIGN.md │
└─────────────────┬───────────────────────────┘
▼
┌─────────────────────────────────────────────┐
│ 步骤 6：构建 │
│ 组件遵循批准的计划 │
│ 为英雄视觉效果生成图像 │
└─────────────────┬───────────────────────────┘
▼
┌─────────────────────────────────────────────┐
│ 步骤 7：构建后自我检查（必填） │
│ fix-ai-slop.mjs + analyze-layout.mjs │
│ npm run build + impeccable检测 │
│ 部分视口截图 │
└─────────────────┬───────────────────────────┘
▼
┌─────────────────────────────────────────────┐
│ 步骤 8：防滑验证 │
│ 替代测试 + 理性测试 │
│ 防过度纠正检查 │
│ 发布准备度 vs 滑坡风险 │
└─────────────────────────────────────────────┘
```
---
## 12种技能
| 技能 | 代理阅读时 | 内容 |
|-------|-------------------|------------------|
| **设计大师** | 首先（工作流程合约） | 8步工作流程，调色板表格，计划模板 |
| **AI防滑** | 在规划期间 | 规范的防滑定义，替代测试，理性测试，14个评估维度 |
| **产品文档** | 在设计工作之前 | 产品文档格式，证据文档模板，“绝不捏造事实” |
| **品位技能** | 在规划期间 + 构建后 | 简要推断，调整，AI检查清单，预飞行检查 |
| **设计文档** | 在构建前 | 设计文档格式，Tailwind v4备注，动画备注 |
| **UI/UX专业版** | 在规划期间 | 如何从CSV数据文件中选择（161个调色板，57个字体配对） |
| **参考研究** | 在规划期间 | 如何在设计前研究真实网站 |
| **文案撰写** | 在构建前 | 人类文案规则，禁用词，验证检查点 |
| **滚动编舞** | 在构建前 | 叙事动画模式，移动设备备用 |
| **动画** | 在构建期间 | 动画模式，缓动，时机 |
| **视觉批评** | 在构建后 | 截图评估，移动设备QA，揭示触发协议 |
| **审查技能** | 在构建后 | 构建后审计，按维度评估，防过度纠正 |
---
## MCP服务器
| 服务器 | 提供内容 | 使用时机 |
|--------|-----------------|-----------|
| **21st-dev-magic** | 组件灵感，SVG徽标 | 在规划期间 |
| **ui-layouts** | 60+真实React/TSX组件 | 在规划和构建期间 |
| **chrome-devtools** | 无头浏览器截图 | 在规划和审查期间 |
| **designmd** | 设计系统参考 | 在规划期间 |
---
## 防滑系统
### 规范参考
- **ai-slop.md** （679行）— 什么是AI滑坡的唯一真实来源
### 确定性验证器
- **fix-ai-slop.mjs** — 检测破折号，流行词汇，虚假数字，库存照片，无支持的证据文档声明，过度使用字体，商业声明
- **analyze-layout.mjs** — 检测调色板外颜色，动画时间问题，布局问题，CSV调色板验证
### 评估框架
- **14个维度** 得分0-4（产品基础，真实性，具体性，叙事性，构成，系统一致性，文案，图像，动画，可访问性，响应性，功能完整性，独特性）
- **发布准备度** — 阻塞缺陷的通过/失败
- **滑坡风险** — 加权分数0-100
---
## 文件
```
omp-designer/
├── extension/index.ts # omp扩展（PROMPT_INJECT + MCP切换）
├── extensions/designer.ts # Pi扩展
├── skills/ # 12种设计技能
│ ├── ai-slop.md # 规范的防滑参考（NEW）
│ ├── designer-master.md # 工作流程合约
│ ├── taste-skill.md # 防滑规则 + AI提示
│ ├── product-md.md # 简介捕获 + 证据文档
│ ├── design-md.md # 设计文档格式
│ ├── ui-ux-pro-max.md # CSV数据使用
│ ├── reference-study.md # 参考研究指南
│ ├── copywriting.md # 人类文案规则
│ ├── scroll-choreography.md # 动画模式
│ ├── animate.md # 动画模式
│ ├── visual-critique.md # 截图评估
│ └── review-skill.md # 构建后审计
├── data/
│ ├── ui-ux-pro-max/ # 1.7MB设计数据库（CSV文件）
│ └── scroll-templates.tsx # 可重复使用的滚动模式
├── scripts/
│ ├── fix-ai-slop.mjs # 确定性防滑验证器
│ └── analyze-layout.mjs # 布局 + 调色板 + 动画验证器
├── test-output/ # 测试项目
├── docs/problems.md # 已知问题 + 修复
└── loop.md # 改进循环
```
---
## 快速开始
```bash
omp install npm:omp-designer
omp
/designer # 设计模式开启
“为我构建一个SaaS登陆页面” # 代理询问问题
# 回答问题
# 代理显示计划和MCP研究日志
# 输入“接受”
# 代理构建
# 代理运行fix-ai-slop + analyze-layout
# 代理截图
# 代理报告替代测试 + 理性测试
```
---
## 最佳模型
MiniMax M3 (`opencode-go/minimax-m3:high`) — 最佳设计品位。DeepSeek V4 Flash也适合测试。
---
## 许可证
MIT。
