agentleFS
yang20040317-svgyang20040317-svg/design-workflow/SKILL.md

design-workflow

Skill0 starsChanged 2 months agoMITView on GitHub

通用设计工作流——五层顺序执行模型。按「第一层 场景 → 第二层 感知物料 → 第三层 形式组织 → 第四层 信息叙事 → 第五层 主观输出」逐层操作;各层为可编辑模块(场景层合并为单文件,其余层按子位置分文件)。支持三种调用模式:领域适配(默认)/ 吸睛 / AI自主。专项方法论(数据图表/图形字/图标批量/照片手绘线稿/前端设计/移动端 App/隐喻统摄叙事长页)已抽离为 subskills/ 子技能,按载体/任务特征路由。当需要按流程一步步构思/审视设计时触发。触发词:「设计工作流」「五层设计」「按流程做设计」「逐层设计」「帮我搭设计」「灵感」「随机种子」。

4 other projects use a version of this.

Adopted by

Most recently taken up by

  • Other versions4 projects use a version of this.

    Word for word · 0

    None found.

    Edited · 0

    None found.

    Wrote their own version · 4

    1. LazyWorkshopCreate/agent-based-workflow★ 9same name
    2. djalmajr/skills★ 4same name
    3. 5hseok/hanipman-gate★ 0same name
    4. weisser-dev/agentic-skills★ 0same name

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

The file

Files
SKILL.md

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(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/来源署名/(每源一份独立文件)。技能正文只保留通用方法学,不内嵌署名。

怎么用这个工作流

  1. 先选调用模式:见上文「调用模式(三种)」。默认走「模式 1 领域适配」;若目标是强传播选「模式 2 吸睛」(本体为已内建的 design-taste 子技能:含 taste-profiles 实例与「四、接入模式 2 的约束权重」);若想探索前沿选「模式 3 AI自主」。模式决定门控松紧与探索自由度。
  2. 从第一步开始,按顺序逐层推进,不要跳层。第 1 步(场景)是硬闸门:场景没问清前绝不动手,任何不清楚的地方都要先问用户、拿到明确答复再继续。 1.5. 参考检索(模式 1 强制,仅模式 1):第 1 层 brief 定稿后、进第 2 层前,自动调用 design-reference-sourcing 去参考站找「对应的设计」并提炼注入 L2(色板/字体/构图/动效,流程见该子技能「一·补充」)。检索不到 → 声明 UNREFERENCED,按常规设计默认值推进(不调用模式 2 的 taste-profiles),不阻塞。模式 2 走 design-taste 参考图、模式 3 自由探索,不套用本强制步。
  3. 每进入一层,逐个小节/子位置编辑:合并层(场景)在单文件内改对应小节;拆分层(2~5)逐个编辑对应子位置文件。
  4. 每个子位置文件里有「上一步输入 / 本步要做 / 输出给」三段,帮你接住上游、交付下游。
  5. 每层做完用文件内的自检清单核对,再进下一层。
  6. 若下游发现上游问题,回退到对应层/子位置修正,不帯病前进。
  7. 第五层验收通过后,整个设计闭环完成;可把各子位置内容汇进本文件留存。
  8. 交付前硬闸门(模式 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+ 才算完)→ ③ 交付剔除逐屏减(见上方「交付硬闸门」)。任何一关没过不许交付。形式过关后再按需跑技术校验。

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.