mcpField
B
brand-expansion

brand-expansion

github.com/basiclines设计与 UI1639 次安装32 周前更新
代码仓库

关于 brand-expansion

将单个品牌色扩展为协调配色系统的设计技能。它通过主色阶和色彩和谐关系生成调色板，并可使用 `rampa` 命令行输出 CSS。

主要功能

  1. 01生成十级主色阶
  2. 02创建类似色组合
  3. 03生成互补色
  4. 04创建分裂互补配色
  5. 05将调色板导出为 CSS

适用场景

  1. 01从标志颜色构建调色板
  2. 02为行动号召选择强调色
  3. 03为渐变创建相关颜色
  4. 04准备 CSS 颜色令牌

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/basiclines/rampa-studio --skill brand-expansion

安装后在 Claude Code 中输入/brand-expansion确认已加载。

详细介绍

品牌扩展

将单一品牌色转换为完整、协调的色彩系统。通过多种色彩和谐类型生成相关色相，所有色彩均根据一个输入值通过数学计算得出。

适用场景

  • “将我的品牌色扩展为完整的系统”
  • “我只有一种颜色，还需要更多颜色”
  • “根据这个十六进制颜色创建完整的调色板”
  • “根据我的 Logo 颜色构建色彩系统”

安装

npx @basiclines/rampa

扩展策略

从一种品牌色生成：

  1. 主色 - 品牌色的完整色阶
  2. 类似色 - 相邻色彩，用于细微变化
  3. 互补色 - 对比色，适用于 CTA
  4. 分裂互补色 - 更柔和的对比选项

配方

步骤 1：主色色阶

将品牌色扩展为完整的 10 级色阶：

rampa -C "<brand-color>" -L 95:10 --size=10 -O css --name=primary
步骤 2：类似色

色轮上的相邻颜色（±30°），非常适合细微变化：

rampa -C "<brand-color>" --add=analogous -L 95:10 --size=10 -O css

输出：base、analogous-1、analogous-2

步骤 3：互补色

正对面的颜色，可实现最大对比度，非常适合 CTA：

rampa -C "<brand-color>" --add=complementary -L 95:10 --size=10 -O css

输出：base、complementary-1

步骤 4：分裂互补色

位于互补色两侧的两种颜色，可带来更细腻的对比：

rampa -C "<brand-color>" --add=split-complementary -L 95:10 --size=10 -O css

输出：base、split-complementary-1、split-complementary-2

完整示例

以品牌色 #7c3aed（紫色）为例：

# Primary - the purple itself
rampa -C "#7c3aed" -L 95:10 --size=10 -O css --name=primary

# Analogous - blue and magenta variations
rampa -C "#7c3aed" --add=analogous -L 95:10 --size=10 -O css

# Complementary - lime/yellow for CTAs
rampa -C "#7c3aed" --add=complementary -L 95:10 --size=10 -O css

# Split-complementary - yellow-green options
rampa -C "#7c3aed" --add=split-complementary -L 95:10 --size=10 -O css

输出结构

:root {
  /* Primary */
  --primary-0: #faf5ff;
  --primary-5: #7c3aed;
  --primary-9: #2e1065;

  /* Analogous */
  --analogous-1-0: #eff6ff;  /* Blue-ish */
  --analogous-1-5: #3b82f6;
  --analogous-2-0: #fdf2f8;  /* Pink-ish */
  --analogous-2-5: #ec4899;

  /* Complementary */
  --complementary-1-0: #fefce8;  /* Yellow/lime */
  --complementary-1-5: #84cc16;

  /* Split-complementary */
  --split-complementary-1-0: #f0fdf4;  /* Green */
  --split-complementary-2-0: #fefce8;  /* Yellow */
}

使用指南

色彩和谐类型最适合的用途
主色主要品牌应用、页眉、主按钮
类似色悬停状态、相关区域、渐变
互补色CTA、警报、需要吸引注意力的高亮内容
分裂互补色次要操作、徽章、替代强调色

一体化命令

快速查看概览并尽量减少输出：

# See all harmonies at once
rampa -C "#7c3aed" --add=analogous --add=complementary --add=split-complementary --size=3 -O css

提示

  1. 先只使用主色和互补色，再按需添加其他颜色
  2. 类似色非常适合渐变和过渡效果
  3. 谨慎使用互补色，因为它会吸引注意力
  4. 分裂互补色能提供对比，又不会像直接互补色那样强烈
  5. 所有颜色之间都存在数学关系，因此能自动保持协调

评论

支持 Markdown