
LifeOS Art 技能流程配方卡片实战用 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 技能下的 RecipeCards 工作流 展开讲解如何把方法论、工作流和分步流程烹饪成带编号步骤与手绘小插画的视觉配方卡片Recipe Card。你将掌握从流程定义、卡片版式设计、三层排版提示词构造、宽高比选择到 CLI 生成与强制验证的完整链路并理解 Generate.ts 在代码层面强制实施的工作流纪律最终产出可直接交付客户的咨询级图解。一、配方卡片是什么把流程变成可视化食谱流程配方卡片Process Recipe Card把方法论、工作流和分步流程呈现为带编号步骤 每步小插画的视觉食谱。它借鉴烹饪食谱卡的排版直觉——紧凑、有条理、可随手查阅——但内容替换为业务流程风格则是编辑出版式的手绘质感editorial hand-drawn style。这类卡片的核心价值在于让复杂流程变得可快速扫读、易于记忆。按 RecipeCards.md 的说明本工作流适用于以下场景5 步 TELOS 分析食谱这类流程拆解咨询方法论手册consulting methodology playbooks操作指南与流程文档how-to guides工作流文档化最佳实践清单带步骤的战略框架在 Art 技能的 20 命名工作流中RecipeCards 被路由表明确列为配方卡片或分步流程recipe card or step-by-step场景的唯一入口相关映射可见 SKILL.md 的工作流路由表。配方卡片的七大核心特征编号步骤Numbered steps——清晰的 1、2、3 递进每步小插画Small illustration per step——每个动作配一个图标或简单视觉可扫读格式Scannable format——易于查阅和跟随食谱卡版式Recipe card layout——紧凑、有条理、可引用手绘图标Hand-drawn icons——不完美、带编辑风格的插图三层排版层级Typography hierarchy——标题、步骤、细节三级系统交付级质量Deliverable quality——专业到可以直接交给客户二、色彩系统黑色骨架 紫色强调RecipeCards 工作流把配色收敛为一张极简、高辨识度的系统核心逻辑是大多数元素保持黑色只有关键步骤与最终结果用紫色强调。用途色值说明步骤编号、分隔线、图标轮廓黑#000000卡片骨架色关键步骤或最终结果深紫#4A148C强调色critical / outcome支撑步骤或输入深青#00796B可选辅助色全部正文与描述文字炭灰#2D2D2D保证可读性卡片背景浅奶油#F5E6D3或白#FFFFFF前者温暖后者干净现代使用策略步骤编号默认黑色关键步骤用紫色图标以黑色线稿为主仅在关键处叠加紫/青点缀正文统一炭灰最后的结果步骤固定用紫色。从源码看#4A148C与#F5E6D3等也是 LifeOS 品牌的惯用色系——例如博客页背景正是奶油色系Generate.ts在生成博客缩略图时使用#EAE9DF作为不透明底色见 Generate.ts 缩略图逻辑。三、强制工作流六步法RecipeCards 将完整制作过程固化为 6 个强制步骤MANDATORY WORKFLOW STEPSDefine → Design → Construct → Generate → Validate → Complete。每一步都要求先产出结构化输出再进入下一步。Step 1定义流程Define Process动手写提示词之前先把流程本身想清楚要文档化什么流程——流程名称 整体目标/结果多少步——理想 37 步食谱卡格式步骤过多就拆成多张卡片每一步是什么——按顺序列出动作、每步发生什么、结果是什么输出模板PROCESS NAME: [The X Recipe / X-Step Y Method] OUTCOME: [What this process achieves] STEPS: 1. [Step name] — [Action description] — [Icon metaphor] 2. [Step name] — [Action description] — [Icon metaphor] 3. [Step name] — [Action description] — [Icon metaphor] 4. [Step name] — [Action description] — [Icon metaphor] 5. [Step name] — [Action description] — [Icon metaphor] CRITICAL STEPS (Purple): - [Which step(s) are most important]注意每行第三个字段是Icon metaphor图标隐喻——它决定了后面每步小插画画什么例如discover 用放大镜ideate 用灯泡build 用锤子。Step 2设计卡片版式Design Recipe Card Layout先选版式类型垂直列表从上到下网格6 步用 2×3线性横向流环形流流程循环场景每步的呈现要素编号徽章圆内数字 小图标插画 简短文字描述 指向下一步的箭头。同时规划视觉流动步骤如何连接、渐进式视觉线索、最终结果的强调方式。输出模板LAYOUT: [Vertical list / Grid / Horizontal flow / Circular] CARD STRUCTURE: - Title at top (Tier 1 typography) - [X] steps arranged [vertically/in grid] - Each step contains: * Numbered badge (e.g., 1 in circle) * Small hand-drawn icon/illustration * Step name (Tier 2) * Brief description (Tier 3) - Arrows or lines connecting steps - Final outcome emphasized ICON METAPHORS: Step 1: [Simple icon, e.g., magnifying glass for discover] Step 2: [Icon, e.g., lightbulb for ideate] Step 3: [Icon, e.g., hammer for build] ... COLOR CODING: - Step [X] (critical): Purple badge and icon accents - Step [Y] (outcome): Purple emphasis - Other steps: Black badges, minimal colorStep 3构造提示词Construct Prompt这一步是整个工作流的核心——把前面两步的产出翻译成图像模型能严格执行的提示词。工作流提供了一份可直接套用的完整模板Hand-drawn process recipe card in editorial style. STYLE REFERENCE: Recipe card, visual playbook, illustrated step-by-step guide BACKGROUND: [Light Cream #F5E6D3 OR White #FFFFFF] — clean, card-like AESTHETIC: - Recipe card layout (organized, scannable) - Hand-drawn step icons (simple, imperfect, editorial style) - Numbered steps with clear progression - Variable stroke weight (icons and dividing lines) - Professional but human quality (deliverable to clients) LAYOUT TYPE: [Vertical list / Grid / Horizontal flow] CARD STRUCTURE: [Describe the overall layout, e.g.:] - Title at top - 5 steps arranged vertically down the card - Each step has: numbered badge → icon → name → description - Arrows connecting steps showing flow - Final step emphasized with purple accent TYPOGRAPHY SYSTEM (3-TIER): TIER 1 - RECIPE TITLE (Advocate Block Display): - [PROCESS NAME] — Large at top - Font: Advocate style, extra bold, hand-lettered, all-caps - Size: 3x larger than body text - Color: Black #000000 - Example: THE 5-STEP TELOS ANALYSIS RECIPE TIER 2 - STEP NAMES (Concourse Sans): - Step 1: [Name], Step 2: [Name], etc. - Font: Concourse geometric sans-serif - Size: Medium readable - Color: Charcoal #2D2D2D (or Purple for critical step) - Position: Next to each step icon TIER 3 - STEP DESCRIPTIONS (Advocate Condensed): - Brief action description for each step - Font: Advocate condensed (smaller) - Size: 60% of Tier 2 - Color: Charcoal #2D2D2D - Position: Below step name模板随后要求逐步骤展开PROCESS STEPS TO ILLUSTRATE每个步骤给出编号徽章颜色、图标内容、描述、线稿颜色与箭头指向。例如STEP 1: [Step Name] - Number badge: 1 in black circle - Icon: [Hand-drawn simple icon, e.g., magnifying glass examining document] - Description: [Brief action description] - Color: Black linework - Arrows: Black arrow pointing to Step 2 STEP 3: [Critical Step Name] - Number badge: 3 in Purple (#4A148C) circle — CRITICAL STEP - Icon: [Hand-drawn icon with purple accents] - Description: [Action description] - Color: Purple (#4A148C) accents on icon and badge - Arrows: Purple arrow pointing to Step 4 FINAL STEP [X]: [Outcome] - Number badge: [X] in Purple (#4A148C) circle — OUTCOME - Icon: [Success/completion icon, e.g., trophy, checkmark, rocket] - Description: [Outcome achieved] - Color: Purple (#4A148C) emphasis - Represents: Final result of process连接元素CONNECTING ELEMENTS步骤之间的手绘箭头刻意歪歪扭扭的不完美质感可选路径用点线或虚线默认箭头黑色关键路径用紫色。硬性要求CRITICAL REQUIREMENTS必须是手绘食谱卡美学而非精致图表每步用简单可扫读的图标而非细节插画清晰的数字递进1 → 2 → 3 → outcome三层排版层级关键/结果步骤的紫色战略强调禁止渐变只用纯色客户可交付的专业质量竖向卡片比例。可选右下角用炭灰小字签名。Step 4确定宽高比Determine Aspect Ratio版式类型决定画幅工作流给出了精确映射表版式类型宽高比理由垂直列表3-7 步9:16 或 4:3高挑卡片格式网格布局6-9 步1:1方形平衡网格横向流16:9宽幅线性递进环形流程1:1方形适配圆环对称默认推荐9:16竖向——经典食谱卡方向。Step 5执行生成Execute Generation食谱卡工作流推荐的执行命令bun run ~/.claude/skills/Art/Tools/Generate.ts \ --workflowRecipeCards \ --model nano-banana-pro \ --prompt [YOUR PROMPT] \ --size 2K \ --aspect-ratio 9:16 \ --output /path/to/recipe-card.png模型推荐nano-banana-pro——它是本工作流官方指定模型理由是步骤文字渲染最佳best text rendering for steps。生成后立即打开预览open /path/to/recipe-card.pngStep 6强制验证Validation, MANDATORY输出必须同时通过必须有与必须没有两组检查必须有Must Have清晰的递进——步骤明显按 1 → 2 → 3 流动可扫读的版式——能快速查阅简单图标——每步有可辨识的插画可读文字——所有步骤名与描述清晰可辨战略用色——关键/结果步骤使用紫色手绘质感——卡片具有编辑出版美学专业交付物——客户可接受的质量必须没有Must NOT Have复杂的细节插画应为简单图标拥挤的布局信息过量无法辨认的小字缺失步骤编号模糊的流程或递进企业级流程图观感corporate process diagram look验证失败时的修复对照表问题修复提示词图标过于复杂Simple hand-drawn icons, minimal detail, recognizable at glance流程无法跟随Clear numbered badges 1→2→3, black arrows connecting steps布局过于拥挤减少描述文字、简化布局观感太企业化参考 recipe card aesthetic, hand-drawn playbook, editorial style文字不可读增大 Tier 2/3 字号、增加间距缺少强调Purple (#4A148C) on Step [X] critical and final outcome step四、三个官方示例示例 15 步 TELOS 分析食谱咨询交付物步骤Context → Questions → Blockers → Constraints → Solutions图标隐喻放大镜、问号、路障、栅栏、灯泡用色最终 Solutions 步骤用紫色版式垂直 9:16示例 2安全评估方法步骤Assets → Threats → Vulnerabilities → Mitigations → Validation图标隐喻宝藏、风暴、裂纹、盾牌、对勾用色Mitigations关键步与 Validation结果步用紫色版式垂直 9:16示例 33 步内容创作食谱步骤Research → Create → Distribute图标隐喻书本、铅笔、扩音器用色最终 Distribute 结果步用紫色版式横向 16:9流程较简单五、源码级原理Generate.ts 如何把纪律写进代码食谱卡工作流本身只是 Markdown 文档真正保证它被执行的是 Art/Tools/Generate.ts。了解它的实现你就明白为什么上面的命令必须以--workflowRecipeCards开头。5.1 工作流纪律闸门Workflow Discipline Gate据 SKILL.md 的说明必须先读工作流、再按模板构造提示词这条纪律曾经只是 Markdown 规则而被静默忽视——某次会话因此一次性产出 12 张被拒收的图表incident 2026-04-30。现在它被固化为Generate.ts中的enforceWorkflowDiscipline()函数见 Generate.ts L345-L419未传--workflowname→直接退出码 1并打印全部可用工作流清单传入的工作流名在~/.claude/skills/Art/Workflows/下找不到对应.md文件 →同样拒绝唯一例外是显式--freeform-confirmed但会向 stderr 记录审计日志。所以食谱卡命令里的--workflowRecipeCards不只是一个参数而是对执行器声明我已阅读并遵循了 RecipeCards 工作流是代码层面的强制门禁。5.2 关键 CLI 参数与模型规格从 Generate.ts 的参数解析与帮助文本 可以确认--modelnano-banana-pro默认、nano-banana、flux。OpenAI 图像模型gpt-image-1/2与 compare 模式已于 2026-07-30 按主理人指示移除传入会直接报错--sizenano-banana-pro 用分辨率档位1K / 2K / 4K默认 2K与宽高比是两个独立参数——食谱卡里--size 2K --aspect-ratio 9:16是正确的组合把9:16传给--size会触发校验错误而 flux / nano-banana 则把宽高比直接传给--size如16:9--aspect-ratio仅对 nano-banana-pro 生效合法值1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 9:16, 16:9, 21:9默认16:9--output默认落在$LIFEOS_DOWNLOADS_DIR未设置时回退~/Downloads/。Art 技能有强制纪律所有生成图像必须先输出到 Downloads 供预览禁止直接写入项目目录审批通过后才复制到最终位置其他可用标志--reference-image仅 nano-banana-pro最多 14 张、--transparent、--remove-bg本地 rembg、--add-bg、--thumbnail、--creative-variations等。环境变量方面nano-banana-pro 需要GOOGLE_API_KEYflux / nano-banana 需要REPLICATE_API_TOKEN密钥统一从$LIFEOS_DIR/.env或~/.claude/.env加载见 Generate.ts loadEnv。依赖声明见 Tools/package.json。5.3 格式自愈与签名saveImage()会读取文件**魔数magic bytes**判断真实格式若 API 实际返回 JPEG 而请求的是 PNG会自动改写扩展名并告警见 Generate.ts L168-L200。此外Generate.ts内置了 DA 名称的签名盖章逻辑SignPainter-HouseScript 手写体、右下角、约图像宽度 3% 的字号食谱卡工作流本身未强制要求签名但提示词模板保留右下角炭灰小字签名作为可选要素。六、运行前置语音通知与技能路由Art 技能包括 RecipeCards 工作流在启动时有强制语音通知要求。工作流文档开头的通知命令为curl -s -X POST http://localhost:31337/notify \ -H Content-Type: application/json \ -d {message: Running the RecipeCards workflow in the Art skill to create recipe cards} \ /dev/null 21 这条命令调用本地语音服务PULSE_BASE/notify端点用于 ElevenLabs TTS 播报其服务端处理逻辑见 hooks/handlers/VoiceNotification.ts。同时技能要求输出文本通知RunningRecipeCardsinArt...。调用前还应确认请求形态匹配 RecipeCards 而非其他工作流——SKILL.md 路由表 明确规定配方卡片或分步流程Recipe card or step-by-step才走Workflows/RecipeCards.md博客头图走 Essay、架构图走 TechnicalDiagrams、框架/2×2 矩阵走 Frameworks混淆路由是历史事故的主要来源。如果需求不匹配任何现有工作流正确做法是停下来向用户确认而不是即兴生成。七、速查卡配方卡片公式1. Define process (name, steps, outcome) 2. Design layout (vertical/grid, icons, flow) 3. Construct prompt with numbered progression 4. Choose aspect ratio for layout type 5. Generate with nano-banana-pro 6. Validate for scannability and professionalism色彩策略多数步骤黑色徽章与图标 → 关键步骤紫色徽章与点缀 → 最终结果紫色强调 → 文字统一炭灰。图标设计原则简单、可辨识、手绘不是细节插画图标必须代表该步骤的动作。从仓库继续深入完整工作流模板见 RecipeCards.md技能级纪律、模型选择与 Gotchas 见 SKILL.md执行器实现见 Generate.ts同一技能下还有 Aphorisms、Frameworks、Mermaid、TechnicalDiagrams 等 20 个工作流文件位于 Workflows 目录 下可对照理解不同视觉格式的差异化设计哲学。【免费下载链接】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),仅供参考