AI 主题生成指南

[!NOTE] 本文档主要面向 AI 助手（如 Claude, GPT 等），旨在指导 AI 根据用户提供的参数生成符合规范的 CSS 主题配置。

核心规范

1. 颜色格式

所有基础色变量必须使用 RGB 通道数值（空格分隔），严禁带 rgb() 或 #hex。

/* ✅ 正确 */
--blocks-primary: 59 130 246;

/* ❌ 错误 */
--blocks-primary: #3b82f6;
--blocks-primary: rgb(59, 130, 246);

使用时通过 rgb() 包裹：

background: rgb(var(--blocks-primary));
background: rgb(var(--blocks-primary) / 0.5); /* 带透明度 */

2. 渐变与阴影

渐变和阴影直接使用完整的 CSS 语法：

--blocks-gradient-primary: linear-gradient(135deg, rgb(59, 130, 246), rgb(96, 165, 250));
--blocks-shadow-card-hover: 0 12px 30px rgba(59, 130, 246, 0.1);

生成全局主题

输入参数

参数	说明	示例
主题色	品牌主色调	蓝色、紫色、橙色
背景模式	亮色或暗色	亮色 (Light) / 暗色 (Dark)

生成步骤

确定主色 RGB 值：参考下方 Tailwind 颜色表
生成品牌色色阶：50/200/400/500/600
选择强调色：与主色形成对比的互补色
设置文字色和背景色：根据背景模式选择
生成渐变和阴影：基于主色计算

完整模板 - 亮色模式

:where(:root) {
  /* 布局变量 */
  --blocks-section-padding: 6rem;
  --blocks-container-max-width: 80rem;
  --blocks-content-max-width: 64rem;
  --blocks-radius-sm: 0.5rem;
  --blocks-radius-md: 1rem;
  --blocks-radius-lg: 1.5rem;
  --blocks-radius-xl: 2rem;
  --blocks-radius-2xl: 2.5rem;
  --blocks-radius-full: 9999px;

  /* 动画时间 */
  --blocks-transition-fast: 150ms;
  --blocks-transition-normal: 300ms;
  --blocks-transition-slow: 500ms;

  /* 文字颜色 - 亮色模式 */
  --blocks-text-heading: 15 23 42;
  --blocks-text-body: 51 65 85;
  --blocks-text-muted: 100 116 139;
  --blocks-text-light: 148 163 184;

  /* 品牌色 - [主色名称] */
  --blocks-primary: [主色-500];
  --blocks-primary-light: [主色-400];
  --blocks-primary-lighter: [主色-200];
  --blocks-primary-lightest: [主色-50];
  --blocks-primary-dark: [主色-600];

  /* 强调色 */
  --blocks-accent: [强调色-500];
  --blocks-accent-light: [强调色-400];
  --blocks-accent-lightest: [强调色-50];

  /* 背景色 - 亮色模式 */
  --blocks-bg-page: 255 255 255;
  --blocks-bg-section: 248 250 252;
  --blocks-bg-card: 255 255 255;
  --blocks-bg-card-hover: [主色-50];

  /* 边框色 */
  --blocks-border: 241 245 249;
  --blocks-border-hover: [主色-200];

  /* 渐变 */
  --blocks-gradient-primary: linear-gradient(135deg, rgb([主色-500]), rgb([主色-400]));
  --blocks-gradient-accent: linear-gradient(135deg, rgb([强调色-500]), rgb([主色-500]));
  --blocks-gradient-hero: linear-gradient(135deg, rgba([主色-500], 0.1), rgba([强调色-500], 0.15));
  --blocks-gradient-text: linear-gradient(135deg, rgb([强调色-500]), rgb([主色-500]));
  --blocks-gradient-glow: linear-gradient(135deg, rgba([主色-200], 0.5), rgba([强调色-200], 0.5));

  /* 阴影 - 亮色模式 */
  --blocks-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --blocks-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
  --blocks-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06);
  --blocks-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.03);
  --blocks-shadow-card-hover: 0 12px 30px rgba([主色-500], 0.1);
  --blocks-shadow-button: 0 4px 20px rgba([主色-500], 0.25);
  --blocks-shadow-glow: 0 0 40px rgba([主色-500], 0.15);
}

完整模板 - 暗色模式

:where(:root) {
  /* 布局变量 */
  --blocks-section-padding: 6rem;
  --blocks-container-max-width: 80rem;
  --blocks-content-max-width: 64rem;
  --blocks-radius-sm: 0.5rem;
  --blocks-radius-md: 1rem;
  --blocks-radius-lg: 1.5rem;
  --blocks-radius-xl: 2rem;
  --blocks-radius-2xl: 2.5rem;
  --blocks-radius-full: 9999px;

  /* 动画时间 */
  --blocks-transition-fast: 150ms;
  --blocks-transition-normal: 300ms;
  --blocks-transition-slow: 500ms;

  /* 文字颜色 - 暗色模式 */
  --blocks-text-heading: 248 250 252;
  --blocks-text-body: 203 213 225;
  --blocks-text-muted: 148 163 184;
  --blocks-text-light: 100 116 139;

  /* 品牌色 */
  --blocks-primary: [主色-500];
  --blocks-primary-light: [主色-400];
  --blocks-primary-lighter: [主色-200];
  --blocks-primary-lightest: [主色-50];
  --blocks-primary-dark: [主色-600];

  /* 强调色 */
  --blocks-accent: [强调色-500];
  --blocks-accent-light: [强调色-400];
  --blocks-accent-lightest: [强调色-50];

  /* 背景色 - 暗色模式 */
  --blocks-bg-page: 15 23 42;
  --blocks-bg-section: 30 41 59;
  --blocks-bg-card: 30 41 59;
  --blocks-bg-card-hover: 51 65 85;

  /* 边框色 */
  --blocks-border: 51 65 85;
  --blocks-border-hover: [主色-500];

  /* 渐变 */
  --blocks-gradient-primary: linear-gradient(135deg, rgb([主色-500]), rgb([主色-400]));
  --blocks-gradient-accent: linear-gradient(135deg, rgb([强调色-500]), rgb([主色-500]));
  --blocks-gradient-hero: linear-gradient(135deg, rgba([主色-500], 0.15), rgba([强调色-500], 0.2));
  --blocks-gradient-text: linear-gradient(135deg, rgb([强调色-500]), rgb([主色-500]));
  --blocks-gradient-glow: linear-gradient(135deg, rgba([主色-400], 0.3), rgba([强调色-400], 0.3));

  /* 阴影 - 暗色模式 */
  --blocks-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --blocks-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --blocks-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --blocks-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.15);
  --blocks-shadow-card-hover: 0 12px 30px rgba([主色-500], 0.2);
  --blocks-shadow-button: 0 4px 20px rgba([主色-500], 0.35);
  --blocks-shadow-glow: 0 0 40px rgba([主色-500], 0.25);
}

生成组件级覆盖

变量命名规范

所有组件级变量以 --mewx-cms- 开头，后接组件缩写和属性名：

组件	变量前缀	类名
Button	`--mewx-cms-btn-*`	`.mewx-cms-button`
Card	`--mewx-cms-card-*`	`.mewx-cms-card`
Input	`--mewx-cms-input-*`	`.mewx-cms-input`
Badge	`--mewx-cms-badge-*`	`.mewx-cms-badge`
Header	`--mewx-cms-header-*`	`.mewx-cms-header`

输入格式

组件：[组件名]
属性：[需要覆盖的属性]
值：[新的值]

输出格式

.my-custom-[组件名] {
  --mewx-cms-[组件缩写]-[属性]: [值];
}

示例

用户输入：

把按钮改成蓝色背景，方角

AI 输出：

.custom-button {
  --mewx-cms-btn-bg: 59 130 246;
  --mewx-cms-btn-hover-bg: 37 99 235;
  --mewx-cms-btn-radius: 0;
}

用户输入：

卡片改成深色风格

AI 输出：

.dark-card {
  --mewx-cms-card-bg: 30 41 59;
  --mewx-cms-card-text: 248 250 252;
  --mewx-cms-card-border: 51 65 85;
  --mewx-cms-card-hover-bg: 51 65 85;
}

用户输入：

输入框边框改成紫色

AI 输出：

.purple-input {
  --mewx-cms-input-border: 139 92 246;
  --mewx-cms-input-focus-border: 167 139 250;
}

Tailwind 颜色参考

蓝色系 (Blue)

blue-50:  239 246 255    blue-400: 96 165 250
blue-100: 219 234 254    blue-500: 59 130 246
blue-200: 191 219 254    blue-600: 37 99 235

粉色系 (Pink)

pink-50:  253 242 248    pink-400: 244 114 182
pink-100: 252 231 243    pink-500: 236 72 153
pink-200: 251 207 232    pink-600: 219 39 119

紫色系 (Violet)

violet-50:  245 243 255    violet-400: 167 139 250
violet-100: 237 233 254    violet-500: 139 92 246
violet-200: 221 214 254    violet-600: 124 58 237

橙色系 (Orange)

orange-50:  255 247 237    orange-400: 251 146 60
orange-100: 255 237 213    orange-500: 249 115 22
orange-200: 254 215 170    orange-600: 234 88 12

绿色系 (Green)

green-50:  240 253 244    green-400: 74 222 128
green-100: 220 252 231    green-500: 34 197 94
green-200: 187 247 208    green-600: 22 163 74

红色系 (Red)

red-50:  254 242 242    red-400: 248 113 113
red-100: 254 226 226    red-500: 239 68 68
red-200: 254 202 202    red-600: 220 38 38

靛蓝系 (Indigo)

indigo-50:  238 242 255    indigo-400: 129 140 248
indigo-100: 224 231 255    indigo-500: 99 102 241
indigo-200: 199 210 254    indigo-600: 79 70 229

Slate 灰色系（用于文字和背景）

slate-50:  248 250 252    slate-500: 100 116 139
slate-100: 241 245 249    slate-600: 71 85 105
slate-200: 226 232 240    slate-700: 51 65 85
slate-300: 203 213 225    slate-800: 30 41 59
slate-400: 148 163 184    slate-900: 15 23 42

强调色搭配建议

主色	推荐强调色
Pink (粉色)	Purple (紫色), Violet (紫罗兰)
Blue (蓝色)	Cyan (青色), Indigo (靛蓝)
Orange (橙色)	Amber (琥珀), Yellow (黄色)
Green (绿色)	Emerald (翡翠), Teal (青绿)
Violet (紫罗兰)	Indigo (靛蓝), Pink (粉色)
Indigo (靛蓝)	Violet (紫罗兰), Blue (蓝色)
Red (红色)	Orange (橙色), Rose (玫瑰)

提示词建议

如果你希望 AI 帮你生成主题，可以输入：

“请参考 GoEnhance CMS UI 的 AI 主题生成指南，为我生成一套 [主题色] 的 [亮色/暗色] 主题配置。”

例如：

“请参考 GoEnhance CMS UI 的 AI 主题生成指南，为我生成一套蓝色的亮色主题配置。“

注意事项

直接替换：生成的代码直接替换 components/theme/index.css 的全部内容
颜色格式：所有颜色必须使用空格分隔的 RGB 值
渐变方向：统一使用 135deg 保持视觉一致性
阴影透明度：暗色模式的阴影透明度要比亮色模式高
无需额外操作：替换 CSS 文件后主题立即生效，无需修改组件