通过串联 Open Design 技能搭建的五条端到端工作流
超越单一功能——本文介绍五条真实的端到端创意流水线,你可以在 Open Design 中通过在同一会话里串联技能、设计系统和媒体流水线来运行它们:路演资料包、营销活动、移动应用 + 开发交接、内容系列,以及完整的设计系统落地。基于 Panda Making Money 的拆解。
大多数教程一次只展示一个功能。本指南讲的是当你把 Open Design 的各项功能串联成完整的端到端流水线时,它会变成什么——五条真实的工作流,每条都能在一次会话中产出一整套连贯的交付物。它沿用 Panda Making Money 在他的视频中给出的拆解,并根据当前版本重写、更新。观看上方视频了解全貌,或继续阅读文字版。
幻灯片模式:选择一个演示文稿类别,并 fork 一个示例作为你的起点。
是什么让串联成为可能
Open Design 是一个开源、本地优先的设计平台,它运行在你已经使用的编码 agent 之上(Claude Code、Codex、Cursor、Gemini、OpenCode 等等)。正是三个设计取舍让你能把各项功能串成真正的流水线:
- 技能就是文件,而非插件——每个技能都给 agent 提供针对某一界面(落地页、仪表盘、演示文稿、移动应用……)的规则。放入一个文件夹,重启,即可生效。
- 设计系统是可移植的
DESIGN.md——品牌在磁盘上定义一次,并在一次会话中的每一件产物上一致地应用。 - 一个真实的工作目录——agent 读写真实的文件、生成媒体,并输出你可以下载的 PPTX / HTML / ZIP / MP4。
再加上探询表单(一开始的提问)、视觉方向选择器,以及在输出渲染前的自我批判环节,agent 的表现就不再像一个聊天框,而更像一名按简报推进工作的设计师。这就是下面每条工作流所依托的基础。
工作流 1 —— 产品路演 & 上市资料包
创始人需要的不止是一份演示文稿——他们需要一套都像出自同一品牌的素材。填写探询表单,选择视觉方向,agent 就会构建你的 DESIGN.md 品牌系统,运行演示文稿技能做路演,运行原型技能做一个可交互的演示页面,并用媒体流水线生成配套图像——全部使用同一套视觉语言。导出一份用于路演的 PPTX、一个用于产品页的 HTML 原型,以及一段用于社媒的 MP4 预告片。一次会话,一个品牌,一个故事。
工作流 2 —— 端到端营销活动
先在 DESIGN.md 中确立品牌,然后依次运行技能:用于活动的邮件模板、作为落点的 SaaS 落地页,以及用于推广的社媒素材,由媒体流水线生成匹配的图像和片段。设备外框展示移动端和桌面端,agent 生成 A/B 变体,视觉方向在每个触点上都保持一致。导出一个包含完整活动交接物的 ZIP——无需在六个工具之间来回切换。
HyperFrames 画廊:由代码驱动的动效与视频作品,你可以 fork 并二次创作。
工作流 3 —— 移动应用原型 + 开发者交接
选择移动应用技能,套用一个 DESIGN.md,并描述该功能。探询表单捕捉交互流程,随后 agent 构建一个带设备外框的 iOS/Android 原型,并在 UI 中实时流式展示待办计划。在沙盒预览中与它交互,以对话方式迭代,并导出一份装在 ZIP 里的干净 HTML 交给开发者(或把该 ZIP 重新导入 Claude Design 以继续工作)。从想法到交接的紧凑闭环。
工作流 4 —— 内容系列 & 网络研讨会素材
建立一个持久化项目(由本地 SQLite 存储支撑,因此 agent 会记得你上次停在哪里)。用幻灯片技能做每一集的演示文稿,用文档页技能做配套文字,并用媒体流水线做缩略图和宣传片段。多 agent 的优势在这里得到彰显:用一个 agent 来组织内容,另一个来生成视觉——都在同一会话中——并把视觉方向锁定在 DESIGN.md 里,让每一集都保持品牌一致。
工作流 5 —— 品牌设计系统的创建 & 落地
最具战略性的一条。agent 运行品牌素材协议——定位你的品牌色、提取十六进制值,并撰写一份完整的品牌规范——然后构建一份涵盖排版、配色、间距、组件、调性与动效的完整 DESIGN.md。一旦它落在磁盘上,未来的每一次会话都会引用它:今天做一个网页原型,明天做一份演示文稿,之后再做一个文档页。一致性在文件层面得到强制保证,而且这套系统是可移植的——提交它、分享它,或把它贡献回去。
在预览中渲染的一个真实生成原型——一个深色、电影感的代理机构落地页。
何时该选它(相对于托管工具)
Panda 的坦诚定位:一款打磨精良的托管工具在开箱即用的精致度、团队协作和零配置上更胜一筹。而当你想掌控整个技术栈时,Open Design 更有优势——你的模型、你本地的数据、在 git 中做了版本管理的技能与品牌系统——以及当你想把多个步骤串成原本要横跨六个工具才能完成的流水线时。两者并不互斥;你可以在托管工具里快速起草,再把 ZIP 带进 Open Design 做更长期、自主可控、迭代式的工作。
小贴士
- 先定义
DESIGN.md——它是让流水线中每一件产物都保持品牌一致的关键。 - 在一次会话中依次运行技能,而不是每次都从头开始。
- 使用持久化项目处理跨会话的工作;agent 会从你上次停下的地方继续。
- 混用 agent——让一个模型组织内容,另一个生成视觉,都在同一会话中。
- 按格式导出——演示文稿用 PPTX,原型用 HTML,社媒用 MP4,交接用 ZIP。
常见问题
Open Design 真的能在一次会话里产出一整场营销活动吗?
能——针对同一份 DESIGN.md 和媒体流水线串联相关技能(邮件、落地页、社媒),再把全部内容导出为一个 ZIP 交接物。
它如何在众多产物之间保持品牌一致?
品牌存放在磁盘上一份可移植的 DESIGN.md 里;每次会话都引用同一个文件,因此一致性是在文件层面强制保证的,而不是靠记忆。
我能把产出交给开发者吗? 可以——导出装在 ZIP 里的干净 HTML。你也可以导入一个 Claude Design 的 ZIP,以便跨工具继续一个项目。
它免费吗? 这个应用在 Apache-2.0 下开源,本地运行免费。你只需为所连接的 agent 与提供方的模型和媒体用量付费。
本篇文字指南基于 Panda Making Money 的拆解。观看上方完整视频,并订阅 Panda Making Money 获取更多 AI 工具深度内容。