diff --git a/README.md b/README.md index 9ad6a49..0486bd0 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ skills/ │ ├── references/ # prompt-craft：结构公式·文字渲染·摄影/插画/信息图·中文东方风格·改图指令·反模式 │ └── scripts/ # gpt_image.py（零依赖：Codex 凭证直连内部图像通道，token 自动刷新） └── le-app-design/ # 统一 App 设计工坊（编排器） - ├── SKILL.md # S0–S7 流水线：依赖门→产品理解→规范→视觉→构建→审查→迭代→验收；六铁律 + 岗位裁决表 + ├── SKILL.md # S0–S7 流水线：依赖门→产品理解→视觉探索→设计规范→构建→审查→迭代→验收；六铁律 + 岗位裁决表 ├── references/ # pipeline（七阶段细则）· runtimes（四 runtime 适配矩阵） ├── scripts/ # check_deps（硬依赖门）/ log_call（调用证据账本）/ evidence_report（验收门），纯标准库 └── evals/ reports/ # 触发用例 + 集成测试证据（calls.jsonl / 截图 / 审查报告） @@ -92,7 +92,7 @@ skills/ ## le-app-design —— 统一 App 设计工坊 -一个入口（「帮我设计这个 App」）跑完产品理解 → 设计规范 → 视觉探索 → Web 高保真原型 → 设计审查 → 优化迭代 → 交付。它不是借鉴了三个开源 Skill 的新 Skill，而是**真正集成并调用**三个上游的编排器： +一个入口（「帮我设计这个 App」）跑完产品理解 → 视觉探索 → 设计规范 → Web 高保真原型 → 设计审查 → 优化迭代 → 交付。它不是借鉴了三个开源 Skill 的新 Skill，而是**真正集成并调用**三个上游的编排器（v1.1 起 frontend-design 先定方向、ui-ux-pro-max 后编系统——方向由题材决定，不由品类目录决定）： - **ui-ux-pro-max**（MIT）：`search.py` CLI 真跑 `--design-system --persist` 生成 MASTER.md，UX/可访问性/触控规范走数据检索——设计规范的硬约束来源 - **frontend-design**（Apache-2.0, Anthropic）：经宿主 Skill 工具装载（或 Read 原文全文，一等路径）——视觉方向与品牌差异化的 design lead diff --git a/skills/le-app-design/README.md b/skills/le-app-design/README.md index 1bce837..d1db7b9 100644 --- a/skills/le-app-design/README.md +++ b/skills/le-app-design/README.md @@ -1,12 +1,12 @@ # le-app-design -> 统一 App 设计工坊：一个入口完成产品理解 → 设计规范 → 视觉探索 → Web 高保真原型 → 设计审查 → 优化迭代 → 交付。底层**真实集成并调用**三个上游 Skill，本 Skill 只做编排、协调与质量控制。 +> 统一 App 设计工坊：一个入口完成产品理解 → 视觉探索 → 设计规范 → Web 高保真原型 → 设计审查 → 优化迭代 → 交付。底层**真实集成并调用**三个上游 Skill，本 Skill 只做编排、协调与质量控制。 **状态**：rigorous 档。ZCode / Claude Code / Codex / OpenCode 通用。 ## 它解决什么问题 -你想要一个 App 从想法变成可交互的高保真原型，只需要说「帮我设计这个 App」。le-app-design 负责检测依赖、给三个上游分派岗位、串起全流程、留下可检查的调用证据：ui-ux-pro-max 出设计规范与 UX 硬约束，frontend-design 出有品牌差异性的视觉方向，impeccable 做设计审查与反模式检测并盯着修复。你不需要知道三个上游各自怎么调。 +你想要一个 App 从想法变成可交互的高保真原型，只需要说「帮我设计这个 App」。le-app-design 负责检测依赖、给三个上游分派岗位、串起全流程、留下可检查的调用证据：frontend-design 先定有品牌差异性的视觉方向，ui-ux-pro-max 把方向编撰成设计系统并对可访问性/触控等硬约束校验，impeccable 做设计审查与反模式检测并盯着修复。你不需要知道三个上游各自怎么调。 ## 三个上游依赖（必需，非可选） diff --git a/skills/le-app-design/SKILL.md b/skills/le-app-design/SKILL.md index 59e98c8..b2f631b 100644 --- a/skills/le-app-design/SKILL.md +++ b/skills/le-app-design/SKILL.md @@ -1,12 +1,12 @@ --- name: le-app-design description: | - Le App Design —— 统一 App 设计工坊：只叫这一个名字，自动完成「产品理解 → 设计规范 → 视觉探索 → Web 高保真原型 → 设计审查 → 优化迭代 → 交付」。底层真实集成并调用三个上游 Skill——ui-ux-pro-max（设计规范/UX 数据检索引擎）、frontend-design（视觉创意与品牌差异化）、impeccable（设计审查/精修/反模式检测）；本 Skill 只做依赖检测、任务分配、执行协调与质量控制，绝不替代三者任何能力。 + Le App Design —— 统一 App 设计工坊：只叫这一个名字，自动完成「产品理解 → 视觉探索 → 设计规范 → Web 高保真原型 → 设计审查 → 优化迭代 → 交付」。底层真实集成并调用三个上游 Skill——frontend-design（视觉创意与品牌差异化，先定方向）、ui-ux-pro-max（设计规范系统化与 UX 硬约束校验，后编系统）、impeccable（设计审查/精修/反模式检测）；本 Skill 只做依赖检测、任务分配、执行协调与质量控制，绝不替代三者任何能力。 何时触发：想要完整的 App / 产品 UI 设计流程——"帮我设计一个 App""做一个高保真原型""从想法到可交互原型""给这个产品做 UI 设计和原型""design an app"；或指定若干界面做设计——"把首页和详情页这些界面设计出来""做移动端的页面/界面设计""App 界面改版"。 不要触发：点名单个上游 Skill 的直接请求（直连该上游即可）；写作与排版类任务；单张配图生成；纯功能开发与排障（无设计诉求）。 metadata: author: Leroy - version: 1.0.0 + version: 1.1.0 runtimes: zcode, claude-code, codex, opencode requires: - "ui-ux-pro-max (MIT, nextlevelbuilder/ui-ux-pro-max-skill)" @@ -52,30 +52,36 @@ python3 /scripts/check_deps.py --out /deps.json 产出 `/BRIEF.md`：产品是什么、给谁、核心任务、平台与形态（移动 Web / 桌面 / 响应式）、impeccable 四模式归属（Persuade / Operate / Read / Experience）。brief 信息不足且影响方向 → 问用户；足够 → 写明假设直接做。 -### S2 设计规范 — ui-ux-pro-max - -```bash -python3 /scripts/log_call.py ui-ux-pro-max --run-dir -- \ - python3 /scripts/search.py "<产品类型 关键词>" --design-system --persist -p "<项目名>" --output-dir <项目根> -``` - -产出 `design-system//MASTER.md`。按需补 `--domain ux|typography|color|landing`、`--stack <栈>` 定向检索（每次都走 log_call）。规范冲突时本阶段数据优先于直觉。 - -### S3 视觉探索 — frontend-design +### S2 视觉探索 — frontend-design（方向先行） 1. 宿主有 Skill 工具（ZCode / Claude Code）→ 用它装载 `frontend-design`；没有 → Read `/SKILL.md` 全文进上下文（一等路径，不是降级）。 2. 装载后立即记账：`python3 /scripts/log_call.py frontend-design --run-dir --load /SKILL.md` -3. 按其「两遍法」产出 `/design-plan.md`：色板（4–6 个具名 hex）、字体与角色、布局概念（一句话 + ASCII）、设计原则；对照它的 AI 味特征清单逐条自检，修订要写明改了什么、为什么。 -4. 与 S2 的 MASTER.md 冲突时按上方裁决表处理，冲突与裁决记入 design-plan.md 的「决策记录」节。 +3. 按其「两遍法」产出 `/design-plan.md`：从题材世界出发定艺术方向——色板（4–6 个具名 hex）、字体与角色、布局概念（一句话 + ASCII）、设计原则；对照它的 AI 味特征清单逐条自检，修订写明改了什么、为什么。**此时不看任何品类匹配结果——方向由题材与 POV 决定，不由目录里有什么决定。** +4. （可选调研模式）方向成形前可用 pro-max 的 `--domain style|color|typography` 检索选项当情绪板（经 log_call 记账、note 标 S2-research）——只供参考，不做决定，不生成 MASTER。 + +### S3 设计规范 — ui-ux-pro-max（系统后行） + +方向已定，本阶段把它**编撰**成可执行的规范并对硬约束校验： + +```bash +# 用已定方向的关键词驱动系统生成（不是品类词），dials 按方向调 +python3 /scripts/log_call.py ui-ux-pro-max --run-dir --note S3-design-system -- \ + python3 /scripts/search.py "<方向关键词，如 exercise-book hand-drawn sticker>" \ + --design-system --persist -p "<项目名>" --output-dir <项目根> +``` + +两条规则： +- **硬约束否决权**：frontend-design 定的 hex/字号若对比度、触控、平台规范不达标，以 pro-max 数据（WCAG/HIG/MD）为准**改值不改方向**；逐项校验（`--domain ux`、`--domain typography` 等）全部经 log_call。 +- **目录回弹降级**：若 pro-max 风格目录（51 个活跃风格）对已定方向匹配失败——生成结果明显回弹到品类默认——则**不采用该 MASTER**，降级为「design-plan 的 token 表即规范 + pro-max 逐项校验补硬约束」，在 design-plan 决策记录里写明降级与理由。方向的独特性优先于系统的便利性。 ### 停点 1（回合终止点） -向用户展示 BRIEF + MASTER 要点 + design-plan，等确认或调整后再进构建。用户已明确说「一口气跑完」→ 豁免本停点，继续。**本停点必须终止回合等待用户，不得自答自继续。** +向用户展示 BRIEF + design-plan（设计方向）+ MASTER 要点或降级说明，等确认或调整后再进构建。用户已明确说「一口气跑完」→ 豁免本停点，继续。**本停点必须终止回合等待用户，不得自答自继续。** ### S4 高保真构建 1. Read `/reference/craft-floor.md`（impeccable 施工底线，装载即调用）并记账 `log_call.py impeccable --load <该文件>`。 -2. 照 MASTER.md tokens + design-plan 写可运行、可交互的 Web 原型（默认单文件或多文件 HTML/CSS/JS，无构建链）。 +2. 照规范 tokens（MASTER.md，或 S3 降级时的 design-plan token 表）+ design-plan 写可运行、可交互的 Web 原型（默认单文件或多文件 HTML/CSS/JS，无构建链）。 3. headless Chrome 截图核对（375/390 移动档 + 桌面档），按 craft-floor「一次看一批」原则修完再截。 ### S5 设计审查 — impeccable @@ -87,7 +93,7 @@ python3 /scripts/log_call.py ui-ux-pro-max --run-dir -- \ ### 停点 2（回合终止点） -展示审查报告，与用户确认修复范围（全部 / Top 3 / 仅 P0-P1）再进 S6。「一口气跑完」豁免同上。 +展示审查报告，与用户确认修复范围（全部 / Top 3 / 仅 P0-P1）再进 S6。「一口气跑完」豁免同上；**豁免时默认修复范围为 P0+P1，且审查报告末尾必须补字面行 `Questions skipped: 停点2经用户豁免（默认修复 P0+P1）`——这是 impeccable critique 契约的收尾要求，漏了即该次 critique 不完整。** ### S6 优化迭代 @@ -105,7 +111,7 @@ python3 /scripts/evidence_report.py --run-dir --out /INTEGRATI ## 轻量任务路由 - **仅审查/体检**（「帮我审一下这个原型的设计」）：S0 → S5（→停点2）→ S6 → S7。 -- **局部修改**（「把这个页面间距调好」）：S0 → 若涉及视觉决策走 S3 快速版 → S4′（craft-floor 装载后施工）→ S5′（detect+复截）→ S7。 +- **局部修改**（「把这个页面间距调好」）：S0 → 若涉及视觉决策走 S2 快速版 → S4′（craft-floor 装载后施工）→ S5′（detect+复截）→ S7。 - 三上游经 check_deps 解析后始终可调用；轻量路由是省阶段，不是换实现。 ## 失败模式与停手点 diff --git a/skills/le-app-design/references/pipeline.md b/skills/le-app-design/references/pipeline.md index 910c8e3..3ac1c75 100644 --- a/skills/le-app-design/references/pipeline.md +++ b/skills/le-app-design/references/pipeline.md @@ -27,46 +27,46 @@ python3 /scripts/check_deps.py --out /deps.json **验收**：BRIEF.md 落盘，模式归属有理由。 -## S2 设计规范 — ui-ux-pro-max +## S2 视觉探索 — frontend-design（方向先行） **动作** -```bash -# 主调用：生成并持久化设计系统（MASTER.md 是后续 token 的唯一来源） -python3 /scripts/log_call.py ui-ux-pro-max --run-dir --note S2-design-system -- \ - python3 /scripts/search.py "<产品类型> <行业> <2-3 风格关键词>" \ - --design-system --persist -p "<项目名>" --output-dir <项目根> +1. 宿主有 Skill 工具 → 调它装载 `frontend-design`；没有 → Read `/SKILL.md` 全文（两路等价，装载即调用）。 +2. 立即记账：`python3 /scripts/log_call.py frontend-design --run-dir --note S2-load --load /SKILL.md` +3. 以其「设计总监」立场产出 `/design-plan.md`： + - **题材世界**：从产品自己的世界取材（subject matter 是差异化来源），写明方向一句话 + - **色板**：4–6 个具名 hex（`--纸面 #FDFDF8` 式命名） + - **字体**：选型 + 角色，说明为何不是默认脸 + - **布局**：一句话概念 + 每屏 ASCII 线框 + 对齐策略 + - **原则**：这个产品独有的 3–5 条 + - **两遍法第二遍**：对照其「AI 味特征清单」逐条自检；发现默认味 → 写明改了什么、为什么 +4. （可选调研模式）方向成形前可用 pro-max `--domain style|color|typography` 检索选项当情绪板（记账 note=S2-research）——**只供参考不做决定**，此阶段禁止 `--design-system`。 -# 定向补充（按需，每次独立记账）： -python3 /scripts/log_call.py ui-ux-pro-max --run-dir --note S2-ux -- \ - python3 /scripts/search.py "<关注点，如 bottom nav touch target>" --domain ux -python3 /scripts/log_call.py ui-ux-pro-max --run-dir --note S2-stack -- \ - python3 /scripts/search.py "<实现关键词>" --stack html-tailwind +**验收**：design-plan.md 四要素齐全 + 自检一节存在 + 记账在案；方向不来自品类匹配。 + +## S3 设计规范 — ui-ux-pro-max（系统后行） + +**动作**：把已定方向编撰成规范 + 硬约束校验： + +```bash +# 主调用：用方向关键词（不是品类词）驱动系统生成；dials 按方向调 +python3 /scripts/log_call.py ui-ux-pro-max --run-dir --note S3-design-system -- \ + python3 /scripts/search.py "<方向关键词>" --design-system --persist \ + -p "<项目名>" --output-dir <项目根> [--variance N --motion N --density N] + +# 硬约束校验（按需，全部记账）：对比度/触控/排版/相关 UX 规则 +python3 /scripts/log_call.py ui-ux-pro-max --run-dir --note S3-ux-check -- \ + python3 /scripts/search.py "<如 contrast touch target>" --domain ux ``` -遵守上游 Query Contract：一次查询一个主导意图、2–5 个有效词；结果空/跑题重试一次更窄的写法，再不行如实说「无验证匹配」。 +**两条规则**： +- **硬约束否决权**：frontend-design 定的 hex/字号若不达标（WCAG/HIG/MD 数据为准），**改值不改方向**；每处修改记入 design-plan 决策记录。 +- **目录回弹降级**：pro-max 风格目录（51 个活跃风格）若对已定方向匹配失败——生成结果明显回弹到品类默认（拿 tell 清单对：cream 底、默认靛蓝、SaaS 卡组等）——则**不采用该 MASTER**，降级为「design-plan 的 token 表即规范 + pro-max 逐项校验补硬约束」，决策记录写明降级理由。方向的独特性优先于系统的便利性。 -**产物**：`<项目根>/design-system//MASTER.md`（+ 查询输出摘要）。 - -**验收**：MASTER.md 存在且 calls.jsonl 有 exit=0 的 S2 记录。已有 MASTER.md 时上游默认跳过覆盖——读它再决定是否需要 `--force`（须用户同意）。 - -## S3 视觉探索 — frontend-design - -**动作** -1. 宿主有 Skill 工具 → 调它装载 `frontend-design`；没有 → Read `/SKILL.md` 全文（两路等价，后者不是降级——装载即调用）。 -2. 立即记账：`python3 /scripts/log_call.py frontend-design --run-dir --note S3-load --load /SKILL.md` -3. 以其「设计总监」立场产出 `/design-plan.md`： - - **色板**：4–6 个具名 hex（`--bg-deep #0E1B2C` 这样命名） - - **字体**：选型 + 各自角色（display/body/数字…），说明为何不是默认脸 - - **布局**：一句话概念 + 每屏 ASCII 线框 + 对齐策略 - - **原则**：这个产品独有的 3–5 条，从题材世界取材（frontend-design：subject matter 是差异化来源） - - **两遍法第二遍**：对照其「AI 味特征清单」（cream+terracotta、暗底酸绿、报纸 hairline、SaaS 卡片套件、eyebrow/中点连接串等）逐条自检；发现默认味 → 写明改了什么、为什么 - - **决策记录**：与 MASTER.md 的冲突及裁决（按 SKILL.md 裁决表：a11y/触控/平台规则 pro-max 赢；美学自由轴 frontend-design 赢；craft-floor ban 红线） - -**验收**：design-plan.md 四要素齐全 + 自检一节存在 + 记账在案。 +**验收**：MASTER.md 存在且与方向一致，或降级路径已记录；校验检索在账本；design-plan 决策记录含 S3 的改值/降级条目。 ## 停点 1 -把 BRIEF（要点）、MASTER（风格/色/字/反模式摘要）、design-plan（ASCII + 色板 + 原则 + 决策记录）展示给用户，明确请求确认或调整意见，**终止回合**。用户豁免（已说「一口气跑完」）→ 跳过继续。 +把 BRIEF（要点）、design-plan（方向 + ASCII + 色板 + 原则）、MASTER 要点或 S3 降级说明展示给用户，明确请求确认或调整意见，**终止回合**。用户豁免（已说「一口气跑完」）→ 跳过继续。 ## S4 高保真构建 @@ -74,7 +74,7 @@ python3 /scripts/log_call.py ui-ux-pro-max --run-dir --note S2-stac 1. Read `/reference/craft-floor.md` 并记账： `python3 /scripts/log_call.py impeccable --run-dir --note S4-craft-floor --load /reference/craft-floor.md` 2. 构建：默认无构建链的 HTML/CSS/JS（单文件优先，可拆 CSS/JS 文件）。硬性要求： - - token 全部来自 MASTER.md（色/字/间距/圆角/阴影），不发明 system token 之外的美学量 + - token 来自 MASTER.md（或降级时的 design-plan token 表），不发明规范之外的美学量 - 布局与个性按 design-plan；SVG 图标（真图标库或手绘一致笔画），禁 emoji 图标 - craft-floor 全条目施工时遵守（尤其：eyebrow 是 ban；嵌套卡片必错；elevation 声明一次；浏览器表面——selection/caret/scrollbar/focus ring/表格数字——要从色板定制） - 交互真实可用（点击/切换/滚动行为写 JS），不是静态画片 @@ -114,7 +114,7 @@ python3 /scripts/log_call.py ui-ux-pro-max --run-dir --note S2-stac ## 停点 2 -展示审查报告，给结构化选项请用户定修复范围：全部 / Top 3 / 仅 P0–P1 / 保持现状。**终止回合**；豁免规则同停点 1（豁免时默认修 P0+P1）。 +展示审查报告，给结构化选项请用户定修复范围：全部 / Top 3 / 仅 P0–P1 / 保持现状。**终止回合**；豁免规则同停点 1（豁免时默认修 P0+P1，并在审查报告末尾补字面行 `Questions skipped: 停点2经用户豁免（默认修复 P0+P1）`，满足 impeccable critique 的收尾契约）。 ## S6 优化迭代