Skip to content
Mewx CMS UI

主题生成 Skill

主题生成 Skill

Section titled “主题生成 Skill”

只需提供一个主色（以及可选的强调色），即可让 AI 生成一套完整的 --blocks-* 主题配置，直接替换 index.css 即可生效。

使用方式

Section titled “使用方式”

在项目目录下直接使用 /gen-theme 斜杠命令：

Terminal window
/gen-theme 蓝色
/gen-theme blue-500 violet-500
/gen-theme 粉色 紫色 --dark
/gen-theme #3b82f6

输入格式

Section titled “输入格式”

主色（必填）

Section titled “主色（必填）”

支持多种格式：

输入格式示例
中文色名蓝色、粉色、紫色、橙色、绿色
英文色名blue、pink、purple、orange
Tailwind 色名blue-500、violet-400、rose-600
Hex 值#3b82f6（自动转为 RGB）
RGB 直接值59 130 246

强调色（可选）

Section titled “强调色（可选）”

未提供时，AI 根据主色自动选择最佳搭配：

主色自动推导的强调色
粉色 / 玫瑰紫色 (violet)
蓝色靛蓝 (indigo)
紫色蓝色 (blue)
橙色琥珀 (amber)
绿色青绿 (teal)
红色橙色 (orange)

--dark 标志（可选）

Section titled “--dark 标志（可选）”

不加标志默认生成亮色模式，加 --dark 生成暗色模式配置。

示例输出

Section titled “示例输出”

输入 /gen-theme 蓝色，AI 生成：

/* GoEnhance CMS UI Theme — 蓝色 亮色 */
: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: 59 130 246;
  --blocks-primary-light: 96 165 250;
  --blocks-primary-lighter: 191 219 254;
  --blocks-primary-lightest: 239 246 255;
  --blocks-primary-dark: 37 99 235;


  /* 强调色 — 靛蓝 */
  --blocks-accent: 99 102 241;
  --blocks-accent-light: 129 140 248;
  --blocks-accent-lightest: 238 242 255;


  /* 背景色 */
  --blocks-bg-page: 255 255 255;
  --blocks-bg-section: 248 250 252;
  --blocks-bg-card: 255 255 255;
  --blocks-bg-card-hover: 239 246 255;


  /* 边框色 */
  --blocks-border: 241 245 249;
  --blocks-border-hover: 191 219 254;


  /* 渐变 */
  --blocks-gradient-primary: linear-gradient(135deg, rgb(59, 130, 246), rgb(96, 165, 250));
  --blocks-gradient-accent: linear-gradient(135deg, rgb(99, 102, 241), rgb(59, 130, 246));
  --blocks-gradient-hero: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.12));
  --blocks-gradient-text: linear-gradient(135deg, rgb(99, 102, 241), rgb(59, 130, 246));
  --blocks-gradient-glow: linear-gradient(135deg, rgba(191, 219, 254, 0.5), rgba(199, 210, 254, 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(59, 130, 246, 0.10);
  --blocks-shadow-button: 0 4px 20px rgba(59, 130, 246, 0.25);
  --blocks-shadow-glow: 0 0 40px rgba(59, 130, 246, 0.15);
}

应用主题

Section titled “应用主题”

将生成的 CSS 替换 packages/ui/src/components/theme/index.css 中 :where(:root) { ... } 的全部内容，保存后主题立即生效。

packages/ui/src/components/theme/
├── index.css        ← 替换这个文件的 :where(:root) 块
└── components.css   ← 不需要修改

[!TIP] 只替换 :where(:root) { ... } 块的内容，文件开头的注释和 @layer base { 包裹结构保持不变。

颜色参考表

Section titled “颜色参考表”

生成时可直接使用以下 Tailwind RGB 值：

蓝色 Blue:
  50: 239 246 255 | 200: 191 219 254 | 400: 96 165 250 | 500: 59 130 246 | 600: 37 99 235


粉色 Pink:
  50: 253 242 248 | 200: 251 207 232 | 400: 244 114 182 | 500: 236 72 153 | 600: 219 39 119


玫瑰 Rose:
  50: 255 241 242 | 200: 254 205 211 | 400: 251 113 133 | 500: 244 63 94 | 600: 225 29 72


紫色 Violet:
  50: 245 243 255 | 200: 221 214 254 | 400: 167 139 250 | 500: 139 92 246 | 600: 124 58 237


靛蓝 Indigo:
  50: 238 242 255 | 200: 199 210 254 | 400: 129 140 248 | 500: 99 102 241 | 600: 79 70 229


青色 Cyan:
  50: 236 254 255 | 200: 165 243 252 | 400: 34 211 238 | 500: 6 182 212 | 600: 8 145 178


青绿 Teal:
  50: 240 253 250 | 200: 153 246 228 | 400: 45 212 191 | 500: 20 184 166 | 600: 13 148 136


绿色 Green:
  50: 240 253 244 | 200: 187 247 208 | 400: 74 222 128 | 500: 34 197 94 | 600: 22 163 74


橙色 Orange:
  50: 255 247 237 | 200: 254 215 170 | 400: 251 146 60 | 500: 249 115 22 | 600: 234 88 12


琥珀 Amber:
  50: 255 251 235 | 200: 253 230 138 | 400: 251 191 36 | 500: 245 158 11 | 600: 217 119 6


红色 Red:
  50: 254 242 242 | 200: 254 202 202 | 400: 248 113 113 | 500: 239 68 68 | 600: 220 38 38


Slate 灰（文字/背景默认值）:
  50: 248 250 252 | 100: 241 245 249 | 700: 51 65 85 | 800: 30 41 59 | 900: 15 23 42