菜单
封面模板设计流程 - 外部模型读图生成设计规范 → 我根据规范生成HTML封面。 触发词：「设计封面」「封面规范」「参考图生成」「自定义封面」「品牌封面」。 当用户提到设计封面、参考图生成、自定义封面风格时使用。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
高德地图综合服务，支持POI搜索、路径规划、旅游规划、周边搜索和热力图数据可视化
Knowledge comic creator supporting multiple art styles and tones. Creates original educational comics with detailed panel layouts and sequential image generation. Use when user asks to create "知识漫画", "教育漫画", "biography comic", "tutorial comic", or "Logicomix-style comic".
Generate professional infographics with 21 layout types and 21 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "visual summary", "信息图", "可视化", or "高密度信息大图".
Darwin Skill (达尔文.skill): autonomous skill optimizer inspired by Karpathy's autoresearch. Evaluates SKILL.md files using an 8-dimension rubric (structure + effectiveness), runs hill-climbing with git version control, validates improvements through test prompts, and generates visual result cards. Use when user mentions "优化skill", "skill评分", "自动优化", "auto optimize", "skill质量检查", "达尔文", "darwin", "帮我改改skill", "skill怎么样", "提升skill质量", "skill review", "skill打分".
从 DESIGN.md 生成预览图并截图的工作流 - 解决 Playwright 浏览器路径问题和 YAML 解析
Cron jobs auto-deliver final responses to configured targets — send_message to the same target gets deduplicated and skipped. Print report content directly as final response instead.
| name | design-shi-cover-template |
| slug | design-shi-cover-template |
| description | 封面模板设计流程 - 外部模型读图生成设计规范 → 我根据规范生成HTML封面。 触发词：「设计封面」「封面规范」「参考图生成」「自定义封面」「品牌封面」。 当用户提到设计封面、参考图生成、自定义封面风格时使用。 |
| tags | ["cover","template","html","design","brand"] |
| created | "2026-05-22T00:00:00.000Z" |
| updated | "2026-05-28T00:00:00.000Z" |
| metadata | {"keywords":["封面","设计","模板","品牌","HTML","规范"]} |
本技能配套以下参考文件（位于 references/ 目录）：
| 文件 | 用途 |
|---|---|
references/design-system.md | 设计规范（配色、字体、间距） |
references/templates.md | 模板映射表 |
设计封面前建议参考 references/templates.md 选择合适的模板。
外部资源：
/opt/data/hermes/cover-templates/brand-profile.md/opt/data/hermes/cover-templates/CHEATSHEET.md/opt/data/workspace/设计虱-写作系统/_templates/SPEC-nowill-design.md/opt/data/workspace/设计虱-写作系统/_templates/SPEC-beautiful-html-templates.md外部模型读图 → 结构化设计规范 → 生成HTML封面
当用户无法使用视觉模型时，借助外部AI理解参考图，生成结构化设计规范，我再根据规范精准生成HTML。
/opt/data/hermes/cover-templates/brand-profile.md/opt/data/hermes/cover-templates/CHEATSHEET.md违反后果：封面看起来像AI生成的，没有重点，记不住。
参考 references/templates.md 的映射表：
参考 references/design-system.md 的配色和字体规范。下面是最小 HTML 骨架示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280">
<style>
/* 设计规范变量 */
:root {
--bg: #121212;
--accent: #FF5A1F;
--text: #FFFFFF;
--text-secondary: #AAAAAA;
--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 1280px;
height: 720px;
background: var(--bg);
font-family: var(--font);
color: var(--text);
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px 64px;
overflow: hidden;
}
.tag {
font-size: 14px;
font-weight: 500;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 24px;
}
.title {
font-size: 48px;
font-weight: 900;
line-height: 1.15;
margin-bottom: 16px;
}
.subtitle {
font-size: 24px;
font-weight: 400;
color: var(--text-secondary);
margin-bottom: 48px;
}
.footer {
position: absolute;
bottom: 32px;
right: 48px;
font-size: 14px;
color: var(--text-secondary);
}
/* 装饰元素 */
.deco {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid var(--accent);
border-radius: 50%;
opacity: 0.1;
top: -60px;
right: -60px;
}
</style>
</head>
<body>
<div class="deco"></div>
<div class="tag">NAS / 硬件</div>
<div class="title">主标题内容</div>
<div class="subtitle">副标题内容</div>
<div class="footer">设计虱聊科技</div>
</body>
</html>
关键约束：
--bg、--accent、--text、--text-secondaryfrom playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page(viewport={'width': 1280, 'height': 720})
page.goto('file:///path/to/template.html')
page.wait_for_timeout(800)
page.screenshot(path='output.png', full_page=True)
browser.close()
对照 CHEATSHEET.md 的快速检查清单逐条验证。
ls -lh output.png）如果截图文件为空或过小，检查 Playwright viewport 设置和 wait_for_timeout 时间。
视觉模型无法分析参考图
→ 尝试使用其他视觉模型
→ 如果仍然失败，使用默认模板
→ 提供错误信息给用户
外部模型返回的规范格式错误
→ 手动解析并修复格式
→ 使用默认值填充缺失字段
→ 提供错误信息给用户
模板文件损坏或路径错误
→ 检查模板文件是否存在
→ 使用内联模板生成
→ 提供错误信息给用户
Playwright 截图报错
→ 检查 /opt/hermes/.venv/bin/python3 是否存在
→ 如果缺失，提示用户安装 Playwright
→ 提供错误信息给用户
本文档由 skill-optimizer 自动生成