nocturne-skill · 深空

深空终端视觉风格 AI Skill · 复刻 getspine.ai（Spine Swarm）设计语言 真·深空黑底 + 琥珀金强调 + 微光晕环 + 星尘粒子 + 终端等宽标签，配羊皮纸暖色亮态孪生 兼容 Claude Skills / WorkBuddy / OpenClaw / Hermes / SkillHub · OPC-Studio 出品

由 copyweb-skill 扒站产出——copyweb 六阶段工作流的首个端到端验证产物。

这是什么

一个让 AI Agent 能稳定产出 "深色 · 高级 · 科技 / agentic" 网页的视觉风格 skill。把 getspine.ai 那套深空氛围的设计语言（配色 / 字体 / 光晕 / 粒子 / 终端标签）固化成可复用规范 + 可运行组件。

能做什么

场景	输出
AI agent 平台 / 开发者工具落地页	深空黑底 hero + 径向光 + 终端标签
研究 / 量化 / SaaS 产品页	竞品对比表 + 证言墙 + 扁平暗卡
深色科技 hero / dashboard	光晕 + 粒子氛围 + 等宽数据表
需要昼夜双主题的页面	深空暗态 + 羊皮纸暖亮态一键切换

何时触发

• 「做个深色科技风落地页」「像 getspine 那种深空氛围」「暗黑高级感 AI 平台首页」「terminal 风 dashboard」。
• 不适用：白底为主 → 用 panda-skill；古典报纸 / 研报衬线 → 用 gazette-skill。

核心输出风格

• 配色：默认深空黑 #0a0a0a 主态（真暗黑，非白底反色），暖白文字 #e8e4de；琥珀金 #d4a053 唯一强调色（<5% 面积）；羊皮纸 #ece4d2 亮态孪生。
• 字体：Outfit（几何无衬线，标题正文）+ JetBrains Mono（等宽，大写宽字距终端标签）。
• 卡片：暗态扁平无阴影，靠 1px 边框 + 背景分层；亮态才有淡阴影。
• 签名元素：全视口光晕环 · hero 琥珀径向光 · 噪点+星尘粒子 · 终端等宽大写标签。

快速上手（四平台）

Claude Code / WorkBuddy

git clone https://github.com/D-kart/nocturne-skill.git ~/.claude/skills/nocturne-skill

OpenClaw / Hermes

git clone https://github.com/D-kart/nocturne-skill.git ~/path/to/skills/

SkillHub：下载 zip 上传，或

zip -r nocturne-skill.zip nocturne-skill/

装好后对 Agent 说「用深空风做个 AI 平台落地页」即可触发。

目录结构

nocturne-skill/
├── SKILL.md                      # 主路由（触发词 + 风格速览 + 工作流 + 自检 + 反模式）
├── README.md · CHANGELOG.md · LICENSE · .gitignore
├── assets/
│   ├── starter-template.html     # 深空风 starter（四签名元素 + 昼夜切换 hook）
│   └── SCREENSHOTS-TODO.md        # 参考区块语义清单（截图受限时的替代）
└── references/
    ├── design-system.md          # 双主题色板 + 4 字体角色 + 签名元素规格
    ├── page-architecture.md      # getspine 首页 9 区块骨架
    ├── components.md             # 10 个可运行组件配方
    └── localization-zh.md        # 中文化 6 大坑

设计哲学（6 条）

1. 深空黑是主调，不是点缀 —— >90% 面积的纯黑，暖白文字，这才是氛围底。
2. 琥珀金要克制 —— 唯一强调色，只用于标签/hover/描边/光晕，一旦大面积铺就崩。
3. 氛围靠"淡" —— 光晕、噪点、粒子都极淡（.06 噪点 / .14 光晕），是氛围不是特效。
4. 终端感来自等宽 + 宽字距 —— JetBrains Mono 大写标签是机器/agentic 气质的来源。
5. 暗态扁平，靠边框分层 —— 深色上阴影不可见，用 1px 边框 + 表面分层做层次。
6. 昼夜孪生 —— 深空暗 ↔ 羊皮纸暖，不是简单反相，是两套精心调校的暖色系。

兼容性

平台	支持	安装位置
Claude Skills	✅	~/.claude/skills/
WorkBuddy	✅	~/.claude/skills/
OpenClaw	✅	自定义 skills 目录
Hermes	✅	自定义 skills 目录
SkillHub	✅	zip 上传

与其他 skill 协同

copyweb-skill（视觉风格 skill 工厂）
   ├─ gazette-skill（古典公报 / 研报衬线风）
   ├─ panda-skill（白底双色 SaaS 风）
   └─ nocturne-skill（深空终端暗色科技风 · 本 skill）

路由规则：report → gazette；platform（白底）→ panda；dark tech / agentic → nocturne。

中文化

做中文站前必读 references/localization-zh.md。头号坑：等宽大写宽字距标签对中文失效（无大小写 + 宽字距散架），需改用 PingFang SC + 收窄字距或英文混排。

许可证

MIT © 2026 OPC-Studio · 参考站 getspine.ai 仅作设计语言分析，不复刻其品牌资产。

反馈

Issues / PR welcome。发现色值偏差或组件不可运行请开 issue。