LifeOS Art Skill Timelines 工作流实战用 Nano Banana Pro 生成手绘风概念时间线插画【免费下载链接】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 技能SKILL.md所内置的Timelines 概念时间线工作流Timelines.md它不是简单的事件日期列表而是手绘插画式的时间推进图——在每个里程碑上用视觉隐喻表现演变、趋势与转型。读完本文你将掌握从定义时间线结构、设计布局、按模板构造生成提示词到调用 Generate.ts 执行生成、按强制清单校验成品的完整六步流程并能直接复制可运行命令产出属于自己的时间线插画。一、Timelines 工作流是什么Timelines 工作流用于创建图解式时间线ILLUSTRATED TIMELINES——以视觉隐喻串联各阶段、同时承载叙事弧线与时间信息的时间推进图。它区别于普通日期列表的核心在于每个阶段都配有一个小型视觉隐喻用来表达该时期的转型、演化或历史特征。在 LifeOS 的 Art 技能路由表中Timelines 是 20 种静态视觉格式之一SKILL.md 中的 Workflow Routing 表将其映射到Workflows/Timelines.md。凡涉及时间 / 年代推进 / 演变的请求路由规则均要求走该工作流而不是直接向图像模型提交自由提示词。适合使用本工作流的场景The Evolution of X某事物的演化史随时间变化的趋势分析历史视角呈现Before → During → After 推进转型旅程transformation journeys时代对比era comparisons二、视觉美学图解式推进Illustrated Progression该工作流的审美目标是手绘时间线每个里程碑配小型插画。核心特征共 7 条时间流动Temporal flow——清晰的从左到右或从上到下的推进方向插画化里程碑Illustrated milestones——每个节点都有一个小的视觉隐喻手绘时间线Hand-drawn timeline——连接事件的有机线条而非尺子拉出的直线字体层级Typography hierarchy——日期、标签、注解三级体系叙事弧线Narrative arc——展示转变而不只是先后顺序编辑风格Editorial style——保持 UL 品牌美学扁平色块 黑色线条可扫读的推进Scannable progression——一眼就能跟上时间流动。这些特征也会原样进入提示词模板的CRITICAL REQUIREMENTS区块成为生成时的硬约束。三、时间线配色系统Color System for Timelines结构色Black #000000 — 时间线主轴/线条所有主要结构强调与推进色Deep Purple #4A148C — 关键转折点、决定性里程碑 Deep Teal #00796B — 次要事件、支撑性里程碑 Charcoal #2D2D2D — 全部文字日期、标签、注解背景色White #FFFFFF 或 Light Cream #F5E6D3配色策略时间线主线用黑色最关键的 1-2 个里程碑用紫色支撑性里程碑用青色teal其余绝大多数事件保持黑色节点 炭灰文字。核心纪律紫色只用于看这里的时刻绝不全图高亮。这与 Art 技能整体的颜色纪律一致Visualize.md 中同样强调Strategic color, not overwhelming。四、强制工作流步骤MANDATORY WORKFLOW STEPSStep 1定义时间线结构Define Timeline Structure先回答四个问题什么在演化如 AI 发展、安全范式、组织思维时间跨度如 1990-2025、近 5 年、未来展望关键里程碑列出 4-8 个主要节点——过多会显得杂乱叙事弧线是什么如 collapse → crisis → renewal或 winter → spring → summer输出结构化定义SUBJECT: [Whats changing over time] TIME SPAN: [Start year] → [End year] NARRATIVE ARC: [The transformation story, e.g., From hype to disillusionment to practical value] KEY MILESTONES: 1. [Year/Period]: [Event] — [Metaphor for this stage] 2. [Year/Period]: [Event] — [Metaphor for this stage] 3. [Year/Period]: [Event] — [Metaphor for this stage] 4. [Year/Period]: [Event] — [Metaphor for this stage] ... TURNING POINTS (Purple highlights): - [Which 1-2 milestones are most critical]里程碑数量限制在 4-8 个是有依据的Step 6 的验证清单把Too many milestones (overwhelming)列为 Must NOT Have修复表中也明确建议Reduce milestones to 4-6 key points, simplify。Step 2设计时间线布局Design Timeline Layout1. 方向Orientation水平左→右传统适合桌面/宽屏垂直上→下移动端友好、可滚动曲线/有机更具艺术感、不那么僵硬。2. 里程碑呈现Milestone representation每个阶段配什么小插画里程碑如何连接到时间线上方/下方、分支尺寸变化更重要的事件更大。3. 间距Spacing均匀间距视觉平衡比例间距匹配真实时间聚类间距把相关事件分组。输出布局设计ORIENTATION: [Horizontal / Vertical / Curved] TIMELINE STRUCTURE: - Main line: [Black hand-drawn line, slightly wobbly] - Milestones: [Small illustrated circles/nodes along line] - Labels: [Above or below timeline] MILESTONE ILLUSTRATIONS: 1. [Year]: [Small icon/metaphor] — [e.g., seedling for beginning] 2. [Year]: [Small icon/metaphor] — [e.g., storm for crisis] 3. [Year]: [Small icon/metaphor] — [e.g., sunrise for renewal] ... SPACING: [Even / Proportional / Clustered] COLOR HIGHLIGHTS: - Purple: [Critical milestone(s)] - Teal: [Supporting milestone(s)] - Black: [Standard milestones]Step 3构造提示词Construct Prompt将 Step 1-2 的输出填入下方完整提示词模板这是工作流的核心资产务必逐字段填充不要自行删减Hand-drawn conceptual timeline in editorial illustration style. STYLE REFERENCE: Illustrated history timeline, hand-drawn progress chart, editorial time progression BACKGROUND: [White #FFFFFF OR Light Cream #F5E6D3] — clean, flat AESTHETIC: - Hand-drawn timeline (organic line, slightly wobbly, not ruler-straight) - Small illustrated metaphors at each milestone - Variable stroke weight (timeline thicker, details thinner) - Editorial flat color with strategic purple/teal accents - Imperfect but intentional placement ORIENTATION: [Horizontal left-to-right / Vertical top-to-bottom] TIMELINE STRUCTURE: - Black (#000000) timeline spine running [horizontally/vertically] - [Number] milestone points along timeline - Each milestone has: small circle/node illustration label - Hand-drawn connecting line with slight organic waviness TYPOGRAPHY SYSTEM (3-TIER): TIER 1 - TIMELINE TITLE (Advocate Block Display): - [TIMELINE TITLE IN ALL-CAPS] - Font: Advocate style, extra bold, hand-lettered, all-caps - Size: 3x larger than body text - Color: Black #000000 - Position: Top or left side - Example: THE EVOLUTION OF ARTIFICIAL INTELLIGENCE TIER 2 - DATES/PERIODS (Concourse Sans): - [1990], [2000], [2010], etc. - Font: Concourse geometric sans-serif - Size: Medium readable - Color: Charcoal #2D2D2D - Position: Along timeline at each milestone TIER 3 - MILESTONE DESCRIPTIONS (Advocate Condensed Italic): - *symbolic AI era*, *deep learning breakthrough*, etc. - Font: Advocate condensed italic - Size: 60% of Tier 2 - Color: Charcoal #2D2D2D (or Purple/Teal for highlighted events) - Position: Near each milestone node MILESTONES TO ILLUSTRATE: [List each point chronologically, e.g.:] 1. [Year]: [Event name] - Illustration: [Small hand-drawn icon/metaphor, e.g., tiny seed sprouting] - Color: Black node with charcoal text - Position: [Along timeline at this point] 2. [Year]: [Critical event] - Illustration: [Metaphor, e.g., lightning bolt] - Color: Purple (#4A148C) node and illustration — KEY TURNING POINT - Position: [Emphasized size, highlighted] 3. [Year]: [Event name] - Illustration: [Metaphor] - Color: Teal (#00796B) node - Position: [Along timeline] [etc. for all milestones] VISUAL METAPHORS: - Each milestone illustrated with small simple icon - Metaphors show the nature/feeling of that era - Hand-drawn sketch quality, not detailed illustrations - Examples: seedling, storm cloud, rising sun, mountain peak, valley, crossroads COLOR USAGE: - Black (#000000) for timeline spine and most milestone nodes - Deep Purple (#4A148C) for [1-2 critical turning points] — nodes and illustrations - Deep Teal (#00796B) for [supporting important events] - Charcoal (#2D2D2D) for all text CRITICAL REQUIREMENTS: - Hand-drawn timeline (NOT straight digital line) - Clear temporal progression [left-to-right / top-to-bottom] - Small illustrated metaphors at each point (simple, sketchy) - 3-tier typography hierarchy - Strategic color on key milestones only - No gradients, flat colors only - Maintains editorial illustration aesthetic - Easy to scan and follow progression Optional: Sign small in bottom right corner in charcoal (#2D2D2D).模板中的三级字体系统Advocate Block Display → Concourse Sans → Advocate Condensed Italic与 Art 技能下其他可视化工作流如 Visualize.md的排版层级一脉相承是 UL 编辑插画风统一视觉语言的一部分。Step 4确定宽高比Determine Aspect Ratio时间线类型宽高比理由水平时间线21:9 或 16:9宽幅适合左→右流动垂直时间线9:16竖幅适合上→下推进均衡/紧凑1:1方形适合较短时间线长历史跨度21:9最大宽度容纳更多事件默认16:9水平——经典时间线方向。结合源码说明nano-banana-pro模型把--size用于分辨率档位1K/2K/4K宽高比必须通过独立的--aspect-ratio参数传入合法值1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 9:16, 16:9, 21:9默认 16:9。若把宽高比数值传给--sizeGenerate.ts 的参数校验会直接报错。Step 5执行生成Execute Generationbun run ~/.claude/skills/Art/Tools/Generate.ts \ --workflowTimelines \ --model nano-banana-pro \ --prompt [YOUR PROMPT] \ --size 2K \ --aspect-ratio 16:9 \ --output /path/to/timeline.png模型推荐nano-banana-pro——本工作流的默认且唯一模型。它能在编辑插画美学内可靠处理日期标签与事件说明文字。生成后立即打开预览open /path/to/timeline.png关于--workflowTimelines为什么是必须的源码级解释--workflow参数不是可选装饰而是 Generate.ts 中enforceWorkflowDiscipline()函数强制执行的代码级门禁调用方必须传入--workflowname会校验~/.claude/skills/Art/Workflows/下确实存在同名.md或显式传入--freeform-confirmed表示放弃工作流纪律该选择会写入 stderr 留作审计两者都不传时工具会直接以非零状态退出并在 stderr 打印完整的可用工作流列表背景Art 技能必须运行命名工作流的规则过去只写在 Markdown 里、经常被忽略SKILL.md 记录了 2026-04-30 一次会话因此产出 12 张被拒图因此被移入代码强制。也就是说正确的调用链是先读取 Timelines.md → 按模板构造提示词 → 带--workflowTimelines调用 Generate.ts——这个 flag 就是你读过并遵循了工作流的显式声明。Step 6验证MANDATORY Validation必须满足Must Have清晰的时间流动——明显随时间推进可读的日期/标签——所有文字在层级中清晰可辨插画化里程碑——每个节点都有视觉隐喻手绘时间线——有机线条不是数字直线叙事弧线可见——展示转变而不只是日期策略性用色——紫色只出现在关键时刻而非到处使用可扫读——一眼就能跟上推进过程禁止出现Must NOT Have完全笔直的时间线通用的无聊里程碑标记只有圆点无法辨认的日期或杂乱文字过多里程碑信息过载色彩混乱所有东西都被高亮看起来像甘特图或商务时间线验证失败时的修复对照表问题修复时间线太直Organic hand-drawn line, slight waviness, imperfect curve没有视觉趣味Small illustrated metaphors at each milestone showing the eras character文字不可读增大间距、强化字体层级字号差过于杂乱把里程碑缩减到 4-6 个关键点简化看起来太商务引用 editorial illustration style, hand-drawn sketch aesthetic缺少叙事强调能表现转变的隐喻seedling → storm → sunrise五、示例用例Example Use Cases示例 1AI Winter → Spring → Summer时间线1970s → 2025 → Future里程碑Winter雪花、Thaw冰融化、Spring新芽、Summer太阳用色Deep Learning Breakthrough2012标紫色方向水平 16:9示例 2Security Thinking Evolution安全思维演变时间线2000 → Present里程碑每个时代一个隐喻fortress → ecosystem → adaptive用色范式转换处标紫色方向垂直 9:16示例 3Startup Journey: Idea to Scale时间线Year 0 → Year 5里程碑Seedling → Sprout → Tree → Forest用色融资轮标青色teal实现盈利标紫色方向水平 21:9六、快速参考Quick Reference时间线公式1. Define timeline structure (subject, span, milestones, narrative) 2. Design layout (orientation, metaphors, spacing) 3. Construct prompt with illustrated progression 4. Choose aspect ratio for orientation 5. Generate with nano-banana-pro 6. Validate for clarity and visual narrative配色策略时间线主轴Black1-2 个关键时刻Purple支撑性事件Teal文字Charcoal隐喻选择为每个时代选择简单、可辨识的图标图标要能体现那个时期的氛围/特征整个推进过程要能讲出一个视觉故事。七、进阶实践要点结合 SKILL.md 与 Generate.ts 源码实际使用 Timelines 工作流时还有几个值得注意的操作细节先输出到 Downloads 再使用所有生成图像默认写入$LIFEOS_DOWNLOADS_DIR未设置时默认为~/Downloads/禁止直接输出到项目目录必须等用户在预览器中确认后再拷贝到最终位置如博客public/images/。这是 Art 技能的强制性纪律。环境变量与密钥nano-banana-pro需要GOOGLE_API_KEYGenerate.ts 的loadEnv()会依次尝试${LIFEOS_DIR}/.env与~/.claude/.envflux与nano-banana需要REPLICATE_API_TOKEN。依赖在 package.json 中声明google/genai、replicate用bun install安装Bun 运行时规范见 CLAUDE.md。生成后用读图工具目检SKILL.md 明确要求生成成功不等于可用必须实际查看图像确认时间线方向、日期可读性与叙事弧线后再宣告完成。执行日志完成任意 Art 工作流后向~/.claude/LIFEOS/MEMORY/SKILLS/execution.jsonl追加一条 JSONL 记录含 skill、workflow、输入摘要、状态与耗时便于后续追踪。结语Timelines 工作流的本质是**叙事先于排版**先用结构化模板想清楚演化什么、跨度多少、哪几个里程碑、讲什么转变故事再通过 Generate.ts 的--workflow门禁约束图像模型执行最后用强制清单校验视觉叙事是否成立。整个流程可概括为Define → Design → Construct → Generate → Validate → Complete。按本文步骤复制命令、替换占位内容即可稳定产出符合 UL 编辑插画美学的手绘风概念时间线。【免费下载链接】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），仅供参考
