generate-wechat-theme

name	generate-wechat-theme
description	AI-ready skill to design and generate highly customized CSS themes for WeChat Official Accounts.

微信公众号自定义主题 CSS 生成器 (WeChat CSS Theme Generator)

这是一个专门为 AI Agent 设计的技能，用于根据用户的自然语言需求，生成符合微信公众号排版规范的、高度定制化的 CSS 样式表。此技能仅负责生成 CSS 代码并保存为本地文件。

核心能力

• 自然语言转 CSS：理解用户的视觉需求（如“赛博朋克风”、“带可爱表情的引用块”、“深色代码块”），并转换为精确的 CSS 代码。
• 微信排版规范适配：严格遵循 #wenyan 命名空间约束，确保生成的样式能完美注入并生效于微信公众号的 DOM 结构中。
• 高级排版特效：支持利用伪元素 (::before, ::after)、渐变背景 (linear-gradient)、内联 SVG/Base64 图片等高级 CSS 特性实现复杂视觉效果。

AI Agent 指令指南：CSS 生成规范

Agent 在生成 CSS 代码时，必须 遵循以下严格的规则和约束：

1. 强制命名空间约束 (最重要！)

所有生成的 CSS 选择器 必须 以 #wenyan 开头，中间用空格隔开。任何缺少 #wenyan 前缀的样式都将失效。

• ✅ 正确：#wenyan h1 { color: red; }
• ❌ 错误：h1 { color: red; }

2. 字体与字号建议

• 字体族 (font-family)：严禁主动设置 font-family。应当保持默认以适配微信公众号编辑器的系统字体。
• 字号 (font-size)：建议设定合理的范围（如 12px - 18px），以避免排版溢出或阅读困难。

3. 支持的 CSS 属性速查字典

目标元素	对应的 CSS 选择器	常用定制属性示例
全局默认样式	#wenyan	background-image, line-height, color
各级标题 (H1-H6)	#wenyan h1 到 #wenyan h6	font-size, text-align, border-bottom, margin
标题文字本身	#wenyan h1 span	color, font-weight, background (实现文字高亮)
标题装饰 (前后缀)	#wenyan h1::before	content, display, width, height, background-image
段落文本	#wenyan p	text-indent, letter-spacing, color
引用块整体	#wenyan blockquote	border-left, background-color, padding
代码块外层容器	#wenyan pre	background-color, border-radius, padding, overflow-x: auto
代码块内部内容	#wenyan pre code	color
分割线	#wenyan hr	border, border-top-style, border-color
超链接	#wenyan a	color, text-decoration, border-bottom

4. 外部资源引用限制 (🚨 极易出错)

• 禁止本地路径：严禁使用 url("./bg.png") 等本地路径。
• 合法引入方式：
  • Data URI (推荐)：url("data:image/svg+xml;utf8,<svg>...</svg>")
  • HTTPS 地址：url(https://example.com/bg.jpg)
• 禁止 Web 字体：不支持 @font-face。只能使用本地系统字体。

参考模板 (default.css)

在生成新的主题时，请参考以下 wenyan-cli 的默认样式结构：

/* 全局属性 */
#wenyan {
    line-height: 1.75;
    font-size: 16px;
}
/* 全局子元素属性 */
/* 支持分组 */
#wenyan h1,
#wenyan h2,
#wenyan h3,
#wenyan h4,
#wenyan h5,
#wenyan h6,
#wenyan p {
    margin: 1em 0;
}
/* 一级标题 */
#wenyan h1 {
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 1.5em;
}
/* 二级标题 */
#wenyan h2 {
    text-align: center;
    font-size: 1.2em;
    border-bottom: 1px solid #f7f7f7;
    font-weight: bold;
}
/* 列表 */
#wenyan > ul,
#wenyan >  {
    : ;
}
 ,
  {
    : ;
    : ;
}

  {
    : ;
    : auto;
    :  auto;
    : block;
}

  {
    : collapse;
    :  auto;
    : ;
    : fixed;
    : left;
    : auto;
    : table;
}

  {
    : ;
    :  solid ;
    :  ;
    :  ;
    : italic;
    : ;
}

   {
    : ;
    :  ;
    : ;
}

 pre {
    : ;
    : ;
    :  ;
    : .;
    : (, , , )   ;
    : ;
}

 pre  {
    : block;
    : auto;
    : .;
    : ;
}

 hr {
    : none;
    :  solid ;
    : ;
    : ;
}

  {
    : break-word;
    : ;
}

自动化工作流示例 (Agent 执行步骤)

1. 分析需求：提取关键词（如：深色、科技风），确定主色调。
2. 生成 CSS：严格按照命名空间约束，生成完整的 CSS 代码。
3. 保存文件：将生成的 CSS 内容写入当前目录的本地文件（如 theme.css）。
4. 后续引导：提示用户使用 apply-wechat-custom-theme 技能进行测试渲染或发布。