pdlc-ui-design-prolisted

# UI/UX 专业设计（PDLC 集成层） <!-- @include templates/prompts/iron-law.md --> 本命令是 PDLC 的 UI 设计集成点，负责 PRD 守卫、PDLC 文档结构管理、以及调用设计智能引擎。 优先调用 `ui-ux-pro-max` 开源 skill（67 种风格 / 161 款配色 / 57 组字体搭配 / 161 行业推理规则），skill 未安装时自动启用内置流程。 --- ## PDLC 前置检查（必须执行，不可跳过） 1. 从用户输入中提取功能名称关键词 2. 在 `docs/01_requirements/prd/` 目录下搜索对应 PRD 文档 3. **未找到** → 立即停止并输出： ``` ⛔ PDLC 守卫：未找到与「<功能名>」相关的 PRD 文档。 UI 设计必须基于已有的 PRD。请先运行： 👉 /pdlc-prd <需求描述> ``` 4. **找到** → 提取功能ID，读取 PRD 内容；同时读取（若存在）： - `docs/02_design/api/` 下相关 API 设计文档 - `docs/02_design/ui-ux/` 下已有 UI 设计文档 - `docs/02_design/ui-ux/design-system/tokens.md`（项目 Token 规范） --- ## 设计引擎选择 按如下优先级检测 ui-ux-pro-max skill 是否可用： | 安装范围 | 检测路径 | |------|------| | 项目级 | `.claude/skills/ui-ux-pro-max/scripts/search.py` | | 全局 | `~/.claude/skills/ui-ux-pro-max/scripts/search.py` | 按顺序检测上述路径，将第一个找到的路径记为 `$UIPM_SCRIPT`。 ### ✅ 路径 A：ui-ux-pro-max skill 可用（推荐） > 此路径适用于已通过 `uipro-cli` 安装了 ui-ux-pro-max 的用户。 > 安装方法：`npm install -g uipro-cli && uipro init --ai claude` **第一步：生成设计系统** 从 PRD 中提取：产品类型、行业、关键词、技术栈，然后运行： ```bash python3 $UIPM_SCRIPT "<产品类型> <行业> <关键词>" \ --design-system --persist -p "<项目名称>" ``` - 输出保存到 `design-system/MASTER.md`（全局设计规范） - 如有具体页面，追加 `--page "<页面名>"` 生成页面级覆盖文件 **第二步：补充领域搜索（按需）** ```bash # 获取动效 / 无障碍最佳实践 python3 $UIPM_SCRIPT "animation accessibility" --domain ux # 获取技术栈特定最佳实践（可选値见下表） python3 $UIPM_SCRIPT "<关键词>" --stack <栈名> ``` | 栈名 | 适用场景 | |------|---------| | `html-tailwind` | Tailwind CSS（默认） | | `react`