{"slug":"pdlc-ui-design-pro","title":"pdlc-ui-design-pro","summary":"UI/UX 专业设计（PDLC 集成层，依赖 ui-ux-pro-max）","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-09-23T18:54:27.424441Z","repo":{"url":"https://github.com/kanfu-panda/pdlc-skills","stars":15,"forks":2,"license":"MIT","updatedAt":"2026-09-23T15:59:31Z"},"bodyHtml":"
\n

name: pdlc-ui-design-pro\ndescription: UI/UX 专业设计（PDLC 集成层，依赖 ui-ux-pro-max）\nargument-hint: <功能描述 | 设计目标>\nallowed-tools: Read, Write, Edit, Glob, Grep, Bash\nlayer: 3\nstage: design\nproduces:

\n\n
\n

UI/UX 专业设计（PDLC 集成层）

\n\n

⛔ IRON LAW · 不可违反的硬门禁

\n

以下规则为不可协商的执行约束：

\n
    \n
  1. 文件必须落盘：所有带编号（功能ID / 缺陷ID）的文档，必须作为实际文件写入磁盘，不可仅在对话中输出。
    2. \n
  2. 阶段必须落章：每个阶段完成后必须在状态机 docs/.pdlc-state/<feature-id>.json 追加 history，不可跳过。
    3. \n
  3. 测试必须存在：进入 /pdlc-implement 前，对应测试必须存在且处于红灯状态。违反则中止。
    4. \n
  4. 自检必须执行：段二自检为强制步骤，不得以\"已经很好了\"为由跳过。
    5. \n
  5. 防循环：段三修复为单次，不递归。无法自动修复的问题记录到报告，继续往下走。
    6. \n
  6. 状态必推进：成功执行某 phase 后 current_stage 必须变更。收尾时若发现 current_stage 未推进，视为失败并报错，不得静默返回（防止外层循环拿滞后的状态空转烧额度）。唯一例外：命中人工点主动 block 时，current_stage 保持不变但必须写 last_phase_result.ok=false + blocked_reason。
    7. \n
\n

违反任一条 = 立即中止当前命令，输出违规详情，等待人工介入。

\n\n

本命令是 PDLC 的 UI 设计集成点，负责 PRD 守卫、PDLC 文档结构管理、以及调用设计智能引擎。\n优先调用 ui-ux-pro-max 开源 skill（67 种风格 / 161 款配色 / 57 组字体搭配 / 161 行业推理规则），skill 未安装时自动启用内置流程。

\n
\n

PDLC 前置检查（必须执行，不可跳过）

\n
    \n
  1. 从用户输入中提取功能名称关键词
    2. \n
  2. 在 docs/01_requirements/prd/ 目录下搜索对应 PRD 文档
    3. \n
  3. 未找到 → 立即停止并输出：\n
    ⛔ PDLC 守卫：未找到与「<功能名>」相关的 PRD 文档。\nUI 设计必须基于已有的 PRD。请先运行：\n\uD83D\uDC49 /pdlc-prd <需求描述>\n
    \n
    4. \n
  4. 找到 → 提取功能ID，读取 PRD 内容；同时读取（若存在）：\n\n
    5. \n
\n
\n

设计引擎选择

\n

按如下优先级检测 ui-ux-pro-max skill 是否可用：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
安装范围检测路径
项目级.claude/skills/ui-ux-pro-max/scripts/search.py
全局~/.claude/skills/ui-ux-pro-max/scripts/search.py
\n

按顺序检测上述路径，将第一个找到的路径记为 $UIPM_SCRIPT。

\n

✅ 路径 A：ui-ux-pro-max skill 可用（推荐）

\n
\n

此路径适用于已通过 uipro-cli 安装了 ui-ux-pro-max 的用户。\n安装方法：npm install -g uipro-cli && uipro init --ai claude

\n
\n

第一步：生成设计系统

\n

从 PRD 中提取：产品类型、行业、关键词、技术栈，然后运行：

\n
python3 $UIPM_SCRIPT \"<产品类型> <行业> <关键词>\" \\\n  --design-system --persist -p \"<项目名称>\"\n
\n\n

第二步：补充领域搜索（按需）

\n
# 获取动效 / 无障碍最佳实践\npython3 $UIPM_SCRIPT \"animation accessibility\" --domain ux\n\n# 获取技术栈特定最佳实践（可选値见下表）\npython3 $UIPM_SCRIPT \"<关键词>\" --stack <栈名>\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
栈名适用场景
html-tailwindTailwind CSS（默认）
reactReact / Vite
nextjsNext.js
vueVue 3
shadcnshadcn/ui
react-nativeReact Native
flutterFlutter
swiftuiiOS SwiftUI
\n

第三步：整合为 PDLC 设计文档

\n

基于 skill 输出，结构化写入以下文件：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
文档路径
UI 主文档（线框图 + 交互规范）docs/02_design/ui-ux/<功能ID>-<功能名>-ui.md
设计 Tokendocs/02_design/ui-ux/design-system/tokens.md
组件目录docs/02_design/ui-ux/design-system/components.md
\n

所有文档顶部必须包含 PDLC 追溯头：

\n
<!-- PDLC-TRACE -->\n<!-- 功能ID: <功能ID> -->\n<!-- 功能名称: <功能名> -->\n<!-- 阶段: 设计 -->\n<!-- 前置文档: docs/01_requirements/prd/<功能ID>-<功能名>-prd.md -->\n
\n
\n

\uD83D\uDD04 路径 B：内置流程（skill 未安装时自动降级）

\n
\n

自动降级路径，功能完整但不包含 67 种风格智能推荐。

\n
\n

未检测到 skill 时输出提示后继续：

\n
ℹ️  ui-ux-pro-max skill 未安装，使用内置设计流程。\n   安装后可获得 67 种风格 / 161 款配色 / 57 组字体搭配的智能推荐：\n   npm install -g uipro-cli\n   uipro init --ai claude\n
\n

技术栈探测

\n

扫描 frontend/ 目录，读取 package.json，检测：

\n\n

输出探测结果后继续。

\n

产出三类文档（路径与路径 A 相同）：

\n

1. UI 主文档（docs/02_design/ui-ux/<功能ID>-<功能名>-ui.md）

\n\n

2. 设计 Token（docs/02_design/ui-ux/design-system/tokens.md）

\n

提取并标准化：颜色 Token（品牌色 / 语义色 / 中性色）、字体 Token（字号 / 行高 / 字重）、间距 Token（4px 基准）、圆角 / 阴影 / 动效 Token。

\n

3. 组件目录（docs/02_design/ui-ux/design-system/components.md）

\n

每个组件含：变体矩阵（variant × size × state）、Props 定义、无障碍规范、动效说明。

\n

技术栈自适应代码骨架

\n

基于探测结果，在 frontend/.../src/ 下生成：

\n\n

支持代码格式：React/Next.js + Tailwind → TSX；Vue 3 → .vue SFC；小程序 → wxml/wxss/ts；未识别 → 通用伪代码骨架。

\n
\n

完成报告

\n

所有内容完成后，输出：

\n
✅ UI/UX 设计完成\n\n设计引擎: ui-ux-pro-max skill / 内置流程\n产出文件:\n  \uD83D\uDCC4 docs/02_design/ui-ux/<功能ID>-<功能名>-ui.md\n  \uD83C\uDFA8 docs/02_design/ui-ux/design-system/tokens.md\n  \uD83E\uDDE9 docs/02_design/ui-ux/design-system/components.md\n  \uD83D\uDCBB frontend/.../src/<相关文件列表>\n\n下一步:\n  /pdlc-tdd <功能名>        ← 编写测试（可引用类型文件）\n  /pdlc-implement <功能名>  ← 实现业务逻辑（填充 TODO）\n
\n
\n

设计目标: $ARGUMENTS

\n\n

段四：交接（Handoff）

\n

命令完成后必须输出以下格式的最终消息：

\n
✅ <阶段名> 完成：<主要产出物路径>\n\uD83D\uDCCA 自检：<通过数>/<总数> 通过（若有未通过，附要点）\n\uD83D\uDCE6 状态快照：docs/.pdlc-state/<feature-id>.json\n\uD83D\uDC49 下一步：/pdlc-<next_step>\n   （如果有分叉）或 /pdlc-<alt>（条件：<选择依据>）\n
\n

规则：

\n\n\n

本命令的 handoff 输出：

\n
✅ UI/UX 专业设计文档 完成\n\uD83D\uDCE6 产出：docs/02_design/ui-ux/<功能ID>-<功能名>-ui.md\n\uD83D\uDC49 下一步：（本次流程结束，无后续）\n
\n","files":[{"path":"SKILL.md","sizeBytes":8565,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-09-23T18:55:13.305167Z","sha256":"6B744167A8D33738EB3FAA7699980F1C93CB2B9D679A67DA96F86FFA57700A19","sizeBytes":4505},"review":null,"source":{"repositoryUrl":"https://github.com/kanfu-panda/pdlc-skills","path":"skills/pdlc-ui-design-pro","license":"MIT","commit":"3cd2f02ab45cb1cd48962e0f298ae4dad9fb442f","subtreeSha":"A31CA75F7FCABCE63E2A63904AE672B500143BCE99D47B46FC77186E732C61D0","lastSyncedAt":"2026-09-23T18:54:21.123477Z"},"reviewedAt":"2026-09-23T18:57:10.076432Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/kanfu-panda/pdlc-skills/tree/main/skills/pdlc-ui-design-pro"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install kanfu-panda-pdlc-skills@llmmart"},{"target":"git","command":"git clone https://github.com/kanfu-panda/pdlc-skills.git"}]}