# Design Workflow > 通用设计工作流——五层顺序执行模型。按「第一层 场景 → 第二层 感知物料 → 第三层 形式组织 → 第四层 信息叙事 → 第五层 主观输出」逐层操作；各层为可编辑模块（场景层合并为单文件，其余层按子位置分文件）。支持三种调用模式：领域适配（默认）/ 吸睛 / AI自主。专项方法论（数据图表/图形字/图标批量/照片手绘线稿/前端设计/移动端 App/隐喻统摄叙事长页）已抽离为 subskills/ 子技能，按载体/任务特征路由。当需要按流程一步步构思/审视设计时触发。触发词：「设计工作流」「五层设计」「按流程做设计」「逐层设计」「帮我搭设计」「灵感」「随机种子」。 - Skill: `yang20040317-svg/design-workflow` (Agent Skill, multi-file: 6 files) - Install (CLI): `npx skillmds@latest add yang20040317-svg/design-workflow` - Raw SKILL.md: https://api.skillmd.com/api/skills/yang20040317-svg/design-workflow/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Productivity - Author: yang20040317-svg (https://skillmd.com/u/yang20040317-svg) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/yang20040317-svg/design-workflow --- # design-workflow ｜ 五层顺序设计工作流 这是一个**操作型工作流**，不是分析框架。按顺序一步步走： ``` 第 1 步 第一层 场景 → 先把前提与边界定清楚 ↓ 做完才进下一步 第 2 步 第二层 感知物料 → 准备要用的原材料 ↓ 第 3 步 第三层 形式组织 → 把材料排成结构 ↓ 第 4 步 第四层 信息叙事 → 让结构承载意义 ↓ 第 5 步 第五层 主观输出 → 验收受众最终体验 ``` ## 调用模式（三种） 本工作流支持三种「调用模式」。动手前先选定一种——它改变五层流水线的**强调权重、门控松紧、与外部技能 / 探索行为的耦合方式**，但都走同一条「场景 → 感知物料 → 形式组织 → 信息叙事 → 主观输出」五层线。 | 模式 | 一句话定位 | 何时用 | 默认 | |---|---|---|---| | 1 领域适配 | 按载体门控，稳健落地 | 绝大多数常规设计任务，尤其有明确载体 / 平台 / 产出物时 | ✅ 默认 | | 2 吸睛 | 抓眼球 / 强传播，借独特品味 | 传播 / 营销 / 社媒 / 需要强记忆点的设计 | 待设计 | | 3 AI自主 | AI 主导，探索前沿方向 | 探索性 / 实验性 / 想看 AI 跑出非预期方案时 | — | ### 模式 1 ｜ 领域适配（默认） - **已内建**：载体门控逻辑见 `modules/01-场景.md` 小节 1 第 5 步「领域适配（载体门控）」表。 - 行为：第 1 步确定载体后，按表路由第 2–5 层子位置（核心 / 条件适用 / 跳过）；门控为软门控，特例出现即转「条件适用」。 - 最稳健稳妥：沿用硬闸门约定，不确定处先问用户再继续。 - **载体风格参考**：当载体门控判定走 **UI 数字产品 / 图片海报（平面）** 时，可查 `references/UI风格适配参考.md` 取风格关键词作为第 2–5 层方向输入。 - **参考检索（本模式强制前置）**：第 1 层 brief 定稿后、进第 2 层前，**必须**自动调用 `subskills/design-reference-sourcing` 去参考站找「对应的设计」作本次设计依据——按 brief 的载体 + 风格方向检索，抓回后按红点笔记协议提炼（色板/字体/构图/动效规律）注入第 2 层对应子位置，作为第 2–5 层的硬性约束。用户不需要开口说「找参考」。检索不到（网络受限/无匹配）→ 声明 `UNREFERENCED`，按常规设计默认值推进（不调用模式 2 的 taste-profiles 品味基线），不阻塞流程。 - **交付硬闸门（本模式强制）**：第 5 层完稿后、给人看之前，过三关——形式自检 → 独立评论家 → 交付剔除；**三关全过才允许交付**，任何一关没过打回对应层修正，**不许带着形式缺陷给人看**。 - **① 形式自检（C 段三动作）**：缩略图 25% / 眯眼 8px 模糊 / 倒转（见 `references/审美精度标准.md` C 段）。纯视觉检查，对着成品图 5 秒跑完、不需要浏览器。 - **② 独立设计评论家（子智能体·截图评分）**：形式自检过后，把成品**渲染成截图**，交给一个**全新上下文的独立子智能体**当评论家——**只给截图，不给代码 / 实现细节 / 早期迭代记录**（自评无效：模型不客观、会替自己代码找理由，必须换独立上下文）。让它设想一家顶级设计工作室会如何执行本美学方向，列出最大差距，打 **0–10 分**；**独立评到 9 分及以上才算交付**，否则按差距打回第 2–5 层修正后重评。评分标准要客观：宏观结构 + 微观细节 + 是否显 AI slop 并扣分；给精准、有主见的具体反馈，不写安全套话。**阈值 9 分不要写进评论家提示词**，评分时它须客观。 - **③ 交付剔除（逐屏减）**：交付前逐屏问"这个元素有没有存在的必要"。优先砍：模糊光晕 / 渐变填充 / 随机上色 / 多余标签 / 多余容器 / 本可用原生组件却自造的部件——能用原生就用原生。AI 爱加不爱减，删是交付的一部分，不是可选项。 - **灵感（关键词：灵感 / 随机种子 / inspiration seed）**：无外部参考、或想主动跳出"AI 默认观感"逼出非预期方向时，用一段随机数派生设计方向（不依赖参考站，与上方参考检索互补，**不替代五层**）。三步：① `shell` 生成长随机字母数字串——**仅作灵感，不展示在成品 / 不进聊天 / 不进页面，跑完即弃**；② 深挖子模式：串长、数字/字母/元音计数、数字和、首个/末个数字位序、特殊数字（0/1/3/7）出现次数、字母↔数字切换次数（变奏密度）、最长连续重复、连续同类最长串，并取若干字符 ASCII 映射派生 3–4 个色相；③ 把派生量翻译成五层决策（色相→配色、首个数字靠前→左重非对称、切换多→疏密交替段数、特殊数字→栏数 / 签名色次数、数字和→签名方块倾角、串长→栅格列数），凭判断落地。约束：**派生量→设计决策须可解释，不可凭空编结论**；成品严禁出现种子串；可作模式 1 冷启动探索，也可在模式 3 AI自主 当"反共识方向种子"。 - **逼出真视觉（技巧 04/05 · 定义阶段）**：编码智能体爱用渐变 / 色块 / 基础图形糊弄过去（典型 AI 设计痕迹），须逼它用生成工具出真料。① **图像生成（04）**：凡需主视觉 / 插画 / 材质 / 过场画面处，须用图像生成产出真图，**不得用纯色渐变或色块占位**；本环境用 ImageGen（先定统一世界观/主角/调色板再批量生成，保证多图同世界）。② **视频生成（05，可选增强）**：做更高级动态——生成纯色背景循环视频抠像叠 UI，或用视频模型在两静帧间插值做滚动逐帧过渡；本环境用 VideoGen。两条都守**零外部运行时**：生成物内联 base64 / 本地落位，不引 CDN；并过 ③ 交付剔除（砍掉无价值的装饰动效）。 ### 模式 2 ｜ 吸睛（注入独特品味） - 定位：面向「抓眼球、强传播、强记忆点」目标，激活子技能 **`design-taste`（独特品味档案容器，本工作流内建）** 注入独特审美判断与反套路手法。 - 行为差异（相对模式 1）： - 从 `design-taste/taste-profiles/` **选取** 品味实例（当前仅 `athens-week`：用户定义的 排版 / 交互 / 颜色 三维；参考图事实与品味档位分离，见 `subskills/design-taste/`），作为第 3、4、5 层的**强约束**，而非中性默认。 - 选取后**先对照实例的 `references` 参考图**再产出，保证视觉一致。 - 反套路底线：任何产出不得滑回"AI 默认观感"（暖米白+衬线+陶土橙等通用组合）。 - 记忆点唯一：强调色 / signature 元素沿所选 profile 走，全站一致。 - 本体（容器协议 + 实例）已内建：`subskills/design-taste/`（SKILL.md 定义 schema / 选取组合 / 落地检查，`taste-profiles/` 装实例与参考图）。约束权重见该子技能「四、接入模式 2 的约束权重」。 - 红线不变：客观约束（版权 / 合规 / 平台规则 / 预算）仍硬卡，吸睛不越过。 - **品味基线专属本模式**：`design-taste` / `taste-profiles` 是你的审美基线，**仅在本模式激活**；模式 1 用参考站做常规设计，绝不调用 taste-profiles。 - **02 是通用技巧，可借本模式品味**：技巧 02（具体 brief · 见场景层）是普适原则，模式 1、模式 2 都能用；**本模式使用 02 时，可叠加 `taste-profiles` 作为品味 / 参考来源**——但这属于模式 2 自身行为。02 本身不引用 `taste-profiles`，也绝不把本模式品味带进模式 1。 ### 模式 3 ｜ AI自主（前沿探索） - 定位：AI 主导、用户少干预，用来**探索前沿 / 实验性设计方向**，主动产出非预期的视觉与结构方案供用户挑选。 - 行为差异（相对模式 1）： - 第 1 步场景可只给「方向 / 主题 / 氛围词」，不必等全部约束齐备即开跑； - 允许**主动打破常规门控**：合理范围内引入非常规材料、形式、混搭，不自动套用「跳过」； - 第 2–5 层由 AI 自主提案，每个关键决策附「为什么 + 备选」； - 产出**多方案对比**（≥2 个方向）而非单一收敛结果，交用户裁决； - 优先引用 `references/` 与跨界前沿案例作灵感。 - 红线不变：客观约束（版权 / 合规 / 平台规则 / 预算）仍硬卡，AI 自主不越过。 **关键约定**： - 五层**顺序执行**，上一层做完再做下一层；中途发现上层问题可回退修正。 - 各层为可编辑模块：**场景层合并为单文件** `modules/01-场景.md`（5 个小节）；其余层按子位置分文件（如 `modules/02-感知物料/文字.md`），可单独编写维护。 - 子位置文件是各层的完整可编辑源；本 SKILL.md 是工作流总控与索引。 ## 工作流步骤与子位置 ### 第 1 步 ｜ 第一层 场景（前提 / 边界）—— 硬闸门，问清前不动手 决定设计在哪里、给谁、为了什么、被什么限制。**本步没完全搞清楚前，禁止进入第 2 步，也禁止做任何视觉产出；任何不确定处必须先问用户。**（详见 `modules/01-场景.md` 进场闸门） - `modules/01-场景.md` — 合并模块（小节：载体·环境·上下文·客观约束） - 载体：物理/数字媒介（屏幕/印刷/空间/产品/3D虚拟），画布尺寸分辨率格式；**载体小节内含「领域适配（载体门控）」表，按载体路由第 2–5 层子位置（核心/条件适用/跳过）**；**交付形态判定（载体小节 4.6）：本技能只做设计，交付设计稿/原型，可运行应用归工程线（ae-factory），不在本技能内做工程化** - 环境：使用情境（光线/噪声/移动/公众性） - 上下文：业务/文化/时序背景 - 客观约束：版权/合规/平台规则/预算工期（红线） - 审美意图卡：3 主感觉词 + 1 视觉对标 + 1 破格点（第 1 层收口，第 2 层的审美方向盘；详见小节 5） ### 第 2 步 ｜ 第二层 感知物料（原材料 / 词汇表） 准备用户实际感知到的素材。 - `modules/02-感知物料/文字.md` — 字库/字重/字号层级/行距/语气 - `modules/02-感知物料/颜色.md` — 色板/取色于画面/撞色点缀 - `modules/02-感知物料/图片.md` — 摄影插画/装饰元素选材/裁切版权 - `modules/02-感知物料/动画.md` - `modules/02-感知物料/纹理.md` — 质感/材质融入/肌理颗粒 - `modules/02-感知物料/模型.md` ### 第 3 步 ｜ 第三层 形式组织（语法 / 结构） 把物料排成有秩序的结构。 - `modules/03-形式组织/空间.md` — 留白/呼吸感/层级间距/正负空间 - `modules/03-形式组织/关系.md` — 对齐/重复/对比/亲密性/视觉权重 - `modules/03-形式组织/排版构图.md` — 网格/构图法则/视觉流向；信息字块布局与层级（沿轮廓·遮挡·投影随光·重细对比·线框分区·点缀补白·装饰放次层） - `modules/03-形式组织/镜头布局.md` — 视角/景别/运镜/景深 ### 第 4 步 ｜ 第四层 信息叙事（意义 / 策略） 让形式承载意义。 - `modules/04-信息叙事/信息优先级.md` — 主/次/辅权重 - `modules/04-信息叙事/故事逻辑.md` — 阅读/体验顺序 - `modules/04-信息叙事/表达意图.md` — 知道/感受/做 ### 第 5 步 ｜ 第五层 主观输出（体验 / 验收） 受众最终的内在体验，是流程的验收端。 - `modules/05-主观输出/感觉.md` — 即时感官印象 - `modules/05-主观输出/情绪.md` — 被唤起的情绪 - `modules/05-主观输出/心理体验.md` — 共鸣/认同/行动欲 ### 各层交叉资产（已并入子位置文件） 下列通用方法论已吸收进对应子位置文件（不再单列节点，避免破坏"Layer1–5"结构）： - **读图卡片 / 抽象化地图、色彩结构引擎（加色构成法）、插画形式语法 / 微文字、边界触感**（拾景 zine 纸刊风配套）→ **已抽离为专项子技能** `subskills/design-photo-sketch`（第四部分；原分散于 01-场景 / 颜色 / 排版构图 / 纹理，现统一归位）。来源署名见 `references/来源署名/Zeejay0-gathered-scenes-zine.md`（个人非商业许可）。 - **表达链路（命题→张力→隐喻→留白）** → `04-信息叙事/表达意图.md` 末尾「补充」（通用，保留） - **完稿验收清单** → `05-主观输出/感觉.md` 末尾「补充」（通用，保留） - **社交卡片类通用规则**（越大越细 / 双字体系统 / 满铺图安静区避让 / 版式选型优先 / 密度横带规则 / 动态素材首帧合格静态卡 / 技术校验清单）→ 已拆分并入 文字 / 图片 / 排版构图 / 感觉 / 01-场景 各子位置「补充」段（来源署名见 `references/来源署名/op7418-guizang-social-card.md`）。 - **前端设计通用原则**（结构装置即信息 / 反模板校准·避免 AI 默认观感 / 复杂度匹配愿景 / 文案即物料·UX 写作 / 动效编排时刻 / 动效语义与具体手法）→ **已抽离为专项子技能** `subskills/design-frontend`（完整内容见该子技能 SKILL.md，来源署名见 `references/来源署名/anthropics-frontend-design.md`）。 - **照片 + 手绘线稿叠加 / 实况图 live photo draw-on / 照片读图与抽象化**（照片为基·线稿为第二叙事层 / 覆盖 15–35% 示例 / 自动线稿提取适用图边界 / live photo draw-on 动画 / 读图卡片 Scene/Distillation / 抽象化地图 / 手绘线条质感）→ **已抽离为专项子技能** `subskills/design-photo-sketch`（完整内容见该子技能 SKILL.md，来源署名见 `references/来源署名/照片手绘线稿叠加法.md` 与 `references/来源署名/Zeejay0-gathered-scenes-zine.md`，可运行脚本 `references/live_photo_drawon_recipe.py`）。 - **图标/图形符号设计 + AI 生图透明背景与抠图 + 批量素材生产方法论**（图标套系一致性 / 共享网格·线宽·圆角·视觉权重 / 多尺寸可读 / 具象名词 prompt / 背景色键控·去溢色居中 / 网格批量+逐格兜底+风格锚点验证门控 / 对称翻转复用）→ **已抽离为专项子技能** `subskills/design-icon-batch`（完整内容见该子技能 SKILL.md，来源署名见 `references/来源署名/huashu-icon-set.md`，可运行工具 `references/chroma_key.py`、`references/slice_grid.py`）。 - **图形字设计（合字共生 / pictogram typography）**（以字寄形 / 共墨同笔触感 / 共享笔画 1–2 处 / 墨朱三色制 / 图形占比 30–60% / 印章为完成印 / 系列化延展）→ **已抽离为专项子技能** `subskills/design-typographic-glyph`（完整内容见该子技能 SKILL.md）。 - **数据可视化图表叙事（图表品味法典通用化）**（数据形状选图主键 / 一张图一个独立结论 / 标题写结论不写图型名 / 细读型 vs 快读型 / 视觉编码诚实性 / 色彩语义 / 交互三问 / 敢于说不 / 图表交付自检 13 项）→ **已抽离为专项子技能** `subskills/design-chart`（完整内容见该子技能 SKILL.md，来源署名见 `references/来源署名/lieflat-charts.md`）。 - **扁平 grid vs wrapper 容器（同级别并列元素的两种关系形态）**（判据三问：是否真从属于父概念 / 会不会"被框住" / 是否真需要分组归属视觉提示；4 列扁平 card-grid 直接铺写法实现要点；每卡配内联 SVG/`.bottle-art` 视觉锚点）→ 已吸收进 `modules/03-形式组织/关系.md` 末尾「补充」（通用方法论，保留）。 - **每页独立持续视觉锚点（多页场景下避免「只有第一页动」）**（全局持续氛围 vs 每页锚点的区分；多种通用做法：持续微动 SVG / 点缀几何 / 章节序号装置 / 数据衍生元素 / 持续滚动动效 / 每章节图腾；与原有「≤3–5 一屏同时运动」规则的合成 = 全页活但不同时躁动；错峰实现要点）→ 已吸收进 `modules/02-感知物料/动画.md` 末尾「补充」（通用方法论，保留）。 - **观者偏好驱动降级（动效与无障碍按需触发）**（公众页/平台/受众不确定 → 默认含 `prefers-reduced-motion` 降级；个人/特定观者 → 制作前先问偏好再决定；关键信息不依赖动效传达为铁律）→ 已吸收进 `modules/02-感知物料/动画.md`「四、关键方法」「自检清单」「补充」三处（通用方法论，按场景触发）。 - **联网找素材做参考（参考源补给线）**（12 个策展源：Pinterest 与爱给网需登录；Cosmos / ArtStation / Behance / Unicorn Studio / Refero Styles / Awwwards / ThreeUI / React Bits / Spline Community / Codrops Creative Hub 开放可直抓；开放源直抓 + 登录源带会话抓取；仅参考不擅发、版权署名合规；**模式 1 默认路径强制前置：brief 定稿后自动检索「对应的设计」并提炼注入 L2**）→ **已抽离为专项子技能** `subskills/design-reference-sourcing`（完整内容见该子技能 SKILL.md，以该子技能所列清单为准）。 - **隐喻统摄的叙事型长页**（单一隐喻统摄信息架构 + 映射覆盖率 ≥80% 判据 / 去隐喻测试；门禁序章四铁律；数据字段的实物替身 + 语义场一致；叠放式缩略预览；极窄色板 + 单点语义化强调色；三字体系统 sans/mono/display；长页 reveal 错峰 +60ms；固定底栏渐进模糊；长文 gutter 章节标签；收尾落在"人"上；重型效果前置能力检测）→ **已抽离为专项子技能** `subskills/design-metaphor-narrative`（完整内容见该子技能 SKILL.md；其中「极窄色板 + 单点强调色」要点并入 `02-感知物料/颜色.md`、「三字体系统」并入 `02-感知物料/文字.md`、「reveal 错峰 + 底栏渐进模糊 + 能力检测」并入 `02-感知物料/动画.md`、「字段实物替身 + 叠放缩略」并入 `03-形式组织/关系.md`、「隐喻统摄 + 门禁序章 + 收尾落人」并入 `04-信息叙事/故事逻辑.md`）。来源署名与吸收边界见 `references/来源署名/MikeBarton-mikes-cv.md`（无公开授权；硬红线只卡具体执行物：素材/字体文件/文案/代码，通用母题与通用技法不设限，另设「整体近似度自检」兜底）。 - **审美精度标准**（新增 `references/审美精度标准.md`）：补齐「不出错」到「好看」之间缺失的**精度层**。三段——**A 感觉词 → 参数映射表**（把第 1 层审美意图卡的形容词翻译成字号阶梯比 / 灰度层级 / 间距倍率 / 字重对比 / 细节密度，含反向校验）、**B 精度标准 8 条**（字号阶梯 1.2–3、**大字号反向收紧字距** −0.02~−0.04em、行高反向补偿、灰度 ≥4 级、**间距等比非等差**、圆角/线宽/阴影同源、对齐挂网 ≥80%、放大 200% 近看有东西）、**C 三个物理验收动作**（缩略图 25% 看三级 / 眯眼看剩 3–5 个重量块 / 倒转看纯形式平衡）。已接线：`01-场景.md` 审美意图卡（A 段，含自检项）、`03-空间.md` 间距与对齐（B 段）、`03-排版构图.md` 落位精度（B 段）、`05-感觉.md` 完稿验收（C 段，**先形式后硬伤**）。 - 与既有资产的分工（避免重复）：**方向**由审美意图卡定 → **精度**由本文件保 → **记忆点**由惊艳手法库给 → **硬伤**由技术校验兜。缺任何一段都会产出"能看但不好看"的东西。 - **通用质量底线验收表（impeccable 确定性反模式检测，已通用化）** → `references/审美精度标准.md` 末尾「补充 · 验收反模式表」：只收**质量硬底线**（功能文字 ≥11px / 正文 ≥14px / body 不用宽字距）+ 精选 slop 提示（过度通用字体 / 编号小节标签 / 径向光晕，冲突项标「用户可覆盖」）。受 [impeccable](https://github.com/pbakaus/impeccable)（Paul Bakaus, Apache-2.0）启发，已通用化重写，未引入其私有 IP；不与 `design-taste`（模式2 个人品味）冲突。 - **交互工程动效对错清单**（transition:all 禁止 / scale(0) 禁止 / ease-in 入场禁止 / transform-origin 锚定触发器 / 键盘操作不动效 / hover 媒体查询门控 / UI 时长 ≤300ms / 三根自定义曲线 / spring 配置 / Review 三列格式）→ **已并入专项子技能** `subskills/design-frontend` 第八节（**仅功能型产品 UI / APP 交互组件适用**；设计感网页 / 海报 / 叙事长页不套用，走 `动画.md` 数量预算+破格 与 `惊艳手法库`）。来源署名见 `references/来源署名/emilkowalski-skills.md`。 - **动效决策门控 + 存量审计工作流 + 组件选型纪律**（动效目的 6 类命名门控 / "命名不出就不做" + Delight 仅限罕见层级 / "先门控后参数"的顺序纪律 / 对已有代码库做八维动效审计并产出自包含修复计划 / 先按任务语义选型、优先成熟库而非手写 div 组件）→ **增量补充进** `subskills/design-frontend` 第八节「决策顺序与目的门控」与末尾「补充 · 动效审计与组件选型纪律」（本次新增，去 IP 通用化；与既有动效对错清单、频率门控构成「该不该做 → 做对没有 → 存量体检」完整链路）。来源署名见 `references/来源署名/emilkowalski-skills.md`。 - **GSAP 落地参考（库专用 · 仅 GSAP 载体时调用）**：吸收自 greensock/gsap-skills（官方 GSAP AI 技能集，MIT），去名化为「易错纪律 + 关键 API 骨架」，作为 `subskills/design-frontend` 末尾「补充 · GSAP 落地参考」段（**不新建节点**、不塞工具清单、具体 API 以官方文档为准）。与第八节通用动效纪律的关系：GSAP 只是实现手段，不豁免设计纪律（该不该动 / 做对没有 / 性能降级仍须先过）。详见 `references/来源署名/greensock-gsap-skills.md`。 - **组件过渡选型参考（CSS 落地 · 仅组件级 CSS 过渡载体时调用）**：吸收自 Jakubantalik/transitions.dev（开源 CSS 过渡库 + agent skill），去名化为「选型纪律 + 命名词汇 + token 体系」三层方法论，作为 `subskills/design-frontend`「补充 · 组件过渡选型参考」段（插在 GSAP 段之前，使动画层顺序为：emilkowalski 决策 → transitions.dev 选型 → gsap 实现；**不新建节点**、不粘贴具体 CSS 片段、具体片段以官方当前版本为准）。核心：先匹配可见 UI 元素再匹配动词、平局按开销取舍（card resize > panel reveal、dropdown > modal、success check > 整模态庆祝）；命名词汇表；共享 Motion Tokens 节奏体系（按用途而非原始数值映射、强制 reduced-motion 守卫、禁 `transition:all`）。详见 `references/来源署名/transitions-dev.md`。 - **视觉验收的双评审闸门 + 冠军/挑战者迭代保护**（**盲视觉 scout**：只拿目标稿/当前/上一版/并排比对图，**禁止**拿意图卡、spec、ID、参数、分数与 builder 辩护，最多给 7 条方向、不打分数不改东西；**主独立评审**：复合相似度分 **且** 逐个关键特征单独过闸 **且** 返回精确数值修正；**关键特征否决制**：总分达标不能掩盖关键特征失败；**冠军/挑战者**：修改只作用于挑战者、失败事务性回滚、连续三次无实质改进即换表示法；**编辑前影响评估**：目标/受保护/结构不变量/副作用/下游影响/回滚点；**禁止**用量化分数替代并排视觉比较、禁止把未观察到的结构写成事实、禁止跨阶段提前施工、检查跑不了须报 `UNVERIFIED`）→ **已并入** `modules/05-主观输出/感觉.md`「补充 · 视觉验收的双评审闸门」（通用，任何有目标稿的视觉产出均适用），并在 `subskills/design-frontend` 自检清单加条件项。来源署名见 `references/来源署名/vinhhien112-img2obj.md`。 - **从参考图到模型的四阶段执行流程**（Blockout 轮廓 → Form 结构 → Lookdev 材质 → Interaction 可动；渐进式规格 = 稳定核心 + 阶段增量，首次渲染前不写满最终规格；唯一权威参考图、合成视图只能否证不能证明、证据范围错配无效、能力分支按需加载）→ **已并入** `modules/02-感知物料/模型.md` 第 5 节（**仅在任务确实要照图做模型时触发**；是否上 3D 仍由该子位置第 1~4 节选型决策判定）。来源署名见 `references/来源署名/vinhhien112-img2obj.md`。 - **来源署名与授权边界**：上述各能力的原始来源、作者、授权与「需剔除元素」清单，已逐源抽离至 `references/来源署名/`（每源一份独立文件）。技能正文只保留通用方法学，不内嵌署名。 ## 怎么用这个工作流 0. **先选调用模式**：见上文「调用模式（三种）」。默认走「模式 1 领域适配」；若目标是强传播选「模式 2 吸睛」（本体为已内建的 `design-taste` 子技能：含 taste-profiles 实例与「四、接入模式 2 的约束权重」）；若想探索前沿选「模式 3 AI自主」。模式决定门控松紧与探索自由度。 1. **从第一步开始**，按顺序逐层推进，不要跳层。**第 1 步（场景）是硬闸门：场景没问清前绝不动手，任何不清楚的地方都要先问用户、拿到明确答复再继续。** 1.5. **参考检索（模式 1 强制，仅模式 1）**：第 1 层 brief 定稿后、进第 2 层前，自动调用 `design-reference-sourcing` 去参考站找「对应的设计」并提炼注入 L2（色板/字体/构图/动效，流程见该子技能「一·补充」）。检索不到 → 声明 `UNREFERENCED`，按常规设计默认值推进（不调用模式 2 的 taste-profiles），不阻塞。模式 2 走 design-taste 参考图、模式 3 自由探索，不套用本强制步。 2. 每进入一层，逐个小节/子位置编辑：**合并层**（场景）在单文件内改对应小节；**拆分层**（2~5）逐个编辑对应子位置文件。 3. 每个子位置文件里有「上一步输入 / 本步要做 / 输出给」三段，帮你接住上游、交付下游。 4. 每层做完用文件内的**自检清单**核对，再进下一层。 5. 若下游发现上游问题，**回退到对应层/子位置**修正，不帯病前进。 6. 第五层验收通过后，整个设计闭环完成；可把各子位置内容汇进本文件留存。 7. **交付前硬闸门（模式 1 强制）**：第 5 层完稿后、给人看之前，**必须先跑 C 段三动作**——缩略图 25% 看主/次/辅三级 → 眯眼（或 8px 高斯模糊）看剩 3–5 个视觉重量块 → 水平翻转看纯形式平衡（详见 `references/审美精度标准.md` C 段）。三动作全过才允许交付给人看；**没过就打回第 2–3 层修正，不许带着形式缺陷交付**。三动作是纯视觉检查，对着成品图 5 秒跑完、不需要浏览器。形式过关后再按需跑技术校验（溢出/密度/字号等，见 `05-主观输出/感觉.md` 技术校验子清单）。截图自检按省流 SOP 走（先静态自检 → 锁命令 → 单次截图 + 关闭校验），详见 `modules/05-主观输出/感觉.md` 双评审闸门补充。 ## 目录结构 ``` design-workflow/ ├── SKILL.md # 本文件：工作流总控 + 索引 ├── 技能结构图谱.html # 技能结构可视化图谱（维护用，模块/子技能一图纵览，与 subskills/ 同步） ├── modules/ # 每层一个可编辑模块（场景层合并为单文件） │ ├── 01-场景.md 载体·环境·上下文·客观约束·审美意图卡（五小节） │ ├── 02-感知物料/ 文字·颜色·图片·动画·纹理·模型 │ ├── 03-形式组织/ 空间·关系·排版构图·镜头布局 │ ├── 04-信息叙事/ 信息优先级·故事逻辑·表达意图 │ └── 05-主观输出/ 感觉·情绪·心理体验 ├── subskills/ # 抽离的专项方法论（按需/按载体路由，不常驻通用流程） │ ├── design-chart/ 数据可视化图表（lieflat-charts） │ ├── design-typographic-glyph/ 图形字/合字共生 │ ├── design-metaphor-narrative/ 隐喻统摄的叙事型长页（作品集/履历/时间轴/产品故事） │ ├── design-icon-batch/ 图标批量生产 + AI抠图（huashu-icon-set）；第九节补充 Icons8 网页实时嵌入（C 路径，需页脚署名） │ ├── design-photo-sketch/ 照片+手绘线稿 / live photo draw-on（线稿叠加法 + Zeejay0） │ ├── design-frontend/ 前端设计通用原则（anthropics） │ ├── design-mobile-app/ 移动端 App 界面/原型专项（结构优先·反移动 slop：拇指热区/safe area/一屏一焦/密度节奏/原生组件语汇/手势版面/生图织结构） │ ├── design-prototype-divergence/ 原型发散（同一 UI 件建 3–5 个真正不同的版本+可视化选择器，探索/模式2吸睛用） │ ├── design-motion-vocabulary/ 动效术语反查词典（模糊动效描述→精确术语，沟通层） │ ├── design-taste/ 独特品味档案容器（模式2吸睛的本体：taste-profiles/ 多实例+参考图） │ ├── design-ip-assets/ 专属视觉资产体系（IP 化：角色/符号/签名色/字体人格/图形语言；内置「三果团」示例，实际使用时整体替换为你的专属 IP） │ └── design-reference-sourcing/ 联网找素材做参考（开放 10 + 登录 2 = 12 源；**模式 1 默认强制前置检索**） └── references/ # 各子位置用到的参考资料/模板（按需补充） ├── 审美精度标准.md # 把「好看」落成数值与动作：A 感觉词→参数映射 / B 精度标准 8 条 / C 三个物理验收动作 ├── 惊艳手法库.md # 造美·进攻性手法（与反模板校准对偶；一轮最多用 1 个） ├── UI风格适配参考.md # UI/平面载体风格适配词库（领域适配可查用参考，非层节点） ├── chroma_key.py # 纯色背景抠图工具（去背景/键控/去溢色/居中/自检），图标·图形生图后处理 ├── slice_grid.py # 网格大图切分工具（等分裁格/逐张自检），配合 chroma_key 使用 ├── live_photo_drawon_recipe.py # 照片+手绘线稿叠加 / live photo draw-on 动画可运行参考脚本 ├── image_gen_prompt_templates.md # 文生图 prompt 模板 └── 来源署名/ # 逐源授权边界（11 份来源 + README 索引，主技能与子技能共用；其中 1 份为无公开授权，按硬红线/自由层/软红线三层处理） ``` ## 专项子技能路由（何时切到 subskills） 本工作流把「通用设计流程」（modules/ 五层）与「专项方法论」（subskills/）分离。**专项方法默认不常驻通用流程**，仅在任务命中下列特征时路由到对应子技能： | 任务特征 | 路由到子技能 | |---|---| | 输入是数据，要"可视化/做几张图/报告" | `design-chart` | | 要"在一个汉字里寄具象图形"（节令物产/品牌字），或"汉字本身是视觉主体而非仅承载信息"（字即图/字做主视觉/书法构成画面主体） | `design-typographic-glyph` | | 要"一套图标/图形素材"，要"透明背景/抠图/去背景" | `design-icon-batch` | | 做**网页/前端**要通用功能图标（零下载、零管理） | `design-icon-batch` 第九节（Icons8 实时嵌入，**必须带页脚署名链接**） | | 做 **IP / 软件 / 品牌专属图形**（要专属、可控、无第三方署名） | `design-icon-batch` 第六、七节（AI 生图 + 抠图批量）/ `design-ip-assets` | | 输入是一张真实照片，"以照片为起点设计/加手绘线稿/live photo" | `design-photo-sketch` | | 载体是 UI/网页/数字产品，要"不像 AI 模板/UX 文案/动效克制" | `design-frontend` | | 载体是**手机 App 界面/原型**，且"像 AI slop（只换皮肤不换骨架/卡片等距堆叠）/ 要移动结构感/拇指热区/safe area/底部导航/bottom sheet" | `design-mobile-app`（含**写 APP 两步标准流程**：① 线框图默认起步 ② 全流程巡查开发中贯穿；结构立住后由 `design-frontend` 收文案与动效意图） | | 走「模式 2 吸睛」要"注入独特品味/强传播记忆点/反套路审美" | `design-taste` | | 要"给这个组件几个方向看看/同一 UI 件做多个真正不同的版本发散探索" | `design-prototype-divergence`（模式2探索最顺） | | 问"这个动效叫什么/把模糊的动效描述翻成确切术语去 prompt AI/设计师" | `design-motion-vocabulary`（反查词典，命名而非设计） | | 要"IP 化/品牌识别/专属资产/我的角色/签名元素/视觉资产库" | `design-ip-assets` | | 要"上传照片做卡通 IP/个人形象/表情包/从参考照生成专属角色" | `design-ip-assets`（走照片驱动路径 B） | | 要"找参考/找灵感/找配色/找音效/看看别人怎么做/搜案例" **；模式 1 默认路径自动触发（brief 定稿后强制检索，无须用户开口）** | `design-reference-sourcing` | | 页面要承载"一段经历 / 一串时间节点 / 一份履历 / 一个产品故事"，要"走进去"的进入感 / 开场仪式 / 隐喻统摄 / 滚动叙事 | `design-metaphor-narrative` | | 作品集 / 个人主页 / 简历页 / 时间轴长页 / 年报 / 里程碑页 | `design-metaphor-narrative` | | 长滚动页要"全页活但不同时躁动"，或固定底栏不想用硬边切断内容 | `design-metaphor-narrative` 第七、八节 | | 要多图预览但不想用网格平铺（叠牌错落缩略） | `design-metaphor-narrative` 第四节 | > 路由原则：子技能承载完整专项方法；主技能 modules/ 只保留"这份任务是否需要该专项"的判定与一行引用，不重复承载细节。来源署名与授权边界见 `references/来源署名/`（主技能与子技能共用同一份）。 ## 扩展与维护 - 想给某层加子位置：**拆分层**在该层文件夹里新增一个 `.md`；**合并层**（场景）在 `modules/01-场景.md` 里新增一小节即可。 - 改某子位置：直接编辑对应 `modules/xx-层/子位置.md`，不影响别的模块。 - 子位置文件是权威源；本 SKILL.md 仅为总控索引，模块内容以 `modules/` 为准。 ## 技能工程约定 > 本技能本身当作一个「产品」来维护，而非一次性提示词。 - **版本与边界**：保持 `version` 号 + 变更日志；明确能力边界（什么能做、什么不做），不夸大。 - **本地测试隔离**：所有 demo / 冒烟测试 / 实验产物**不进主干目录**，放在隔离的测试目录或临时区，避免污染核心模块。 - **目录规范**：主文件（SKILL.md）+ 模块（modules/）+ 参考资料（references/）分离；资产与参考分开，便于维护与审阅。 - **先过交付三关再给人看（模式 1 硬闸门）**：交付前必须依次过 ① C 段三动作形式自检 → ② 独立设计评论家截图评分（9+ 才算完）→ ③ 交付剔除逐屏减（见上方「交付硬闸门」）。任何一关没过不许交付。形式过关后再按需跑技术校验。