菜单
根据设计稿参考图反推生成自媒体封面HTML模板的工作流。用户提供参考图片+结构化描述，生成对应风格的HTML封面。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | cover-template-from-reference |
| description | 根据设计稿参考图反推生成自媒体封面HTML模板的工作流。用户提供参考图片+结构化描述，生成对应风格的HTML封面。 |
| tags | ["cover","html","design","template"] |
| created | "2026-05-22T00:00:00.000Z" |
| trigger | 按设计稿做封面 / 参考图生成封面 / 照着图片做模板 |
用户提供了参考设计稿（原图+描述），需要生成对应风格的HTML封面。
从描述中提取关键信息：
| 要素 | 示例 |
|---|---|
| 背景色 | #0A0A0F, radial-gradient |
| 强调色 | #00FFAA (霓虹青绿) |
| 字体 | Inter, Space Mono, Noto Sans CJK |
| 模块 | 导航栏、左右分栏、终端、按钮 |
| 特效 | grid网格、mesh orbs、blur光晕 |
按以下结构组织代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* CSS变量定义配色 */
:root {
--bg: #0A0A0F;
--accent: #00FFAA;
--text: #E5E7EB;
--muted: #9CA3AF;
}
/* 背景层 */
.bg { position: absolute; inset: 0; background: ... }
.grid { ... }
.noise { ... }
/* 布局容器 */
.container { position: relative; z-index: 2; ... }
/* 各模块样式 */
.navbar { ... }
.terminal { ... }
/* 动画 */
.blink-cursor { animation: blink 1s ... }
</style>
</head>
<body>
<div class="bg"></div>
<div class="grid"></div>
<!-- 内容 -->
</body>
</html>
用Playwright截图验证：
from playwright.sync_api import sync_playwright
def screenshot(html_file, output_file, width, height):
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page(viewport={'width': width, 'height': height})
page.goto(f'file://{html_file}')
page.wait_for_timeout(800)
page.screenshot(path=output_file, full_page=True)
browser.close()
当用户直接提供文案而不是参考图时：
配图尺寸建议：
overflow:hidden.prompt (强调色) + .cmd (白色) + 闪烁光标_templates/
├── f9-wx-{风格名}.html # 横版公众号
├── f9-xhs-{风格名}.html # 竖版小红书
├── preview-wx-{风格名}.png # 横版预览
└── preview-xhs-{风格名}.png # 竖版预览
/opt/hermes/.venv/bin/python3 + playwright/opt/data/workspace/设计虱-写作系统/_templates/高德地图综合服务，支持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.