把 Agent 变成一名双色 SaaS 落地页设计师 —— 白底为主 + 黑色反色强调。
panda-skill 是一个符合 agentskills.io 开放规范的 AI Agent 技能包。
安装后，你的 Agent 将具备 "白底为主 + 黑色反色强调" 的双色 SaaS 视觉风格的完整落地页设计与 HTML 生成能力——
从 Hero 区到 5 步工作流、从能力卡到定价套餐、从多智能体协作场景到 CTA 预约演示，全流程一体化输出 pandaaiquant.com 机构方案页 视觉语言的 HTML。
视觉参考：pandaaiquant.com/solutions/institution（仅作 reference，不绑品牌）。
| # | 能力 | 产出 |
|---|---|---|
| 1 | toB SaaS 落地页 | Hero（双行标题 + 双 CTA）+ 5 步工作流闭环 + 能力卡 |
| 2 | 机构解决方案页 | 4 类服务卡（TRAFFIC / DATA / SKILL / AGENT）+ 反色底座区块 |
| 3 | 定价页 | 4 档套餐（含"★ 最受欢迎"高亮）+ 4 项加购 |
| 4 | 多智能体协作页 | Skill / Agent 库 + 3 种搭配场景 + Combo + 组合 |
| 5 | 对比说服区块 | VS 对比行（对比自建）+ Stat 统计行（4 个大数字） |
| 6 | 起始模板复用 | assets/starter-template.html 一键起步，含昼夜主题切换 |
panda 风格、熊猫风、PandaAI 风格、双色 SaaS、白底黑字 + 黑底反色、量化投研落地页、机构解决方案页、阿里普惠体、Alibaba PuHuiTi、Barlow、故障字体、AI Agent 平台落地页、多智能体协作页面、toB SaaS 落地页、toB quant landing、bicolor SaaS design、white-dominant with black accents……
输出使用 双色 SaaS — 白底为主 + 黑色反色强调 视觉语言（与纯黑底暗色主题相反，本技能默认白底）：
- 🎨 双色纪律：纯白
#FFFFFF+ 浅灰#FAFAFA+ 近黑#0F0F10（非纯#000，带微暖），无装饰性彩色 - 🔲 卡片体系：白底 + 1px 极淡边框 + 14–16px 圆角，默认扁平、hover 抬升
- ⚫ 反色锚点：选中区块反转为黑底白字（主 CTA / 软件底座 / 能力图标 / 场景徽章）作为视觉锚
- 🔤 字体系统：阿里普惠体（5 字重）+ Dream BraveGB Bold + Barlow + 猫啃网故障黑（仅 hero/发布/CTA 极少量点缀）
- 🔁 5 步工作流闭环：编号卡 + 箭头，最后回环到第一步
- 🌗 内置昼夜主题切换按钮（右上角固定定位，localStorage 持久化；夜间模式整体反转为黑底白字，仍守双色纪律）
- 下载
panda-skill/文件夹，放入~/.claude/skills/或~/.workbuddy/skills/。 - 重启客户端，向 Agent 说："帮我做一个量化投研平台落地页" 或 "用 panda 风格生成这个 SaaS 首页"，技能自动触发。
- 将
panda-skill/放入skills/目录。 - 通过
skill_view查看 SKILL.md 加载。
- 打包：
zip -r panda-skill.zip panda-skill/ - 登录 SkillHub，点击"上传 Skill"，选择 zip 文件。
panda-skill/
├── SKILL.md # 主路由（必读）
├── CHANGELOG.md # 版本日志
├── README.md # GitHub 门面
├── LICENSE # MIT
├── .gitignore # 忽略规则
├── assets/ # 🅰️ ASSETS 资产真源
│ ├── starter-template.html # 可直接复用起始模板（含昼夜切换）
│ └── SCREENSHOTS-TODO.md # 参考站截图待补充说明
└── references/ # 📚 REFERENCES 具体规范
├── design-system.md # 完整双色 SaaS 设计系统（字体/配色/卡片/按钮/标签）
├── page-architecture.md # 11 区块落地页骨架 + 内容原则
└── components.md # HTML/CSS 组件配方（12 个组件）
三层架构：META（SKILL.md frontmatter）· ASSETS（assets/ 资产真源）· REFERENCES（references/ 具体规范）。 SKILL.md 只做路由，能力 SOP 拆到 references/ 省 token。
Hero → 5 步工作流 → 4 能力卡 → 4 服务卡 → 软件底座（反色） → Skill+Agent 库 → 3 搭配场景 → 4 定价档 → 4 项加购 → 统计行 → CTA
每个区块在 references/page-architecture.md 中均有目的说明、内容设计原则与类名约定（沿用参考站的 si- 命名空间以便溯源，si- = solution-institution）。
- 白底为主，反色做锚：默认纯白画布 + 近黑文字；仅"软件底座 / 主 CTA / 能力图标 / 场景徽章"反转为黑底白字，制造节奏锚点。
- 双色纪律：不靠彩色制造层次，靠字体重量、边框、留白说话。无渐变（hero 除外）、无霓虹、无彩虹。
- 无衬线至上：正文用阿里普惠体（或 PingFang SC fallback），UI 用无衬线——这是现代 SaaS 质感，与 gazette 的衬线古典相反。
- 卡片默认扁平：1px 极淡边框 + 14–16px 圆角，hover 才抬升阴影——不要每张卡都堆重阴影。
- 反色底座不可省：黑底白字的"底座"区块是本技能的标志性锚点，省略会让页面扁平失节奏。
- 故障字体克制：猫啃网故障黑只用于 hero / 发布 / CTA 点缀，绝不用于正文或卡标题（小字号下不可读）。
| 平台 | 状态 | 备注 |
|---|---|---|
| Claude Skills | ✅ | 遵循 agentskills.io 规范，frontmatter 覆盖触发词 |
| WorkBuddy | ✅ | 原生支持，含 agent_created: true 标记 |
| OpenClaw | ✅ | 通过 clawhub 兼容 |
| Hermes Agent | ✅ | 通过 agentskills.io 标准 |
| SkillHub | ✅ | zip 上传 |
panda-skill 是 视觉风格层 skill，与 OPC-Studio 其他 业务工作流层 skill 互补：
- 业务 skill（investor-skill / ma-pitch-skill / summary-skill）产出 HTML 时，可选用
panda-skill提供的视觉风格包装——当产物定位是"平台 / 产品 / Dashboard / 定价页"时尤其契合。 - 视觉风格层两姐妹：
gazette-skill（公报.skill）— 浅色衬线大报风，适合报告 / 编辑 / 名录类panda-skill（熊猫.skill）— 浅色无衬线 SaaS 风，适合平台 / 产品 / Dashboard 类（本技能）
决策规则：report → gazette；platform → panda。
做中文站时，优先用阿里普惠体（Alibaba PuHuiTi）5 字重；若无法加载本地字体，fallback 到 PingFang SC / Microsoft YaHei / 系统无衬线。要点：
- 英文展示字用 Dream BraveGB Bold；数字 / 价格 / 标签用 Barlow Bold（几何无衬线，tabular-nums）。
- 猫啃网故障黑为装饰字体，仅在 hero / 发布徽章 / CTA 点缀，正文与卡片标题禁用。
- 中文正文行高 ≥ 1.6，区块间距慷慨（96–160px），不要堆密。
MIT License · © 2026 OPC-Studio
- Issue / PR：欢迎在本仓库提交
- 兼容问题：请附上平台名与 Agent 版本号
- 风格扩展：期待更多组件配方（如移动端适配、打印样式、深色真 Canvas 姊妹技能）的贡献
OPC-Studio 出品 · 让每个 AI Agent 都能成为行业专家。