安装指南

1. ClawHub CLI 从源直接安装技能的最快方式。
   npx clawhub@latest install ragnarok-palette
2. 手动安装 将技能文件夹复制到以下位置之一
   全局模式
   ~/.openclaw/skills/
   工作区
   /skills/
   优先级：工作区 > 本地 > 内置
3. 提示词安装 将此提示词复制到 OpenClaw 即可自动安装。
   请帮我使用 Clawhub 安装 ragnarok-palette。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。
   更倾向于下载？
   获取包含原生技能文件的ZIP压缩包。
   下载技能 (.zip)

什么是

RAGNARÖK Palette 是一个可复用的视觉设计系统，用于创建具有精细温暖感的暗色探索型界面。其深海蓝提供深度与沉静感，而克制的落日黄赭色高亮则引导注意力集中在当前操作、关键数值与路径上。该技能定义了颜色 token、表面处理、排版层级、图表映射和交互规则，使生成的工作遵循连贯的视觉语言，而不是即兴创作颜色。
可将其用于 Web 和移动端界面、仪表盘、SVG 地图、数据可视化以及演示文稿或表格布局。内置的 token 样式表、背景入门配置、视觉展示页和可复用 prompt 片段使该系统对于开发者和 AI 辅助设计工作流都非常实用。Openclaw Skills 用户可以在保持调色板一致的同时，将其指导应用于支持的视觉交付物中。

应用场景

创建需要深度感、探索感和温暖感的暗色模式界面。
设计仪表盘和数据密集的屏幕，为当前或重要信息提供克制的高亮。
使用定义的颜色映射为 SVG 地图、路由路径、KPI 展示和图表类型设置样式。
构建具有一致按钮、焦点环、表面和运动规则的移动端交互模式。
将共享的视觉语言应用于 PowerPoint、Word 和 Excel 交付物。
为 AI 编码 agent 提供开箱即用的调色板和明确约束，而不是让其自行发明颜色。
从内置的可点击展示页面中预览并复制调色板数值。

工作原理

确认工作是否适合该调色板：适用于面向夜间、探索性、交互式和数据展示体验。
从 assets/tokens.css 加载规范 token，并使用 assets/body-bg.css 中的背景入门配置作为基础。
使用深海背景和表面、五级文本灰色阶以及柔和的辅助色构建视觉层级。
将落日金留给最重要、关键或可操作的元素；保持其整体使用率在 10% 或以下。
将记录的组件和可视化映射应用于按钮、状态指示器、SVG 路径、图表、表格和文档布局。
根据硬性规则和交付检查清单检查设计，包括对比度、焦点可见性、减弱运动和禁用颜色。

配置指南

该技能记录了基于文件的配置，没有指定包管理器或安装程序。只需使技能文件对你的 AI agent 可用，然后在项目中使用 CSS 资源。调色板展示页可以直接在浏览器中打开，以查看和复制 HEX 数值。

从技能目录检查设计 token 和入门资源

cat assets/tokens.css
cat assets/body-bg.css

将 token 样式表复制到现有项目的 styles 目录中

cp assets/tokens.css ./src/styles/
在你的应用中引入 token 样式表，然后将入门背景和组件样式适配到你的项目。对于 AI 生成的实现，提供来自 SKILL.md 的相关指令或来自 references/prompt-snippet.md 的可复用 prompt。

数据架构

该技能将其指导组织为源文档、可复用 CSS 资源和参考材料：
Path Purpose
SKILL.md 规范调色板规则、token 定义、使用指导和交付检查清单。
README.md 概述、场景、安装指导和版本信息。
assets/tokens.css 完整的可复用设计 token 样式表。
assets/body-bg.css 入门背景样式。
assets/showcase.html 独立调色板预览，包含可点击复制 HEX 数值的颜色色块。
references/prompt-snippet.md 四种可复用 prompt 变体：完整版、简短版、修订版和浅色调色板版。
references/use-cases.md 带有实现指导的十种应用场景。
Token taxonomy:
Backgrounds: --sea-900 到 --sea-400，用于覆盖层、页面背景、面板、卡片和悬停状态。
Accent: --gold-400、--gold-500、--gold-600 和 --gold-glow，用于主要高亮和操作。
Supporting and semantic colors: mist、violet、slate、warning、danger 和 success token。
Typography: --ink-100 到 --ink-500，用于标题、正文文本、辅助信息和占位符。
Surfaces and effects: 用于图层和强调的 surface、hairline、shadow 和 gold-glow 数值。
该调色板还指定了用于图表、地图、状态徽章、KPI、表格和 office 文档的固定颜色顺序和应用规则。它没有定义生成的运行时数据或特定于应用的元数据格式。

高级特性

强制执行单一强调色层级：金色专留给当前、关键或可操作的元素，同级元素中只能有一个金色高亮项。
定义分层的径向渐变背景而非扁平页面填充，以及可复用的 surface、hairline、shadow 和 glow token。
包含用于 SVG 路线、折线图和面积图、饼图和环形图、条形图、雷达图、甘特图、状态徽章、KPI 和表格的映射。
将调色板扩展到 PowerPoint、Word 和 Excel 布局，包含特定背景、标题、键值和条件格式指导。
包含 140、260 或 420 ms 的运动约束、指定的缓动曲线以及必需的
prefers-reduced-motion
回退。
指定面向无障碍的交互细节，例如最小 46 px 的按钮高度、金色焦点环以及金色按钮上的暗色文本。
提供谨慎的浅色主题变体，并明确标识不适合的场景，包括需要标准红色医疗警报或未针对小文本测试 AAA 对比度的用例。
提供 prompt 片段和交付检查清单，帮助 agent 一致地应用和复核系统。该技能未记录 hook 或多 agent 自动化。

name: ragnarok-palette version: 1.0.0
description: | 通用色系之诸神黄昏 / RAGNARÖK Palette（Twilight of the Gods）— 深海蓝 × 日落赭金配色体系，
出自 Link-R World。用于任何需要「深夜感 + 探索感 + 精致温暖」的界面、仪表板、SVG 图、
数据大屏、海报、PPT、Word/Excel 版式。
触发词（中）：诸神黄昏配色、通用色系之诸神黄昏、深海蓝配色、日落赭金、Link-R 配色、
夜间仪表板配色、探索感界面、深海金色调、暗色系暖调。
触发词（EN）：Ragnarok palette, RAGNARÖK, twilight of the gods, deep sea blue,
sunset ochre, deep-sea-sunset, night dashboard palette.

通用色系之诸神黄昏 · RAGNARÖK Palette

Twilight of the Gods — A Deep Sea × Sunset Color System 诸神黄昏不是毁灭，而是「光沉入深海之前最后、最浓的那一抹金」。 深海蓝承载沉静与纵深，日落赭金承载方向与温度；其余一切让位。

中文名：通用色系之诸神黄昏
英文名：RAGNARÖK（全称 RAGNARÖK Palette — Twilight of the Gods Color System，简称 ROK）
技术标识：ragnarok-palette
版本：1.0.0
同源项目：Link-R World（游戏化 AI 旅行规划器） 0. 一句话指令（可直接贴给任意 AI）

采用 RAGNARÖK（通用色系之诸神黄昏） 配色：深海蓝 #06131f / #0c2b3e 作背景层（占 80%，必须叠两层 radial-gradient，禁止平涂）；日落赭金 #E8A24A / #F2B96B / #C9812F 作唯一强调色（占 ≤10%，只给当前项、主按钮、关键数字与路径，金底必配深字 #20140a）；辅助色只用低饱和雾青 #6FB3A8、紫灰 #8E86B8、板岩灰 #8FA6B8（各 ≤5%）；文字走 #F2F6F9 → #DCE6EE → #AFC1D0 → #7E94A6 → #5C7186 五级灰阶，禁纯白纯黑；警示 #E2B34C、危险 #D98A6A，禁粉红与纯红；柔和光效 0 0 28px rgba(232,162,74,.35) 只给金色元素；动效只有 140 / 260 / 420ms 三档，缓动 cubic-bezier(.22,.61,.36,1)，并写 prefers-reduced-motion 降级；按钮 min-height 46px，焦点环 #F2B96B。

1. 色板（唯一真源，禁止自行调色） 背景层 · Deep Sea 深海（≈80%）
   Token HEX RGB 用途 --sea-900 #04101a 4,16,26 遮罩 / 弹层底（最深） --sea-800 #06131f 6,19,31 页面主背景 --sea-700 #08202f 8,32,47 次级面板 --sea-600 #0c2b3e 12,43,62 卡片 / 输入框 --sea-500 #123a52 18,58,82 悬浮态 / 按钮底 --sea-400 #1b4d69 27,77,105 渐变高光端 强调层 · Sunset Ochre 日落赭金（≤10%，唯一）
   Token HEX RGB 用途 --gold-500 #E8A24A 232,162,74 主强调：主按钮、路径、当前节点 --gold-400 #F2B96B 242,185,107 亮端：渐变起点、文字强调、焦点环 --gold-600 #C9812F 201,129,47 暗端：渐变终点、按下态 --gold-glow rgba(232,162,74,.45) — 发光变量 辅助层 · 低饱和（各 ≤5%）
   Token HEX RGB 语义 --mist-400 #6FB3A8 111,179,168 雾青：成功 / 自然 / 次要序列 --mist-600 #3E7C74 62,124,116 雾青暗端 --violet-400 #8E86B8 142,134,184 紫灰：第三序列 --slate-400 #8FA6B8 143,166,184 板岩灰：描边基线 --warn #E2B34C 226,179,76 警示（金调，不用红） --danger #D98A6A 217,138,106 危险（陶土橙，不用纯红） --ok #6FB3A8 111,179,168 成功 文字灰阶（不用纯白，不用纯黑）

--ink-100 #F2F6F9 标题 → --ink-200 #DCE6EE 正文 → --ink-300 #AFC1D0 说明 → --ink-400 #7E94A6 弱化 → --ink-500 #5C7186 占位

表面 / 描边 / 阴影 --surface-1: rgba(12,43,62,.72) 卡片（配 backdrop-filter: blur(10px)） --surface-2: rgba(8,32,47,.86) 抽屉 / 底部栏 --surface-solid: #0a2436 下拉 / 弹层实底 --surface-elev: rgba(18,58,82,.55) 按钮 / chip --hairline: rgba(143,166,184,.18) 常规描边 --hairline-strong: rgba(143,166,184,.32) 聚焦描边 --shadow-1: 0 4px 18px rgba(2,8,14,.4) --shadow-2: 0 18px 48px rgba(2,8,14,.55) --glow-gold: 0 0 28px rgba(232,162,74,.35)

2. 八条硬规则（违反即返工） 强调色唯一性 — 赭金只出现在「当前 / 关键 / 待行动」三处。同级并列元素中只有一个可用金色，其余一律 surface-elev + hairline。
   禁色清单 — 粉红、玫红、纯红 #F00 系、亮紫、荧光绿、糖果色渐变。危险用 --danger #D98A6A，警示用 --warn #E2B34C。
   背景必须分层 — body 用双 radial-gradient 叠加再垫 --sea-800；禁止平涂单色。
   文字对比度 — 正文 ≥ --ink-200；--ink-400 只做辅助说明，不得承载关键数据。
   金底深字 — 金色按钮 / 徽标底上，文字必须是 #20140a，禁止金底白字（对比度不足）。
   圆角统一 — 8 / 14 / 20 / 28 / 999 五档，同一层级不得混用。
   动效克制 — 只用 140 / 260 / 420ms，缓动 cubic-bezier(.22,.61,.36,1)；必须写 prefers-reduced-motion 降级块。
   光效只给金色 — drop-shadow / glow 只施加于金色元素；深色卡片、普通按钮不发光。
3. 载体映射（同一色板，十种落地形态） 载体 落地规则
   SVG 地图 / 路径 画布 #071b28 → #05131e；路径 --gold-500 2.2px + drop-shadow(0 0 5px rgba(232,162,74,.45))；已走过实线金，未走 --hairline 虚线；节点填 --sea-700 + 金描边，完成态填 --gold-600
   折线 / 面积图 主线 --gold-500；面积 rgba(232,162,74,.18)；网格 rgba(143,166,184,.12)；对比序列 --mist-400
   饼图 / 环图 序列固定 #E8A24A → #C9812F → #6FB3A8 → #8E86B8 → #8FA6B8；最大扇区用金色
   柱状 / 条形 柱体 --gold-500，基线网格 rgba(143,166,184,.12)；第二序列 --mist-400
   雷达图 面 rgba(232,162,74,.18)，边 --gold-500，网格 --hairline
   甘特图 五段：金 → 赭 → 雾青 → 紫灰 → 板岩灰；条尾标工期与 DDL；周末阴影 rgba(2,8,14,.4)；当前日期线 --gold-400
   状态徽标 正常 --mist 系 / 进行中 --gold 系 / 待确认 --warn 系 / 异常 --danger 系；一律 pill + 半透明底
   KPI 数字 数字 --ink-100，单位与涨幅用金色；不使用彩色大数字
   表格 表头 --ink-400 12px；斑马纹 rgba(143,166,184,.05)；描边只用 --hairline；合计行 rgba(232,162,74,.08)
   PPT / Word / Excel PPT 页底 #06131f、标题 #F2F6F9、关键数字 #F2B96B；Excel 表头填充 #0c2b3e + 白字、关键列 #F2B96B、条件格式「高」金「低」雾青
4. 起步代码

完整令牌见 assets/tokens.css；骨架样式见 assets/body-bg.css；可视化色板页见 assets/showcase.html（浏览器直接打开，点击色块即复制 HEX）。

body {
background:
radial-gradient(120% 80% at 20% -10%, rgba(27,77,105,.55) 0%, transparent 60%),
radial-gradient(90% 70% at 110% 10%, rgba(232,162,74,.12) 0%, transparent 55%),
var(--sea-800);
background-attachment: fixed;
}
.btn--primary {
background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
color: #20140a; /* 金底深字 */
box-shadow: var(--glow-gold);
}

5. 交付前自检清单 金色面积 ≤10%，且只落在关键交互上？
   并列元素中金色唯一？
   背景是分层渐变而非平涂？
   金色底上是 #20140a 深字？
   文字最低 --ink-300，无 #FFF / #000？
   有 prefers-reduced-motion 降级？
   按钮 ≥46px、焦点环 --gold-400？
   无粉红 / 纯红 / 高饱和渐变？
   图表序列色遵循 §3 固定顺序？
6. 变体与边界 浅色变体（谨慎使用）：底 #F5F2EC 暖白 / 卡片 #FFFFFF / 强调色降亮度为 #C9812F（浅底上 #E8A24A 不可读）/ 标题 #1A2B36 / 正文 #33454F / 描边 rgba(26,43,54,.12)。不要把深海蓝直接反色成浅蓝。
   不适用场景：儿童教育类产品、医疗警示界面（需要标准红）、需要严格无障碍 AAA 的小字号正文（深底对比度需实测）、品牌主色已为蓝绿系且不可更改的场合。
   与 Morandi 商务风的分工：Morandi（钢蓝 / 赭石 #B5791F / 雾青 / 紫灰 / 卡其）用于白天汇报类交付（PPT、Word、供应商看板）；RAGNARÖK 用于夜间感 / 探索感 / 交互产品 / 移动端 / 数据大屏。两套不在同一页面混用。
7. 文件清单 ragnarok-palette/
   ├── SKILL.md 本文件（规范真源）
   ├── README.md 介绍 · 应用场景 · 安装 · 版本
   ├── assets/
   │ ├── tokens.css 完整设计令牌（复制即用）
   │ ├── body-bg.css 起始骨架
   │ └── showcase.html 自包含色板展示页（可点击取色）
   └── references/
   ├── prompt-snippet.md 4 段可复制指令（完整/短/改稿/浅色）
   └── use-cases.md 10 类应用场景逐条落地说明

GUAIKEI 快手表现评估
海牙体系国际外观设计注册