关于 theme-foundation
一款设计技能，可根据品牌色生成包含主色、互补色和中性色阶的主题系统。它通过 Rampa 命令输出 CSS 变量，并提供浅色与深色模式的映射建议。
主要功能
- 01十级主强调色阶
- 02互补的次强调色阶
- 03源自品牌色的中性色阶
- 04输出 CSS 变量
- 05浅色与深色模式映射建议
适用场景
- 01根据品牌色构建应用主题
- 02生成强调色与中性色阶
- 03为浅色和深色模式准备颜色令牌
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/theme-foundation确认已加载。
详细介绍
主题基础
从单个品牌色生成完整的主题色彩系统。创建主强调色、次强调色（互补色）和中性色阶，所有颜色均通过数学计算得出。
适用场景
- “根据我的品牌色创建主题”
- “我需要适用于浅色和深色模式的颜色”
- “为我的应用生成一套色彩系统”
- “用这个颜色开始构建设计系统”
安装
npx @basiclines/rampa
用法
根据用户的品牌色生成三种色阶：
1. 主强调色色阶
将主品牌色扩展为完整的 10 级色阶。
rampa -C "<brand-color>" -L 95:10 --size=10 -O css --name=accent
2. 次强调色（互补色）
在色轮上与主色数学上相对，非常适合用于 CTA、突出显示或次要操作。
rampa -C "<brand-color>" --add=complementary -L 95:10 --size=10 -O css
这会输出两个色阶：
base- 主强调色complementary-1- 次强调色
3. 中性色阶
从品牌色派生，但大幅降低饱和度。这样生成的“暖色”或“冷色”中性色会与品牌色协调一致。
rampa -C "<brand-color>" -L 98:5 -S 5:10 --size=10 -O css --name=neutral
完整示例
品牌色为 #3b82f6（蓝色）时：
# Primary accent
rampa -C "#3b82f6" -L 95:10 --size=10 -O css --name=accent
# Secondary + Primary together
rampa -C "#3b82f6" --add=complementary -L 95:10 --size=10 -O css
# Neutrals (slightly warm from the blue)
rampa -C "#3b82f6" -L 98:5 -S 5:10 --size=10 -O css --name=neutral
输出结构
:root {
/* Primary Accent */
--accent-0: #f0f7ff;
--accent-1: #dbeafe;
/* ... */
--accent-9: #1e3a5f;
/* Secondary Accent (complementary) */
--complementary-1-0: #fff7ed;
--complementary-1-1: #ffedd5;
/* ... */
/* Neutrals */
--neutral-0: #fafafa;
--neutral-1: #f5f5f5;
/* ... */
--neutral-9: #171717;
}
浅色与深色模式
同一组色阶适用于两种模式，只需采用不同的映射方式：
浅色模式：
- 背景：
neutral-0到neutral-2 - 文本：
neutral-8到neutral-9 - 强调色：
accent-5到accent-7
深色模式：
- 背景：
neutral-9到neutral-7 - 文本：
neutral-0到neutral-2 - 强调色：
accent-3到accent-5
提示
- 从数学上保证互补色与主色形成对比
- 中性色会从品牌色继承细微的暖调或冷调
- 使用
--size=11可进行更精细的控制 - 调整
-L范围以增加或降低对比度（例如，使用-L 90:20可减弱对比）
评论
支持 Markdown