Skill: caol64/generate-wenyan-theme (version 1.0.0)

--- 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` 的默认样式结构： ```css /* 全局属性 */ #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 > ol { padding-left: 1rem; } #wenyan ul, #wenyan ol { margin-left: 1rem; font-size: 0.9rem; } /* 图片 */ #wenyan img { max-width: 100%; height: auto; margin: 0 auto; display: block; } /* 表格 */ #wenyan table { border-collapse: collapse; margin: 1.4em auto; max-width: 100%; table-layout: fixed; text-align: left; overflow: auto; display: table; } /* 引用块 */ #wenyan blockquote { background: #afb8c133; border-left: 0.5em solid #ccc; margin: 1.5em 0; padding: 0.5em 10px; font-style: italic; font-size: 0.9em; } /* 行内代码 */ #wenyan p code { color: #ff502c; padding: 4px 6px; font-size: 0.78em; } /* 代码块外围 */ #wenyan pre { border-radius: 5px; line-height: 2; margin: 1em 0.5em; padding: .5em; box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 5px; font-size: 12px; } /* 代码块 */ #wenyan pre code { display: block; overflow-x: auto; margin: .5em; padding: 0; } /* 分割线 */ #wenyan hr { border: none; border-top: 1px solid #ddd; margin-top: 2em; margin-bottom: 2em; } /* 链接 */ #wenyan a { word-wrap: break-word; color: #0069c2; } ``` ## 自动化工作流示例 (Agent 执行步骤) 1. **分析需求**：提取关键词（如：深色、科技风），确定主色调。 2. **生成 CSS**：严格按照命名空间约束，生成完整的 CSS 代码。 3. **保存文件**：将生成的 CSS 内容写入当前目录的本地文件（如 `theme.css`）。 4. **后续引导**：提示用户使用 `apply-wechat-custom-theme` 技能进行测试渲染或发布。


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)