Internal Design Skill · steve-design · v1.0
Steve Design
Skill 文档
一个 AI Skill，覆盖所有设计与内容创作场景。
五行配色 · HTML 幻灯片 · 公众号排版 · 反 AI 味写作
配色 / Moodboard
公众号文章
HTML 幻灯片
写作规范
去 AI 味
SKILL.md · 路由表
Quick Routing
AI 按任务类型选择对应 reference 文件，按需加载，不全读。
| 任务 | Reference 文件 | 核心规则 |
|---|
| 配色 / Moodboard | colors.md | 五行框架选行，8色阶输出 |
| PPT 暗色翻页 | presentation.md | JS 翻页，aiyou-pitch 风格 |
| HTML 演讲稿 | presentation.md | CSS scroll-snap，不用 JS 驱动 |
| 公众号文章 | wechat.md | 火行配色，16px 正文，uploadimg API |
| 写作 / 去AI味 | voice.md | 禁词清单，场景开头 |
全局红线 · Core Prohibitions
任何任务都适用
禁止清单
以下规则无论哪种任务，一律适用。违反即返工。
- 禁止 emoji — 幻灯片、文章、配色卡片，任何位置都不能有
- 禁止 CSS 变量
var(--xxx) — 公众号会过滤掉
- 禁止外部字体
@import / Google Fonts — 公众号屏蔽
- 禁止 position: fixed/absolute — 公众号不支持
- 禁止 AI 套话开场 — "在当今时代…" / "随着…的发展…" / "不可否认的是…"
- 禁止对冲短语 — "某种程度上" / "不同的人有不同的看法"（有观点直接说）
- 禁止自我贴标签 — 干货 / 硬核 / 深度好文
- 深色背景透明度 — labels ≥ 0.70，body ≥ 0.82，任何文字不低于 0.50
- 移动端字号下限 — 正文 ≥ 16px，可读文字 ≥ 13px，标题 ≥ 18px
references/colors.md · 五行配色
Wu Xing Color System
每一行对应一种设计语言和品牌原型。选对行，配色就有了方向。
| 行 | 主色 Hex | 设计语言 | 适用品牌 |
|---|
| 木 Wood | #4CAF65 | 有机感、曲线、留白 | 健康、教育、可持续 |
| 火 Fire | #E8401A | 高对比、大字、冲击感 | 科技创业、餐饮、运动 |
| 土 Earth | #C9912A | 衬线字体、对称、金感 | 金融、奢品、文化 |
| 金 Metal | #B8C8D8 | 极简、网格、无装饰 | SaaS、医疗、汽车 |
| 水 Water | #2B7CB0 | 深邃、流动、信任 | AI、金融科技、咨询 |
相生配色规则
选主色所在行，取其"生"的下一行做辅色，天然和谐：
木→火 / 火→土 / 土→金 / 金→水 / 水→木
品牌选行速查
- 能量感/创业/突破 → 火 Fire
- 高端/传承/金融 → 土 Earth
- 自然/健康/可持续 → 木 Wood
- 精准/企业/极简 → 金 Metal
- 智识/数据/AI → 水 Water
- 玄学感/最百搭 → 火+土 黑底（炎土并立）
references/palettes.md · 40色阶
Complete 40-Tone Palette
每行 8 个色阶，从最深背景到最浅底色。生成 moodboard 时直接取值。
木 Wood
| 角色 | 中文名 | Hex |
|---|
| 最深背景 | 暗林 | #0D2914 |
| 深色 BG | 深林 | #1A4A24 |
| 主色 | 苍翠 | #2E7D3C |
| 强调色 | 新绿 | #4CAF65 |
| 中间调 | 翠烟 | #7CC890 |
| 浅色辅助 | 嫩芽 | #A8D5A2 |
| 淡色 | 薄荷 | #CEE8C8 |
| 最浅底色 | 晨露 | #EBF5E8 |
火 Fire
| 角色 | 中文名 | Hex |
|---|
| 最深背景 | 暗炭 | #3D0808 |
| 深色 BG | 深火 | #7B1010 |
| 主色 | 朱砂 | #C01E1E |
| CTA | 炎橙 | #E8401A |
| 中间调 | 赤焰 | #F06B1F |
| 高亮 | 琥珀 | #F5A623 |
| 浅色辅助 | 烛光 | #FAD08A |
| 最浅底色 | 晨曦 | #FDE8D0 |
土 Earth
| 角色 | 中文名 | Hex |
|---|
| 最深背景 | 焦土 | #2E1A08 |
| 深色 BG | 深土 | #6B4226 |
| 主色 | 赭石 | #A67840 |
| 品牌色 | 中黄 | #C9912A |
| 强调色 | 沙金 | #D4A853 |
| 中间调 | 麦秸 | #E2C47A |
| 浅色辅助 | 象牙 | #EDD9A3 |
| 最浅底色 | 米白 | #F5E6C8 |
金 Metal
| 角色 | 中文名 | Hex |
|---|
| 最深背景 | 玄铁 | #0A0F14 |
| 深色 BG | 铸铁 | #1E2830 |
| 主色 | 钢青 | #3A4A58 |
| 中深调 | 铁灰 | #607888 |
| 中间调 | 银灰 | #8FA0B0 |
| 高亮 | 霜银 | #B8C8D8 |
| 浅色辅助 | 冰雾 | #D8E4EE |
| 最浅底色 | 月白 | #EBF0F5 |
水 Water
| 角色 | 中文名 | Hex |
|---|
| 最深背景 | 深渊 | #05101E |
| 深色 BG | 玄夜 | #0A1A2E |
| 主色 | 沧海 | #1A3A6B |
| 强调/CTA | 湛蓝 | #2B7CB0 |
| 辅助色 | 青碧 | #2C8C99 |
| 高亮 | 碧波 | #5BAAD0 |
| 浅色辅助 | 天光 | #A0CCEB |
| 最浅底色 | 晴空 | #D0E8F5 |
references/combos.md · 26种配色方案
Cross-Element Combinations
单行纯色 15 种 + 相生跨行 6 种 + 特殊对比 4 种 + 黑底系列 2 种
单行纯色（15）
| 方案名 | 中文名 | 背景色 | 适用场景 |
|---|
| Dark Flame Core | 暗火核心 | #1A0808 | 高端科技、暗色模式 |
| Blazing Ascent | 烈焰升腾 | #C01E1E | 发布页、大促 |
| Warm Dawn | 暖光晨曦 | #FDE8D0 | 餐饮、消费品 |
| Millennial Foundation | 千年之基 | #1A0E06 | 奢品、收藏品 |
| Earth Carries All | 厚土承载 | #A67840 | 传统文化、茶品牌 |
| Warm Cream Glow | 米白暖阳 | #F5E6C8 | 金融、B2B 服务 |
| Forest Night | 深林之夜 | #0D2914 | 有机护肤、可持续 |
| Spring Awakening | 春日萌发 | #2E7D3C | 健康 App、教育 |
| Morning Fresh | 晨露清新 | #EBF5E8 | 医疗、有机电商 |
| Dark Steel | 玄铁深夜 | #0A0F14 | 汽车、精密仪器 |
| Frost Minimal | 霜白极简 | #EBF0F5 | 企业科技、医疗 |
| Iron Will | 钢铁意志 | #3A4A58 | B2B 数据系统 |
| Ocean Intelligence | 深海智慧 | #05101E | AI 产品、金融科技 |
| Azure Horizon | 碧海青天 | #1A3A6B | 银行、保险、政务 |
| Clear Sky | 晴空万里 | #D0E8F5 | 医疗、健康咨询 |
相生配色（6）
| 关系 | 中文名 | 渐变方向 | 适用场景 |
|---|
| 木生火 | 生长破局 | #0D2914→#7B1010 | 创业、成长型产品 |
| 火生土 | 烈焰生金 | #7B1010→#6B4226 | 餐饮、节日电商 |
| 土生金 | 厚土凝华 | #2E1A08→#1E2830 | 精品投行、高端咨询 |
| 金生水 | 锋锐化流 | #0A0F14→#05101E | SaaS、数据分析 |
| 水生木 | 润泽萌发 | #05101E→#0D2914 | EdTech、AI 教育 |
| 五行并聚 | 木火土金水 | 多色 | 品牌系统封面 |
特殊对比（4）
| 方案 | 中文名 | 核心色 | 适用场景 |
|---|
| Water × Fire | 冰火之间 | #2B7CB0 + #E8401A | 游戏、对抗产品 |
| Wood × Metal | 自然科技 | #4CAF65 + #B8C8D8 | 绿色科技、清洁能源 |
| Fire × Metal | 烈金之境 | #E8401A + #B8C8D8 | 时尚、运动奢品 |
| Earth × Water | 沉稳智流 | #C9912A + #2B7CB0 | 老牌金融数字化 |
黑底系列（2）
| 方案 | 中文名 | 底色 | 适用场景 |
|---|
| All Elements in Dark | 万象归暗 | #080807 | 品牌系统、产品线区分 |
| Fire + Earth on Dark ★ | 炎土并立 | #0A0806 | 玄学感品牌、最百搭推荐 |
references/presentation.md · HTML 幻灯片
HTML Presentation Specs
两种模式，按场景选。不要混用。
Mode 1：暗色翻页（aiyou-pitch 风格）
适用：投资人 Pitch、产品 Demo、VC Deck。键盘/点击翻页。
body { background: #09090F; overflow: hidden; height: 100vh; }
.slide { position: absolute; inset: 0; display: none; }
.slide.active { display: flex; animation: fadeUp 0.45s ease; }
@keyframes fadeUp {
from { opacity:0; transform:translateY(16px); }
to { opacity:1; transform:translateY(0); }
}
- 导航：ArrowLeft/Right + click →
showSlide(n)
- 页码：右下角，11px，letter-spacing 3px
- 渐变横线：52px × 3px，品牌色，border-radius 2px
- 导出：
npx decktape generic --key=ArrowRight --size 1920x1080 file.html out.pdf
Mode 2：亮色滚动（steve-speech 风格）
适用：演讲辅助、移动端展示。iPhone Safari 必须用 CSS scroll-snap，不能用 JS 驱动滚动。
body { overflow: hidden; position: fixed; width: 100%; height: 100%; }
.deck {
position: fixed; overflow-y: scroll;
scroll-snap-type: y mandatory;
-webkit-scroll-snap-type: y mandatory;
height: 100%; width: 100%;
}
.slide {
height: 100vh;
scroll-snap-align: start;
scroll-snap-stop: always;
flex-shrink: 0;
}
- 背景：
#F8F8FC，文字：#111118
- JS 只做被动监听（更新页码），绝不驱动滚动
- 导出：Puppeteer A4（
printBackground: true），不用 decktape
字号规范
| 元素 | 字号 | 字重 |
|---|
| 主标题 | clamp(40px, 6vw, 80px) | 900 |
| 章节标题 | 28-36px | 700 |
| 正文 | 16-18px | 400 |
| Eyebrow/标签 | 11-12px，letter-spacing 3-4px，uppercase | 300-500 |
| 数据大字 | 48-64px | 900 |
常用幻灯片布局
| 类型 | 结构要点 |
|---|
| 封面 | tag pill + 大标题 + 副标题 + 渐变横线 + 作者/日期 |
| 数据页 | eyebrow + 超大数字(64-80px) + 单位 + 支撑说明 |
| 双栏 | grid 1fr 1fr，左文字右图表，gap 48-64px |
| 引用 | 大引号(opacity 0.3) + 引用文字(Serif 24-28px italic) + 来源 |
| 时间轴 | 横向 flex，点(12px)+线(1px dim)+标签，活跃项用 accent 色 |
| 列表(3-4项) | 左侧大号码(48px, opacity 0.3) + 右侧标题+描述 |
references/wechat.md · 公众号排版
WeChat Article Typography
火行双主色系统。朱砂做大标题，炎橙做栏目标题和引用块竖线，琥珀做 aside。
火行排版规范
| 元素 | 样式 |
|---|
| 文章大标题 | #C01E1E，26px，bold，居中 |
| 标题下分割线 | border-top: 2px solid #C01E1E |
| 作者署名 | #999，14px，右对齐，"文 | Steve Wang" |
| 栏目标题 | #E8401A，17px，bold，border-bottom: 2px solid #E8401A |
| 引用块 | border-left: 3px solid #E8401A，padding-left 12px，16px bold |
| Aside/callout | bg #fdf6f0，border-left: 3px solid #F5A623，14px |
| 正文 | #2C2C2C，16px，line-height 1.95 |
| 图说 | #999，13px，居中，italic |
| 代码块 | bg #1a1008，text #e8dfd0，monospace 13px |
间距节奏
- 段落间距：20-24px
- 正文 → 图片：16-20px
- 图片 → 图说：6-8px
- 图说 → 正文：20-24px
- 正文 → 栏目标题：28-36px
API 流程
关键区别
文章内容图片用 uploadimg（返回 URL 含 from=appmsg）。
封面图用 add_material（返回 media_id）。
两个接口返回格式不同，用错就显示不了。
# 1. 获取 token（每次操作前重新获取，7200秒过期）
curl "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APP_ID&secret=SECRET"
# 2. 上传文章内容图片 → 用 uploadimg
curl -X POST "https://api.weixin.qq.com/cgi-bin/media/uploadimg?access_token=TOKEN" \
-F "media=@/path/image.png;type=image/png"
# 返回：{ "url": "http://mmbiz...?from=appmsg" } ← 这个 URL 才能用
# 3. 上传封面图 → 用 add_material
curl -X POST "https://api.weixin.qq.com/cgi-bin/material/add_material?access_token=TOKEN&type=image" \
-F "media=@/path/cover.png;type=image/png"
# 返回：{ "media_id": "..." } ← 用这个作为 thumb_media_id
# 4. 推草稿
curl -X POST "https://api.weixin.qq.com/cgi-bin/draft/add?access_token=TOKEN" \
-H "Content-Type: application/json;charset=utf-8" \
-d '{"articles":[{"title":"标题","thumb_media_id":"COVER_ID","author":"Steve Wang","content":"HTML..."}]}'
内容规则
- 只传
<body> 内部 HTML，不含 <html><head><body> 标签
- 所有样式必须内联（
style="..."），class 样式会被过滤
- 列表标签间有空白会渲染成空 bullet，提交前用正则压缩
references/voice.md + before-after.md · 写作规范
Steve's Voice — 反 AI 味写作
把审美和语言感写进规则。每条都有对应的真实教训。
语言指纹
- 短句。 一个意思，停。
- 场景开头，不用背景开场。 不是"今天我想聊聊X"
- 先说观点，再展开。 不是"有人认为A，也有人认为B"
- 具体不模糊。 "凌晨一点，茶凉了" 不是 "很晚的时候"
- 每句话都有信息量。 没有填充句。
禁用开场白
- "在当今时代…" / "随着…的发展…"
- "不可否认的是…" / "值得注意的是…"
- "总的来说…" / "综上所述…"
- "作为一个X，我深刻体会到…"
- "首先…其次…最后…"（列表伪装成散文）
禁用词（AI 味）
深刻 / 全面 / 系统性 / 赋能 / 落地 / 闭环 / 生态 / 颠覆性 / 革命性 / 划时代 / 探索 / 解读 / 剖析 / 干货 / 硬核
有效开头的三种模式
- 场景：时间 + 地点 + 一个具体细节 → 然后是问题
- 矛盾：说显而易见的事，然后立刻打破它
- 挑衅：一句让大多数人想反驳的话
Before / After 对比
Before · AI 味
在当今人工智能飞速发展的时代，越来越多的企业开始意识到品牌设计的重要性。作为一名创业者，我深刻体会到，一套好的视觉系统对于品牌建设具有不可忽视的作用。
After · 人味
那天快零点了。桌上的茶早凉了，我还在盯着屏幕——给一个新项目选颜色。颜色都挺好看的，但就是感觉不对。
Before · AI 味
五行理论作为中国传统文化的重要组成部分，蕴含着古人对自然规律的深刻理解。将其应用于现代品牌设计，不仅能够体现文化自信，也能够为品牌注入独特的东方美学韵味。
After · 人味
青赤黄白黑。这套颜色体系，比潘通早了两千年。
Before · AI 味
综上所述，五行配色系统为我们提供了一套系统化的颜色选择框架。希望本文能够对大家的品牌设计工作有所启发。你在品牌设计中有哪些心得？欢迎在评论区分享！
After · 人味
颜色是表面，但选颜色这件事逼着你想清楚：我是谁，我想让人感受到什么。那天凌晨一点选完颜色，我觉得自己终于想清楚了这个问题。
Before · AI 味
Skill 是一种模块化的知识包，它能够帮助 AI 系统更好地理解特定领域的知识，从而提升其在相关任务中的表现。通过合理设计 Skill，我们可以实现 AI 能力的定向增强。
After · 人味
一个 skill 就是一个文件。AI 读到它，相当于接受了一次专业培训。把规则写死，AI 就不会乱来了。
改写规律总结
| AI 套路 | 人味替换 |
|---|
| 宏大时代背景开场 | 具体场景，一个细节 |
| "深刻体会到" | 直接说那个体会 |
| 三段论结构 | 一个观点 + 一个证据 + 一个余韵 |
| "综上所述" | 删掉，直接结尾 |
| 反问+邀请评论 | 留一个开放问题，不求互动 |
| 修饰词堆叠 | 一个动词，一个名词 |