mcpField
S
status-from-accent

status-from-accent

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

关于 status-from-accent

status-from-accent 是一项从品牌色推导成功、警告、危险和信息色的设计技能。它以方形配色生成色阶，再按色相为色阶指定语义用途。

主要功能

  1. 01生成四组相关色阶
  2. 02用方形配色旋转色相
  3. 03按色相映射状态含义
  4. 04输出 CSS 颜色值
  5. 05为色阶设置语义名称

适用场景

  1. 01从品牌强调色生成状态颜色
  2. 02为提醒和徽章创建色阶
  3. 03将生成色阶映射为语义 CSS 变量

安装

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

$npx skills add https://github.com/basiclines/rampa-studio --skill status-from-accent

安装后在 Claude Code 中输入/status-from-accent确认已加载。

详细介绍

基于强调色的状态颜色

使用正方形和谐法生成一套与品牌色在数学上相关的完整状态／反馈颜色（成功、警告、危险、信息）。

适用场景

  • “创建与我的品牌相配的状态颜色”
  • “我需要成功、警告和错误颜色”
  • “根据我的强调色生成反馈颜色”
  • “创建符合品牌风格的危险／成功颜色”

安装

npx @basiclines/rampa

正方形和谐法

正方形和谐法会在色轮上以 90° 间隔生成 4 种颜色。这能最大限度地区分颜色，同时保持它们在数学上的关联。

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

这会输出 4 组色阶：

  • base - 品牌色（可用作信息色／主色）
  • square-1 - 旋转 +90°
  • square-2 - 旋转 +180°（对立色）
  • square-3 - 旋转 +270°

将色相映射到状态

实际颜色取决于输入。生成后，根据色相进行映射：

色相范围典型状态
80-150°成功（绿色／青绿色）
30-80°警告（黄色／橙色）
0-30° 或 330-360°危险（红色／粉色）
180-270°信息（蓝色／紫色）

**示例：**如果你的品牌色是蓝色（#3b82f6，约 220°）：

  • base（220°）→ 信息
  • square-1（310°）→ 危险（洋红／红色区域）
  • square-2（40°）→ 警告（橙色区域）
  • square-3（130°）→ 成功（绿色区域）

完整示例

# Generate all 4 status ramps from blue brand
rampa -C "#3b82f6" --add=square -L 95:15 --size=10 -O css

输出包含 4 组完整色阶——根据色相赋予语义：

:root {
  /* Info (base - blue) */
  --base-0: #eff6ff;
  --base-5: #3b82f6;
  --base-9: #1e3a8a;

  /* Danger (square-1 - magenta/red) */
  --square-1-0: #fdf2f8;
  --square-1-5: #ec4899;
  --square-1-9: #831843;

  /* Warning (square-2 - orange) */
  --square-2-0: #fff7ed;
  --square-2-5: #f97316;
  --square-2-9: #7c2d12;

  /* Success (square-3 - green) */
  --square-3-0: #f0fdf4;
  --square-3-5: #22c55e;
  --square-3-9: #14532d;
}

重命名以匹配语义

确定每组色阶的用途后，可以使用明确的名称重新运行：

# If you know square-3 is your green/success
rampa -C "#22c55e" -L 95:15 --size=10 -O css --name=success

也可以在 CSS 中映射：

:root {
  --success: var(--square-3-5);
  --warning: var(--square-2-5);
  --danger: var(--square-1-5);
  --info: var(--base-5);
}

替代方案：自定义状态基色

如果生成的色相不完全符合预期，可以调整输入：

# Start from green to ensure success is the base
rampa -C "#22c55e" --add=square -L 95:15 --size=10 -O css
# Now: base=green, square-1=blue, square-2=red, square-3=yellow

提示

  1. 正方形和谐法可确保最大的视觉区分度
  2. 4 种颜色拥有相同的“数学基因”
  3. -L 95:15 范围适用于状态颜色（浅色背景、深色文字）
  4. 完整色阶使用 --size=10，精简色阶使用 --size=5
  5. 中间色阶值（4-6）最适合徽章、按钮和提示框

评论

支持 Markdown