LifeOS Art 技能 Frameworks 工作流实战：用 AI 绘制可记忆的手绘风格思维框架图

LifeOS Art 技能 Frameworks 工作流实战用 AI 绘制可记忆的手绘风格思维框架图【免费下载链接】LifeOS⛰️ The Life Operating System — an intent engineering platform that moves you from your current state to your ideal state, in life and work.项目地址: https://gitcode.com/GitHub_Trending/pe/LifeOS本篇技术指南完整讲解 LifeOS 仓库中 Art 技能的核心工作流之一 ——Frameworks视觉思维模型与框架图它面向 2x2 矩阵、韦恩图、金字塔、概念关系图等签名式思维框架的可视化。读完本文你将掌握从定义框架结构 → 设计画面 → 构造提示词 → 选择画幅 → 调用Generate.ts生成 → 强制校验的完整六步流程以及 LifeOS 专属的 UL 编辑风格配色系统与三层字体层级可直接产出符合项目审美规范、可用于文章配图或内容输出的高质量框架示意图。一、这个工作流解决什么问题Frameworks工作流的定义位于 LifeOS/install/skills/Art/Workflows/Frameworks.md它的职责是创建VISUAL FRAMEWORKS—— 以签名式signature思维模型为主题的、带有编辑部手绘风格的可记忆示意图。所谓签名式框架指的是那种一旦画出来就成为该概念的标准参考图的视觉表达——它不只是给文字配个图而是让2x2 矩阵或韦恩图本身成为人们记住某个思维模型的锚点。适用场景原文档明确列出的用途2x2 矩阵与四象限模型quadrant models带编辑部风格editorial flair的韦恩图Venn diagrams概念关系图conceptual relationship mapsThe [你的名字] Framework for X 这类个人化框架命名思维模型与思考工具mental models thinking tools决策框架decision frameworks在 LifeOS 的 Art 技能路由体系中Frameworks是框架 / 2x2 / 矩阵类请求的指定工作流。仓库 LifeOS/install/skills/Art/SKILL.md 的路由表明确写着Framework / 2x2 / matrix → Workflows/Frameworks.md。也就是说当你需要绘制象限矩阵或框架示意图时必须先读取本工作流并按它的模板构造提示词再调用生成工具。二、视觉美学结构化概念 编辑部手绘风格Frameworks 工作流追求的效果可以概括为一句判断标准Smart conceptual diagram, but hand-drawn and visually interesting聪明的概念图但用手绘笔触呈现且视觉上有趣。七大核心特征清晰结构Clear structure—— 框架形态一眼可辨2x2、韦恩图、金字塔等手绘有机感Hand-drawn organic—— 不完美的线条、歪歪扭扭的圆圈、人类笔触编辑部美学Editorial aesthetic—— 平涂色、黑色线条、UL 调色板标签融入画面Labels integrated—— 字体本身就是视觉设计的一部分概念清晰Conceptual clarity—— 框架内容即刻可理解可记忆的视觉Memorable visual—— 成为该框架的标准参考图克制的配色Thoughtful color—— 战略性使用紫/青purple/teal表现概念关系。三、框架专属配色系统Frameworks 工作流的颜色策略非常明确全部围绕结构用黑、重点用紫、对比用青、文字用炭灰展开用途色值说明框架结构StructureBlack #000000所有轴线、圆圈、方框等框架线条概念区 1 / 最优象限Deep Purple #4A148C主概念区或理想象限概念区 2 / 对比象限Deep Teal #00796B次概念区或对比象限所有文字与标签Charcoal #2D2D2D正文与标签背景White #FFFFFF或Light Cream #F5E6D3干净、平涂配色策略要点框架线条/结构一律黑色紫色用于理想或首要概念青色用于次要或对比概念使用微妙的填充或强调色而不是大块实色填充subtle fills or accents, not solid color blocks。这一配色系统与 Art 技能其他工作流如 Taxonomies共用同一套 UL 调色板保持整套视觉体系的品牌一致性。四、强制工作流六步法MANDATORYStep 1定义框架结构Define Framework Structure生成之前必须先想清楚要画什么。按以下三个问题梳理1. 框架类型What framework type?2x2 矩阵四个象限韦恩图相交圆金字塔/层级结构光谱/连续体spectrum/continuum三角形三方平衡其他概念形状2. 维度/概念What are the dimensions/concepts?2x2X 轴概念、Y 轴概念韦恩图圆 1 概念、圆 2 概念、重叠区含义金字塔从底部到顶部的层级3. 象限/区域/分区What are the quadrants/areas/zones?为每个区域命名并描述确定哪个是最优或最重要的区域本步骤的标准化输出模板原文档原文FRAMEWORK TYPE: [2x2 Matrix / Venn Diagram / Pyramid / etc.] FRAMEWORK NAME: The [Your Name] Framework for [Topic] DIMENSIONS: - X-axis: [Concept] (Low → High) - Y-axis: [Concept] (Low → High) QUADRANTS/AREAS: 1. [Name]: [Description] — [Color if highlighted] 2. [Name]: [Description] — [Color if highlighted] 3. [Name]: [Description] 4. [Name]: [Description] OPTIMAL ZONE: [Which quadrant/area is ideal]这一步的价值在于先确定信息结构再谈画面呈现。框架图最常见的失败就是结构混乱——连作者自己都没想清楚象限划分模型自然画不出有意义的图。Step 2设计框架视觉Design Framework Visual在动手写提示词前先在脑内完成画面草图设计1. 框架几何Framework geometry每个元素有多大比例与间距对称或刻意的不对称2. 标注策略Labeling strategy轴标签放在哪里象限名称放在哪里是否需要额外注释3. 颜色分配Color assignment哪个象限获得紫色最优区哪个获得青色对比/次要区其余保持黑/白标准化输出VISUAL STRUCTURE: [Describe the framework shape, e.g.:] - Two intersecting axes forming four quadrants - X-axis labeled [left] to [right] - Y-axis labeled [bottom] to [top] - Each quadrant labeled with concept name COLOR CODING: - Top-right quadrant (optimal): Purple #4A148C accent - Bottom-left quadrant (contrast): Teal #00796B accent - Other quadrants: Black structure only TYPOGRAPHY PLACEMENT: - Title (Tier 1): Top center - Axis labels (Tier 2): Along axes - Quadrant labels (Tier 2): Inside each quadrant - Annotations (Tier 3): Strategic notes on key quadrantsStep 3构造提示词Construct Prompt—— 完整模板这是整个工作流的核心资产。原文档提供了一份可直接套用的完整提示词模板这里完整呈现Hand-drawn conceptual framework diagram in editorial style. STYLE REFERENCE: Mental model illustration, conceptual diagram with personality, smart persons framework sketch BACKGROUND: [White #FFFFFF OR Light Cream #F5E6D3] — clean, flat AESTHETIC: - Hand-drawn framework structure (wobbly lines, organic shapes) - Variable stroke weight (axes thicker, details thinner) - Imperfect but intentional geometry (circles not perfect, axes slightly wavy) - Editorial flat color with strategic purple/teal accents - Clear conceptual structure with human touch FRAMEWORK TYPE: [2x2 Matrix / Venn Diagram / Pyramid / Spectrum / etc.] FRAMEWORK STRUCTURE: [Describe the specific framework geometry, e.g.:] - Two hand-drawn perpendicular axes (black) forming cross - X-axis: [Low concept] on left → [High concept] on right - Y-axis: [Low concept] on bottom → [High concept] on top - Four quadrants created by intersection TYPOGRAPHY SYSTEM (3-TIER): TIER 1 - FRAMEWORK TITLE (Advocate Block Display): - [FRAMEWORK NAME IN ALL-CAPS] - Font: Advocate style, extra bold, hand-lettered, all-caps - Size: 3x larger than body text - Color: Black #000000 - Position: Top center - Example: THE SECURITY VS CONVENIENCE FRAMEWORK TIER 2 - LABELS CONCEPTS (Concourse Sans): - Axis labels: [X-axis concept], [Y-axis concept] - Quadrant names: [Quadrant 1], [Quadrant 2], etc. - Font: Concourse geometric sans-serif - Size: Medium readable - Color: Charcoal #2D2D2D - Position: Along axes and inside quadrants TIER 3 - ANNOTATIONS (Advocate Condensed Italic): - Insight notes: *optimal zone*, *avoid this quadrant* - Font: Advocate condensed italic - Size: 60% of Tier 2 - Color: Purple #4A148C or Teal #00796B for emphasis - Position: Near relevant quadrants/areas QUADRANTS/AREAS TO SHOW: [List each region with description, e.g.] TOP-RIGHT QUADRANT: - Label: [Name] - Description: [What this represents] - Color: Purple (#4A148C) subtle accent/highlight — OPTIMAL ZONE - Annotation: *ideal state* in purple italic TOP-LEFT QUADRANT: - Label: [Name] - Description: [What this represents] - Color: Black structure only BOTTOM-RIGHT QUADRANT: - Label: [Name] - Description: [What this represents] - Color: Teal (#00796B) subtle accent — CONTRAST ZONE BOTTOM-LEFT QUADRANT: - Label: [Name] - Description: [What this represents] - Color: Black structure only [Adjust based on framework type - Venn would describe circles, pyramid would describe levels, etc.] COLOR USAGE: - Black (#000000) for all framework structure (axes, circles, lines) - Deep Purple (#4A148C) for [optimal zone] — subtle fill or accent - Deep Teal (#00796B) for [contrast zone] — subtle accent - Charcoal (#2D2D2D) for all text except emphasized annotations CRITICAL REQUIREMENTS: - Hand-drawn imperfect geometry (NOT digital precision) - Framework structure immediately recognizable - Clear labels in 3-tier typography hierarchy - Strategic color on 1-2 key zones only (subtle, not solid fills) - No gradients, flat colors only - Editorial illustration aesthetic maintained - Conceptually clear and memorable Optional: Sign small in bottom right corner in charcoal (#2D2D2D).模板要点拆解三层字体系统3-TIER Typography是框架图可读性的关键Tier 1 标题Advocate Block Display 风格超粗、手写体、全大写字号为正文 3 倍黑色顶部居中Tier 2 标签Concourse 几何无衬线体中号可读炭灰#2D2D2D沿轴线与象限内放置Tier 3 注释Advocate 浓缩斜体字号为 Tier 2 的 60%用紫/青强调靠近相关区域。颜色纪律黑管结构、紫管最优区、青管对比区、炭灰管文字——颜色只允许出现在 1~2 个关键区域且是微妙强调而非实色填充硬性要求手绘不完美几何禁止数字精确感、禁止渐变flat colors only、保持编辑部插画美学。Step 4确定画幅比例Determine Aspect Ratio框架类型画幅比例理由2x2 矩阵1:1正方形四象限均衡韦恩图1:1正方形圆形对称金字塔1:1 或 4:3强调纵向横向光谱16:9宽幅适合左右连续体三角形1:1三个概念平衡默认值1:1正方形—— 适用于大多数框架类型。Step 5执行生成Execute Generation工作流原文档给出的生成命令如下bun run ~/.claude/skills/Art/Tools/Generate.ts \ --workflowFrameworks \ --model nano-banana-pro \ --prompt [YOUR PROMPT] \ --size 2K \ --aspect-ratio 1:1 \ --output /path/to/framework.png生成后立即打开查看open /path/to/framework.png模型推荐nano-banana-pro—— 这是本工作流的默认且唯一指定模型。原因原文档原文它能在这个编辑部美学框架内处理好象限标签和轴标题handles quadrant labels and axis titles within the editorial aesthetic。为什么--workflowFrameworks是强制参数这一步不仅仅是传个名字。仓库中的生成器 LifeOS/install/skills/Art/Tools/Generate.ts 内置了工作流纪律门禁Workflow Discipline Gate调用者必须命名其所属工作流--workflowname或显式用--freeform-confirmed声明自由创作会被记录审计日志。不带--workflow直接调用 → 生成器拒绝执行exit 1并打印可用工作流列表传入不存在的--workflowbad-name→ 拒绝执行门禁的代码注释说明enforceWorkflowDiscipline函数指出此前必须走命名工作流只是 markdown 文档中的纪律结果被静默忽视一个会话就产出了 12 张被拒的示意图incident 2026-04-30因此该纪律被写进代码强制执行。也就是说--workflowFrameworks是你向生成器声明我读完了 Frameworks 工作流并遵循了它的模板的凭证。模型与参数的系统级细节从 Generate.ts 源码可以看到本命令背后的完整规则支持的模型nano-banana-pro默认底层为 Gemini 3 Pro Image调用gemini-3-pro-image-preview、nano-banana、fluxFlux 1.1 Pro走 Replicate。OpenAI 图像模型gpt-image-1/gpt-image-2及双供应商 compare 模式已于 2026-07-30 按主理人指示移除传入会直接报错--size与--aspect-ratio的区别nano-banana-pro的--size接受分辨率档位1K/2K/4K默认 2K画幅由独立的--aspect-ratio指定支持1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 9:16, 16:9, 21:9默认 16:9。注意flux与nano-banana的--size直接接受画幅比值如1:1。框架图工作流指定--size 2K --aspect-ratio 1:1即2K 分辨率 正方形画幅环境变量nano-banana-pro需要GOOGLE_API_KEYflux/nano-banana需要REPLICATE_API_TOKEN。生成器启动时会依次尝试从${LIFEOS_DIR}/.env与~/.claude/.env加载密钥loadEnv函数输出位置纪律SKILL.md 强制所有生成图片先输出到$LIFEOS_DOWNLOADS_DIR默认~/Downloads/供人工预览禁止直接写入项目目录。批准后再复制到最终位置。Step 6校验Validation强制步骤生成之后不能直接宣布完成必须逐项检查必须具备Must Have框架结构清晰—— 2x2 / 韦恩 / 金字塔一眼可辨标签可读—— 三层字阶下所有文字清晰可辨手绘美学—— 线条不完美、形状有机、有人味色彩克制—— 紫在最优区、青在对比区而非处处皆色概念可记忆—— 成为该框架的参考图编辑部风格—— 保持 UL 平涂色、黑色线条美学必须避免Must NOT Have完美数字几何太干净无法辨认或杂乱的文字色彩过载到处都是实色填充结构混乱看不出框架类型企业/无聊的图表感渐变或阴影校验失败时的修复对照表原文档原文问题修复提示词太精确/太数字Hand-drawn wobbly axes, organic imperfect circles, human sketch quality文字不可读增大标签字号简化注释颜色过多Subtle purple accent on optimal zone only, rest black structure结构混乱简化框架加强几何线索像企业模板参考 editorial conceptual illustration, Saul Steinberg style不够记忆点加入点题注释this is the sweet spot五、三个示例用例原文档给出三个典型范例覆盖三种框架类型示例 1Security vs Convenience Framework安全 vs 便利框架类型2x2 矩阵轴安全低 → 高便利低 → 高象限Vulnerable脆弱、Fortress堡垒、Balanced平衡紫色、Abandoned被弃颜色紫色作用于Balanced最优象限画幅1:1示例 2Human 3.0 Capability Venn人类 3.0 能力韦恩图类型韦恩图3 个圆圆人类能力、AI 能力、工具重叠区Where magic happens奇迹发生处紫色颜色紫色作用于中心重叠区画幅1:1示例 3Threat Modeling Pyramid威胁建模金字塔类型金字塔4 层层级Assets资产底部→ Threats威胁→ Vulnerabilities脆弱点→ Mitigations缓解措施顶部颜色紫色作用于顶层行动层青色作用于底层基础层画幅4:3六、快速参考与核心原则框架公式Framework Formula1. Define framework structure (type, dimensions, quadrants) 2. Design visual (geometry, labeling, color assignment) 3. Construct prompt with clear structure 4. Choose square aspect ratio (usually 1:1) 5. Generate with nano-banana-pro 6. Validate for clarity and memorability颜色策略Color Strategy框架结构黑色最优区紫色微妙强调对比区青色微妙强调文字炭灰强调注释除外核心原则Key Principle这张图要成为人们记住该框架的参考图必须概念清晰且视觉独特两者缺一不可。整条流水线的口诀浓缩为Define → Design → Construct → Generate → Validate → Complete定义 → 设计 → 构造 → 生成 → 校验 → 完成。七、与 LifeOS Art 技能体系的衔接Frameworks 工作流不是孤立的文件它处于 LifeOS Art 技能的完整纪律体系中路由入口LifeOS/install/skills/Art/SKILL.md 中的Workflow Routing表将Framework or 2x2 matrix类请求路由到本工作流SKILL.md 还强调先读工作流文件、按其模板构造提示词、再以--workflowname调用生成器——跳过模板直接自由发挥是被代码阻止的生成引擎LifeOS/install/skills/Art/Tools/Generate.ts 是唯一的生成入口所有画幅、模型、透明度、签名、缩略图逻辑都在此实现是验证本工作流命令参数正确性的最终依据同级工作流与 Taxonomies分类网格/周期表、TechnicalDiagrams技术/架构图等共享同一套 UL 调色板与三层字体系统区别仅在于信息组织方式Taxonomies 强调分类体系TechnicalDiagrams 强调流程/关系而 Frameworks 强调可记忆的思维模型工具运行环境仓库 Tools/README.md 与 package.json 显示工具基于 Bun 运行依赖google/genai与replicateSDKCLAUDE.md 也规定项目内一律使用bun而非node/npm——这与工作流命令中bun run的调用方式一致。实际落地时建议将工作流生成的目标图片输出到$LIFEOS_DOWNLOADS_DIR默认~/Downloads/先行预览经人工确认后再按 LifeOS 博客/文章的透明 PNG -thumb.png缩略图双版本规范部署。对框架类示意图而言克制配色 三层字阶 手绘笔触这三条纪律就是让一张矩阵图从AI 随机产物变成该框架的标准参考图的全部秘诀。【免费下载链接】LifeOS⛰️ The Life Operating System — an intent engineering platform that moves you from your current state to your ideal state, in life and work.项目地址: https://gitcode.com/GitHub_Trending/pe/LifeOS创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考