Agent Skills
返回列表
微信公众号自定义主题生成器

微信公众号自定义主题生成器

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_d8946e26/generate-wenyan-theme 到你的 AI 助手。

技能介绍

为什么需要这个技能

微信公众号正文编辑器的样式覆盖能力有限，普通 CSS 如果没有正确命名空间、外部资源或字体声明不当，很容易注入后不生效。开发者如果反复手写 #wenyan 选择器、确认伪元素与代码块容器关系，容易遗漏 #wenyan pre code 这类细节。这个技能把“赛博朋克风”“深色代码块”“可爱引用块”等自然语言需求转成一份可保存、可测试的 CSS 主题，减少人工对齐微信排版结构的成本。

技能如何工作

  • 命名空间约束：生成的选择器必须以 #wenyan 开头，例如 #wenyan h1、#wenyan blockquote，避免样式泄漏或失效。
  • 元素级定制：覆盖全局背景、h1-h6 标题、标题内 span 高亮、::before 装饰、段落、引用、代码块外层 pre 与内部 code、分割线和链接。
  • 视觉效果：支持 ::before / ::after、linear-gradient、内联 SVG 或 Base64 图片，适合做标题前后缀、代码块背景和引用块装饰。
  • 文件输出：通常将结果写入当前目录的 theme.css，再提示使用 apply-wechat-custom-theme 进行测试渲染或发布。

适用边界与注意点

该技能只负责生成并保存 CSS，不负责直接上传、发布或在微信编辑器中实时预览。外部资源优先使用 Data URI 或 HTTPS，避免 url("./bg.png") 这类本地路径；不要使用 @font-face，字体应保持系统默认，字号建议控制在 12px 到 18px。如果需求涉及复杂交互、动画或第三方组件，可能需要额外验证微信客户端兼容性。

使用场景

  • 运营收到赛博朋克风公众号专题需求，要生成可保存待测试的主题 CSS 文件。
  • 开发者调整代码块样式，需要为 #wenyan pre 和 #wenyan pre code 设置背景与滚动。
  • 设计师描述引用块与标题装饰，技能生成带 ::before、渐变背景的本地 CSS。
  • 内容编辑准备品牌周排版，要求背景使用 Data URI 或 HTTPS 地址而非本地路径。

适合人员

  • 运营人员：每周把公众号专题视觉需求转成可测试的 CSS 主题。
  • 前端工程师：按 #wenyan 选择器规范生成标题、代码块和引用块样式。
  • 视觉设计师：把赛博朋克、深色代码块等描述转成伪元素与渐变 CSS。
  • AI 应用开发者：在 Agent 工作流中调用该技能输出并保存本地主题文件。