
把视觉风格写成可执行规范Munder Difflin「小黑配图」Skill 中的风格 DNA 设计【免费下载链接】munder-difflinA local multi-agent harness that works with your existing Claude Code, Codex subscriptions, allows you to run an office of agents项目地址: https://gitcode.com/GitHub_Trending/mu/munder-difflin本文以仓库中.claude/skills/ian-xiaohei-illustrations/references/style-dna.md简称 style-dna.md这份 48 行的风格契约为主体讲清楚一个 Agent 技能如何用风格 DNA把主观的审美判断翻译成客观、可检查、可写进生图提示词的硬约束16:9 横版、纯白背景、黑白线稿、留白比例、标注数量上限与四色配色纪律以及绝对不要清单。读完你会掌握如何为一个 AI 配图流水线定义风格规范、把规范落进提示词模板与 QA 检查表并理解 Munder Difflin 仓库如何对这份 DNA 做本地覆盖黄色小黑、英文批注、全站禁红以匹配自己的博客视觉体系。1. style-dna.md 在技能中的位置一份被多文件消费的风格契约这个技能是一个标准的 Claude Code 技能目录SKILL.md references assets目录结构如下SKILL.md入口定义核心定位、五步工作流和输出资产路径style-dna.md本文主体风格 DNA、颜色规则、禁忌与审美方向prompt-template.md单张生图提示词模板把 DNA 逐条翻译成英文提示词qa-checklist.md生成后的必过项、失败信号与迭代方法xiaohei-ip.md recurring IP 角色小黑的形象、性格、动作库与禁忌composition-patterns.md八种构图结构、原创隐喻三步法、防复刻清单agents/openai.yaml技能在 Agent 界面中的展示名与默认提示词assets/examples/14 张风格校准示例图如 11-idea-press.png。SKILL.md 明确要求按任务需要读取不要一次塞满上下文style-dna.md 承担的是风格基线每次生图前必读其余参考文件按需加载。这是一种典型的技能工程做法——把什么是好图的判断标准从大模型的隐式品味中抽出来固化成显式文档让提示词模板和 QA 检查表都能引用同一条规则。2. 一句话定义与核心定位这张图到底要像什么style-dna.md 开篇给出全篇最凝练的一句风格定义纯白、极简、手绘、留白、克制、怪诞、产品草图感、中文手写感、结构清楚但不说明书。并补了一个场景化描述像一个长期做 AI、产品、设计、开发工具的人在白纸上随手画出来的一张解释草图。这句话的价值在于它同时划定了两件事风格锚点产品草图感和结构清楚但不说明书是矛盾的——图要能解释一个结构流程、断点、状态、隐喻但不能长成正式图表或课件反面参照它不是商业插画、PPT 信息图或可爱卡通后文绝对不要清单会逐条展开。这个定位与技能的核心定位SKILL.md 第一段一一对应把文章里的关键判断、流程、结构、状态或隐喻变成一张清爽、怪诞、有创意、可读但不说明书的手绘解释图。3. 七条必须约束风格 DNA 的硬指标style-dna.md 的必须小节是全篇约束力最强的部分每条都是可量化或可视觉核验的#约束量化指标 / 判定方式116:9 横版正文配图固定画幅适配博客正文宽栏2纯白背景明确排除米色、暖灰、纸张纹理、渐变、阴影、噪点、复古纸感3黑色手绘线稿为主细线、轻微抖动、不机械、不矢量、不厚重描边4大量留白主体占画面约 40%–60%至少 35% 空白最好有一整块安静区域5少量中文手写批注最多 5–8 处每处尽量 2–8 个字6一张图只讲一个核心动作、结构、状态或隐喻单图单概念禁止一图多主题7结构要自然表达不要在图上写结构类型名称禁止出现Workflow / 系统架构之类的图内类型标签这七条是刻意可执行化的40%–60% 的主体占比、35% 空白下限、5–8 处标注、2–8 字/处——每一条都能在生成后对着画面数出来。QA 检查表 qa-checklist.md 的必过项正是这套指标的检查版16:9 横版干净白底主体不超过画面约 60%中文标注少、短、能读等形成定义 → 检查的闭环。同样地prompt-template.md 的 Constraints 段落把这些数字直接写进了生图提示词Keep the main subject around 40%-60% of the canvas. Preserve at least 35% blank white space. Use at most 5-8 short handwritten Chinese labels.保证模型在生成时就带着这些约束而不是生成后再靠人眼挑错。4. 四色配色纪律黑红橙蓝各管一事style-dna.md 的颜色小节把每种颜色的用途限定到语义级别这是整套配色系统的精髓——颜色即语法黑色主体线稿、角色小黑、框线、结构、主要文字、主体物件红色重点批注、问题、情绪点、关键提醒、结果橙色主流程、路径、箭头、自动化流向、从 A 到 B 的移动关系蓝色补充说明、脑内状态、系统状态、第二层解释、AI/assistant/自动化提示。两条补充规则同样关键蓝色不是每张都必须用——四色是可用词汇而非必须凑满的配额颜色要克制宁可少不要多——总量约束优先于单色规则。这套分工在下游文件里被完整继承prompt-template.md 的 Color use 段落逐色复述Black for main line art and 小黑. Orange for main flow/path/arrows. Red only for key warnings/problems/results. Blue only for secondary notes or feedback/system state.qa-checklist.md 则把它拆成三条独立必过项橙色只用于主路径或箭头 / 红色只用于重点、问题、提醒或结果 / 蓝色只用于补充说明、反馈或系统状态。也就是说一张图里如果出现橙色文字标注既不是流程也不是箭头或蓝色主路径就直接判不合规。对照上文示例图可以直观验证红色想法太软是问题批注、橙色箭头表达从机器到钥匙的主流向、蓝色有人愿意试是第二层解释——与配色纪律一一对应。5. 绝对不要清单用排除法钉死风格边界style-dna.md 用 14 条否定式约束划出风格的安全区比应该像什么更能防止跑偏品类级排除防止整张图跑错赛道不要商业插画、PPT 信息图、正式流程图、课程课件不要可爱卡通海报、儿童插画不要复杂架构图、精致扁平插画、科技感 UI、真实 App 截图。画面级排除防止单点破坏白底极简不要复杂背景、渐变、阴影、纹理不要把每个节点都解释清楚留白与克制优先于信息完整不要在左上角写Workflow 流程图 / 系统架构图 / 常见坑 / 路线图等类型标题。最后一条在 QA 侧被单独列为高优先级失败信号qa-checklist.md左上角有常见坑 / Workflow / 系统架构图 / 路线图等标题→ 重生成或局部编辑prompt-template.md 甚至提供了一段专用的图像编辑提示词只删除左上角标题及其下划线、用纯白背景填充、其余内容严格保留。可见这类违规在实战中出现频率不低值得专门设一道局部修复流程。审美方向小节则给出正向气质基线要怪诞、创意、有意思、简洁清爽、天马行空不要可爱、幼稚、很复杂、死板。qa-checklist.md 对交付判断的表述与此呼应高质量图应该让读者先觉得有点怪然后 1 秒内看懂结构。如果第一眼像教程页而不是白纸上的怪诞产品草图就不合格。6. DNA 如何被消费模板、检查表与反复刻机制风格 DNA 不是孤立文档它被三类机制消费这也是该技能值得借鉴的地方1提示词模板生成前。prompt-template.md 把 DNA 编译成固定英文提示词骨架Visual DNA 段对应必须清单纯白背景、wobbly 手绘线、大量留白、禁渐变/阴影/纸纹/商业矢量/PPT 感Recurring IP 段强制小黑承担核心动作小黑 must perform the core conceptual action, not decorate the sceneConstraints 段落回 40%–60%、35%、5–8 标注等数字指标并附加不要复刻旧案例构图要为这篇文章发明新隐喻的原创性约束。2QA 检查表生成后。qa-checklist.md 把 DNA 逐条转成可勾选的必过项再配一份失败信号清单画面太满、箭头太多、文字变大段解释、背景有纸纹阴影渐变米色噪点、真实 UI、中文错字严重、太死板无荒诞隐喻、与旧案例构图过近和迭代方法太普通→让小黑成为动作主体并加入怪异隐喻太复杂→删节点只留一个动作加 3–5 个短标注太可爱→强调 deadpan / not cute / not mascot太 PPT→去标题、边框、整齐网格和多余箭头太像旧案例→换主物件和小黑动作文字错→优先局部编辑错得多则重生成并减少标注。3反复刻机制跨次生成。composition-patterns.md 规定每次都从当前文章重新发明隐喻并把assets/examples/明确降级为低频视觉校准素材列出九条点名禁止默认复用的构图传送带两个断点、小黑拉判断杆、小黑变漏斗、切素材鱼、牵承接路径、拉三层信息源、三个小黑拿喇叭/搭桥/开门、盖章话术工具箱、举牌看常见坑路径。SKILL.md 也复述了这条规则不要照抄这些案例的构图、物件或标注。这解决了多 Agent 协作场景的一个真实问题同一个技能反复生成配图时模型极易向已有示例回归导致同一博客的图越来越撞脸。7. 角色即约束小黑 IP 与风格的绑定风格 DNA 中黑色手绘线稿为主的一条主体约束实际上绑定了固定 IP——小黑。xiaohei-ip.md 定义它黑色实心小怪物、白色圆点眼睛、细腿、轮廓略不规则、表情空、呆、冷静、认真性格上很认真但做的事有点荒诞像一个低调的系统操作员冷幽默、不卖萌。其中最关键的是一条可操作的判断标准如果去掉小黑图的核心隐喻还能完全成立说明小黑太装饰了要重写提示词让小黑成为动作主体。这句话同时出现在 SKILL.md小黑必须参与画面的核心动作不能只是站在旁边当装饰、prompt-template.mdMake 小黑 serious, deadpan, and slightly bizarre, not cute和 qa-checklist.md小黑承担核心动作不只是装饰小黑像吉祥物、表情包或可爱卡通为失败信号。IP 不是品牌贴纸而是构图的功能件——它让这张图解释什么概念变成小黑正在物理地做什么。8. 本地覆盖规则同一份 DNA 在不同仓库里的参数化改写值得重点展开的是 SKILL.md 末尾的本地覆盖规则Munder Difflin blog — local overrides小节该技能在本仓库被复用时允许在核心 DNA 之上叠加项目级覆盖且只改参数不改结构。本仓库的五条覆盖是小黑是黄色的身体恒定为 Munder Difflin 主题黄#FFCA54保留细黑手绘描边无西装、无领带眼睛从白点改为两个小黑点黄底上白点不可读豆形身体、细腿、空白表情全部保留——every image, no exceptions批注语言改为英文核心技能默认中文手写批注因为本博客是英文站点批注颜色限定为橙、蓝、黄三色禁用红色站点级no-red规则直接覆盖了核心 DNA 中的红色用途资产落盘路径改为博客管线输出图写入blog/src/assets/media/post-slug/且每张生成文件必须在 blog/src/_data/media.json 中登记条目并把status置为ready16:9、纯白背景、一图一概念——核心 DNA 中这三条原样保留不做覆盖。这个核心 DNA 本地覆盖的分层设计正好回答了风格规范如何在多站点/多语言场景复用的问题结构约束画幅、白底、留白、单概念与 IP 行为约束小黑承担核心动作是稳定的而颜色值、标注语言、资产路径是站点参数。media.json 中的登记机制则把 Agent 生成的图接入了博客的正式构建流程该文件按 post slug 组织hero/inline/youtube条目每条含file、alt、prompt、status字段status: ready表示该图已通过检查、可被页面引用。9. 复用与许可该技能以 MIT 协议分发见 LICENSENOTICE.md 要求再分发或改编时保留 Ian Xiaohei Illustrations 名称或给出署名assets/examples/中的示例图是作者生成的风格校准资产仅用于校准线条密度、留白与颜色克制程度不进入默认生成路径。技能入口文件 SKILL.md 的 frontmattername / description定义了触发场景怪诞小黑手绘正文配图shot list等关键词agents/openai.yaml则提供了allow_implicit_invocation: true的隐式调用策略。10. 小结风格 DNA 的四个设计手法把 style-dna.md 及其消费方放在一起看可以提炼出四条可迁移的手法一切约束可检查化留白 35%、主体 40%–60%、标注 5–8 处、每处 2–8 字——能数出来的规则才能进 QA 检查表颜色绑定语义黑结构、红问题/结果、橙流程/路径、蓝第二层解释让配色本身成为读图语法而不是装饰否定清单优先14 条绝对不要比正面形容词更能把生成结果钉在风格安全区内且高频违规项左上角类型标题配了专门的局部修复提示词反复刻与 IP 功能化示例图降级为低频校准资产、点名禁止复用旧构图IP 角色必须承担核心动作去掉它还成立就说明它是装饰两者共同保证批量生成时风格一致而构图不趋同。这套DNA 文档 提示词模板 QA 检查表 本地覆盖参数的组合本质上是把一位插画的审美判断重写成了 Agent 可以逐条执行与验收的工程规范。【免费下载链接】munder-difflinA local multi-agent harness that works with your existing Claude Code, Codex subscriptions, allows you to run an office of agents项目地址: https://gitcode.com/GitHub_Trending/mu/munder-difflin创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考