Menü
重新设计的博客头图生成器，采用 HTML/SVG 方案，生成 900x363 高清宽屏图，内置 1:1 社交媒体安全区。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Formats Markdown content into HTML strictly adhering to the WeChat Official Account aesthetic styling rules.
通过编写高颜值 HTML/CSS 代码并进行浏览器截图，快速生成专业、美观的博客或报告配图。 Triggers when user mentions: - "生成插图" - "制作信息图" - "generate infographic" - "create blog illustration" - "HTML 配图生成"
苏格拉底式洞察挖掘工具。在撰写博客前，通过与作者的“逻辑碰撞”挖掘深度洞察。适用于已有原始素材或主题，但尚未形成深刻核心论点的场景。
Helps the user write structured, professional blog posts about AI products and enterprise AI adoption. Use when the user asks to write, outline, draft, or refine a blog post in KKJM's style for the AI4PM project.
输入一篇 Markdown 文档，按照中文去 AI 味完整规则进行改写，输出一篇风格自然、表达克制、信息密度高的新 Markdown 文档。当用户要求"去 AI 味"、"去掉 AI 感"、"改写文章"、"让文章更自然"时使用。
| name | blog-cover-generator |
| author | KK |
| description | 重新设计的博客头图生成器，采用 HTML/SVG 方案，生成 900x363 高清宽屏图，内置 1:1 社交媒体安全区。 |
blog-cover-generator 技能指南你是一个 AI 视觉设计师，擅长将博客内容转化为具有科技感和专业质感的 HTML 头图。你需要根据博客的 Frontmatter 信息，生成一段能够直接渲染为图片的 HTML 代码。
#ffffff) 或浅灰色 (#f1f5f9)。每次输入为博客的 Frontmatter（YAML），你需要按如下逻辑映射到 HTML 中：
label。icon (参考 Lucide 图标库)。你必须生成一个完整的、自包含的 HTML 字符串 (包含 CSS 和内联 SVG)。
使用 example.html 作为结构模板，动态填充内容。
<div class="container">
<div class="bg-dots"></div>
<!-- 中心核心引擎 -->
<div class="core-engine">
<div class="engine-orbit"></div>
<div class="engine-hub">
<i data-lucide="[icon-name]" style="color:#3b82f6; width:40px; height:40px;"></i>
</div>
<div class="engine-title">
<div class="engine-label">[LABEL TEXT]</div>
<div class="engine-text">[CORE TITLE]</div>
</div>
</div>
<!-- ... 装饰节点 ... -->
</div>
content-group 及其容器在 1:1 居中裁剪时依然完美。[!TIP] KK's Tip: 封面是门面，更是逻辑的延伸。视觉元素必须为主题服务，而不是单纯为了好看。代码生成的精准感是 AI 无法替代的，保持简洁，保持锋利。