pdlc-ui-design-pro
스타10
포크2
업데이트2026년 5월 7일 16:14
UI/UX 专业设计（PDLC 集成层，依赖 ui-ux-pro-max）
설치
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SKILL.md
readonly출처
다운로드
관련 직업SOC
SOC 직업 분류 기준
메뉴
UI/UX 专业设计（PDLC 集成层，依赖 ui-ux-pro-max）
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
全自动 PDLC 新功能开发（串联 PRD→设计→TDD→实现→评审→发布）
全自动 Bug 修复（定位→复现→修复→测试→文档）
按设计文档和已有测试用例实现代码（带前置守卫、自检、handoff）
创建 PRD 文档（自动化生成 + 自检 + handoff）
质量闸门——跑真实 check、对照质量目标、出可核对报告，由人签字放行
代码评审 + 文档评审
| name | pdlc-ui-design-pro |
| description | UI/UX 专业设计（PDLC 集成层，依赖 ui-ux-pro-max） |
| argument-hint | <功能描述 | 设计目标> |
| allowed-tools | Read, Write, Edit, Glob, Grep, Bash |
| layer | 3 |
| stage | design |
| produces | ["docs/02_design/ui-ux/**"] |
| requires | [] |
| next_step | null |
| terminal_state | null |
本命令是 PDLC 的 UI 设计集成点，负责 PRD 守卫、PDLC 文档结构管理、以及调用设计智能引擎。
优先调用 ui-ux-pro-max 开源 skill（67 种风格 / 161 款配色 / 57 组字体搭配 / 161 行业推理规则），skill 未安装时自动启用内置流程。
docs/01_requirements/prd/ 目录下搜索对应 PRD 文档⛔ PDLC 守卫：未找到与「<功能名>」相关的 PRD 文档。
UI 设计必须基于已有的 PRD。请先运行：
👉 /pdlc-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。
此路径适用于已通过
uipro-cli安装了 ui-ux-pro-max 的用户。 安装方法：npm install -g uipro-cli && uipro init --ai claude
第一步：生成设计系统
从 PRD 中提取：产品类型、行业、关键词、技术栈，然后运行：
python3 $UIPM_SCRIPT "<产品类型> <行业> <关键词>" \
--design-system --persist -p "<项目名称>"
design-system/MASTER.md（全局设计规范）--page "<页面名>" 生成页面级覆盖文件第二步：补充领域搜索（按需）
# 获取动效 / 无障碍最佳实践
python3 $UIPM_SCRIPT "animation accessibility" --domain ux
# 获取技术栈特定最佳实践（可选値见下表）
python3 $UIPM_SCRIPT "<关键词>" --stack <栈名>
| 栈名 | 适用场景 |
|---|---|
html-tailwind | Tailwind CSS（默认） |
react | React / Vite |
nextjs | Next.js |
vue | Vue 3 |
shadcn | shadcn/ui |
react-native | React Native |
flutter | Flutter |
swiftui | iOS SwiftUI |
第三步：整合为 PDLC 设计文档
基于 skill 输出，结构化写入以下文件：
| 文档 | 路径 |
|---|---|
| UI 主文档（线框图 + 交互规范） | docs/02_design/ui-ux/<功能ID>-<功能名>-ui.md |
| 设计 Token | docs/02_design/ui-ux/design-system/tokens.md |
| 组件目录 | docs/02_design/ui-ux/design-system/components.md |
所有文档顶部必须包含 PDLC 追溯头：
<!-- PDLC-TRACE -->
<!-- 功能ID: <功能ID> -->
<!-- 功能名称: <功能名> -->
<!-- 阶段: 设计 -->
<!-- 前置文档: docs/01_requirements/prd/<功能ID>-<功能名>-prd.md -->
自动降级路径，功能完整但不包含 67 种风格智能推荐。
未检测到 skill 时输出提示后继续：
ℹ️ ui-ux-pro-max skill 未安装，使用内置设计流程。
安装后可获得 67 种风格 / 161 款配色 / 57 组字体搭配的智能推荐：
npm install -g uipro-cli
uipro init --ai claude
技术栈探测
扫描 frontend/ 目录，读取 package.json，检测：
输出探测结果后继续。
产出三类文档（路径与路径 A 相同）：
1. UI 主文档（docs/02_design/ui-ux/<功能ID>-<功能名>-ui.md）
2. 设计 Token（docs/02_design/ui-ux/design-system/tokens.md）
提取并标准化：颜色 Token（品牌色 / 语义色 / 中性色）、字体 Token（字号 / 行高 / 字重）、间距 Token（4px 基准）、圆角 / 阴影 / 动效 Token。
3. 组件目录（docs/02_design/ui-ux/design-system/components.md）
每个组件含：变体矩阵（variant × size × state）、Props 定义、无障碍规范、动效说明。
技术栈自适应代码骨架
基于探测结果，在 frontend/.../src/ 下生成：
// TODO）tokens.css）types/<功能名>.ts）services/<功能名>Api.ts）支持代码格式：React/Next.js + Tailwind → TSX；Vue 3 → .vue SFC；小程序 → wxml/wxss/ts；未识别 → 通用伪代码骨架。
所有内容完成后，输出：
✅ UI/UX 设计完成
设计引擎: ui-ux-pro-max skill / 内置流程
产出文件:
📄 docs/02_design/ui-ux/<功能ID>-<功能名>-ui.md
🎨 docs/02_design/ui-ux/design-system/tokens.md
🧩 docs/02_design/ui-ux/design-system/components.md
💻 frontend/.../src/<相关文件列表>
下一步:
/pdlc-tdd <功能名> ← 编写测试（可引用类型文件）
/pdlc-implement <功能名> ← 实现业务逻辑（填充 TODO）
设计目标: $ARGUMENTS
本命令的 handoff 输出：
✅ UI/UX 专业设计文档 完成
📦 产出：docs/02_design/ui-ux/<功能ID>-<功能名>-ui.md
👉 下一步：（本次流程结束，无后续）