Open Design 0.8.0-preview

OD 技能教学指南

26 个 Open Design 技能的实战场景 + 用法示例 + DESIGN.md 联动手册,从入门到高阶链式组合

✍️ SORA 📅 2026-05-20 📖 12 个场景 · 26 个技能

这 26 个技能从 Open Design 0.8.0-preview 提取, 配合 vault 内的 152 套品牌 DESIGN.md 参考库使用。 所有技能已注册在 .claude/skills/od-*,直接在对话中调用即可。

01两种技能类型

26 个技能分为两类,用法完全不同:

类型数量特征怎么用
🎯 模板型 6 SKILL.md 里有详细的 HTML/CSS/布局规范,Agent 直接按规格产出 直接说"用 od-xxx 把这个内容做成..."
📡 编目型 20 SKILL.md 是"发现入口",告诉 Agent 有这个能力可用 说"用 od-xxx 帮我...",Agent 会自驱动查上游

核心原则:不用记分类,直接用触发词调用。能跑的就能跑,Agent 会自动判断。


02速查表:一页掌握所有技能

🎯 模板型技能(直接产出)

技能触发词产出物规格一句话
od-card-xiaohongshu小红书/知识卡片HTML 知识卡片1080×1440, N 张把内容拆成小红书风卡片
od-data-report数据报告/周报/KPIHTML 数据报告Chart.js, KPI 卡片数据变成可视化报告
od-deck-open-slide-canvas开放画布/deck/PPTHTML 幻灯片1920×1080, 4 配色做设计感演讲 deck
od-poster-hero海报/朋友圈海报HTML 竖版海报1080×1920做强视觉朋友圈海报
od-article-magazine杂志文章/公众号HTML 杂志风文章A4 长页面笔记变杂志级长文
od-slidesslides/pptx.pptx 文件PptxGenJS生成可下载 PPTX

📡 编目型技能(Agent 自驱动)

技能触发词能力
od-copywriting营销文案/广告语写改写落地页、广告、主页文案
od-pdfPDF/文档提取提取文本、生成 PDF、处理表单
od-brand-guidelines品牌规范/VI应用品牌色和字体体系
od-d3-visualizationD3 图表/交互图D3.js 交互式数据可视化
od-enhance-prompt提示词增强用设计规范增强 AI 提示词
od-taste-skill设计品味/anti-slop提高设计差异度、调节视觉密度
od-card-twitterTwitter/X 卡片社交媒体分享卡片
od-social-x-post-cardX 帖子社交平台帖子视觉卡片
od-frame-data-chart-nytNYT 图表纽约时报风格数据图表
od-docWord 文档/docx创建编辑 .docx 格式文档
od-design-review设计评审对设计稿做结构化评审
od-color-expert配色/色彩专业配色方案建议
od-marketing-psychology营销心理学心理学原理融入营销
od-web-design-guidelines网页设计规范网页设计最佳实践指南
od-hand-drawn-diagrams手绘风格/草图手绘风格图表和示意图
od-brainstorming头脑风暴结构化创意发散
od-apple-higApple HIGApple 设计规范参考
od-shadcn-uishadcn/ui组件库参考
od-design-brief设计简报结构化设计需求文档
od-algorithmic-art算法艺术代码生成视觉艺术

03场景一:小红书知识卡片

你的场景:把一篇长文或课程笔记拆成多张小红书风格卡片,发在小红书或微信。

💡 直接用法

技能:od-card-xiaohongshu · 规格:1080×1440 (3:4) · N 张自动拆分

用 od-card-xiaohongshu 把下面这篇文章做成 5 张小红书知识卡片:

"家庭教育中最重要的三件事:第一,安全感——让孩子知道父母永远在;第二,自主感——把选择权还给孩子;第三,胜任感——让孩子体验'我能行'的快乐……"

要求:莫兰迪粉色系 · 第 1 张封面标题"家庭教育三件核心事" · 第 2-4 张每张一个观点 · 第 5 张总结 + CTA

🚀 进阶:搭配品牌 DESIGN.md

参考 projects/design/design-systems/xiaohongshu/DESIGN.md 的配色风格,用 od-card-xiaohongshu 把这份课程笔记做成 7 张知识卡片。

04场景二:数据周报 / 月报可视化

你的场景:日报系统有数据了,想生成可视化周报/月报 HTML 页面分享给团队。

💡 DS Token 周报示例

技能:od-data-report · 规格:KPI 卡片 + Chart.js + 洞察块

用 od-data-report 把这份 DS 数据生成可视化周报:
数据:DS Token 日消耗 3.2M / 3.8M / 4.1M / 3.5M / 4.6M / 5.2M / 4.8M(本周逐日)
上周同期:2.8M / 3.0M / 3.2M / 3.1M / 3.5M / 3.8M / 3.6M
总 API 调用次数:1523 次 · 活跃项目数:7 · 平均响应延时:320ms

要求:标题"DS Token 周报 · W21" · KPI 卡片显示本周总量/日均/环比 · 日消耗折线图含上周对比 · 底部 3 条关键发现

05场景三:演讲 PPT / 课件 Deck

你的场景:做「家庭教育」或「AI 工具」主题的演讲课件。

💡 情绪管理课件

技能:od-deck-open-slide-canvas · 规格:1920×1080 · 4 套调色板可选

调色板速选

名称氛围适用
Ash & Lime灰绿现代科技/AI/工具类
Sea Indigo深蓝优雅教育/专业/正式
Mate Mocha棕咖温暖生活/人文/家庭教育
Pearl Rose粉玫瑰女性/亲子/温馨话题

用 od-deck-open-slide-canvas 做一份"家庭教育中的情绪管理"演讲 deck,Mate Mocha 配色,10 页:
封面 → 目录 → "为什么我们容易对孩子发火?" → "情绪ABC理论" → "常见情绪触发点" → "暂停四步骤" → "情绪日记模板" → Q&A → 结尾

06场景四:朋友圈营销海报

你的场景:发朋友圈推广课程/讲座/活动。

💡 课程推广海报

技能:od-poster-hero · 规格:1080×1920 (9:16) · 渐变 + 几何装饰

用 od-poster-hero 做一张课程推广海报:大标题"家庭教育公益讲座" · 副标题"先搞定关系,再搞定学习" · 主讲人 SORA · 5月25日 19:30 · 东逸湾社区中心

要求:紫色系渐变 · 大 emoji 🎯 在顶部 · 二维码用 SVG 圆框占位 · 文字白色,关键信息金色高亮

07场景五:杂志风长文 / 公众号文章

你的场景:把笔记/文章生成读起来像精品杂志的 HTML 页面。

💡 Obsidian 笔记转杂志文章

技能:od-article-magazine · 规格:A4 长页面 · 衬线标题 + 无衬线正文

用 od-article-magazine 把下面这篇笔记变成杂志风文章:
标题"AI 时代,我为什么还在坚持用 Obsidian" · 作者 SORA · 5 分钟阅读

要求:顶部 hero 大标题+引言 · 正文 serif 标题 · 引用块蓝色 accent 边线 · 代码块展示 Obsidian 示例 · 章节间 ornament 分隔 · 文末"觉得有用欢迎转发"卡片

08场景六:品牌视觉规范落地

你的场景:为个人 IP / 课程品牌定义视觉规范,或参考大牌风格做设计。

💡 品牌 VI 定义

技能:od-brand-guidelines + DESIGN.md 库 · 先读参考再产出

用 od-brand-guidelines 参考 projects/design/design-systems/minimal/DESIGN.md 的简洁感和 warm-editorial/DESIGN.md 的温暖感,为我的"SORA 家庭教育"品牌定义 VI 规范。
品牌定位:温暖、专业、亲和 · 目标人群:3-12 岁家长 · 输出:品牌色板、字体建议、应用示例

🚀 品牌落地产出

先读 projects/design/design-systems/linear-app/DESIGN.md 的配色和字体,然后用 od-card-xiaohongshu 做一组 Linear 风格的知识卡片。

09场景七:数据图表(NYT / D3 风格)

你的场景:需要高质量数据可视化图表用于文章配图或报告。

💡 NYT 风格调查图表

技能:od-frame-data-chart-nyt

用 od-frame-data-chart-nyt 把下面这组数据做成纽约时报风格的调查图表:"中国家庭教育支出分布"
数据:学前教育 25% · 义务教育 35% · 课外辅导 30% · 其他 10%
图表类型:水平条形图 + 数据标签 · 风格:白底黑字,干净,高信息密度

💡 D3 交互关系图

技能:od-d3-visualization

用 od-d3-visualization 把这组关系数据做成力导向交互图:
节点:AI 工具 · Obsidian · DAO 笔记 · 翻唱 · Open Design · 日报系统
关系:可拖拽 · hover 显示标签 · 过渡动画

10场景八:PDF / DOCX 文档输出

你的场景:需要可打印/分享的正式文档。

💡 课程讲义 PDF

技能:od-pdf

用 od-pdf 把下面这份课程大纲转成 A4 PDF 讲义,可打印:
课程名称:家庭教育基础课 · 第一讲:认识孩子的情绪 · 第二讲:有效沟通技巧
要求:A4 竖版 · 每讲一页 · 标题突出 · 留白做笔记用

💡 Word 课程方案

技能:od-doc

用 od-doc 生成一份 Word 文档格式的课程方案,含标题页、目录、正文分节,适合提交给学校合作方。

11场景九:营销文案 + 心理学技巧

你的场景:为课程/产品写推广文案。

💡 讲座推广文案

技能:od-copywriting + od-marketing-psychology

用 od-copywriting 写一条"东逸湾家庭教育讲座"的推广文案,配合 od-marketing-psychology 加入心理学技巧:
稀缺性"限 30 名额" · 社会认同"已有 120 位家长报名" · 损失厌恶"别让孩子输在情绪教育上"
目标人群:3-12 岁家长 · 场景:朋友圈+社区群 · 字数:150 字以内

12场景十:设计评审 + 品味调优

你的场景:AI 生成的视觉设计总觉得"太 AI 了",需要调校。

💡 Anti-slop 品控

技能:od-taste-skill + od-design-review

用 od-taste-skill 审阅这份设计稿的 HTML 代码,给出 anti-slop 改进建议:
降低 visual density · 增加设计差异度 · 调整 motion intensity
然后 od-design-review 做结构化评审:色彩/排版/可读性/品牌一致性评分

13场景十一:头脑风暴 + 创意发散

你的场景:卡选题了,需要快速出创意。

💡 课程选题发散

技能:od-brainstorming

用 od-brainstorming 帮我针对"暑期家庭教育课程"做选题发散:
目标人群 6-12 岁家长 · 线上直播+社群 · 21 天
输出 20 个选题方向 · 每方向一句话描述 · 标记 TOP 5 · 按痛点型/技能型/认知型/实操型分类

14场景十二:AI 绘画提示词增强

你的场景:用 Midjourney / DALL-E 生成配图但提示词太淡。

💡 Prompt 增强

技能:od-enhance-prompt

用 od-enhance-prompt 增强这组 AI 绘画提示词:
"a mother and child reading a book, warm lighting, cozy room"
要求:加入构图指引(黄金比例/三分法)· 加入色彩描述 · 加入光影描述 · 加入风格参考 · 中英对照


15高阶玩法:技能链式组合

当单技能不够时,链式调用两个以上技能完成复杂任务。

品牌规范 → 知识卡片 → 海报

1. 读 xiaohongshu/DESIGN.md 提取配色
2. 用 od-card-xiaohongshu 做 5 张课程知识卡片
3. 用 od-poster-hero 做一张推广海报
→ 一套内容,两套视觉物料

数据报告 → 图表 → PPT

1. 用 od-data-report 生成 DS 周报 HTML
2. 用 od-frame-data-chart-nyt 把关键数据做成 NYT 风格图表
3. 用 od-deck-open-slide-canvas 做周报汇报 PPT
→ 从原始数据到正式汇报全流程

头脑风暴 → 文案 → 海报

1. 用 od-brainstorming 发散选题
2. 选定 TOP 1 后用 od-copywriting 写推广文案
3. 用 od-poster-hero 做朋友圈海报
→ 从创意到成品的完整营销链路

品控流程(每次视觉产出后必过)

1. 用 od-taste-skill 审阅设计稿,提 anti-slop 建议
2. 用 od-design-review 做结构化评审
3. 用 od-color-expert 验证配色合理性
→ 确保每次出品有基本的设计品位


16DESIGN.md 参考库用法

152 套品牌 DESIGN.md 是静态设计参考。在任何设计任务中引用它们来注入品牌基因:

使用公式:参考 projects/design/design-systems/品牌/DESIGN.md 的配色/字体规范,用 技能名 产出 产物

常用品牌参考

想要的感觉参考品牌
简洁科技感Linear · Vercel · Cursor
温暖亲民Airbnb · 小红书
高端专业Apple · Stripe
年轻活力Notion · Figma · Duolingo
教育感Neutral Modern · Warm Editorial
极简留白Minimal · Clean · Contemporary
大胆视觉Nike · Spotify · Playstation

设计风格参考

库里有 50+ 纯风格 DESIGN.md,不绑定品牌:

参考 bento/DESIGN.md 的卡片布局风格 · 参考 glassmorphism/DESIGN.md 的毛玻璃效果 · 参考 neobrutalism/DESIGN.md 的大胆边框+鲜艳配色


17快速决策树

不知道用哪个技能时,按这个判断:

你想产出什么?
├─ 📱 多张竖版知识卡片 → od-card-xiaohongshu
├─ 🖼️ 单张朋友圈海报 → od-poster-hero
├─ 📊 数据可视化报告 → od-data-report
├─ 📽️ 演讲 PPT/课件 → od-deck-open-slide-canvas
├─ 📖 杂志风长文 → od-article-magazine
├─ 📄 可下载 PPTX → od-slides
├─ 📈 交互图表 → od-d3-viz / od-frame-data-chart-nyt
├─ 📋 PDF / Word → od-pdf / od-doc
├─ ✍️ 营销文案 → od-copywriting
├─ 🎨 设计品质提升 → od-taste + od-design-review
└─ 💡 创意发散/选题 → od-brainstorming

同时需要品牌感?
→ 先读 design-systems/<品牌>/DESIGN.md
→ 再用对应技能
    

💡 觉得有用?把这页加入书签,下次做设计时直接翻到对应场景复制 prompt。

全部 26 个技能已注册 · 152 套 DESIGN.md 在 vault 内可直接引用 · Open Design 仓库 →