Skill: HTML海报制作
用HTML+浏览器截图的方式快速制作小红书/朋友圈海报。
使用场景
- 用户要求制作海报
- 需要快速生成可视化内容
核心步骤
1. 创建HTML文件
在 ~/Desktop/ 目录下创建HTML文件，包含完整样式的小红书海报模板。
关键要点：
- 宽度800px，高度1200px（竖版）
- 使用
font-family: 'Noto Sans SC'支持中文 - 背景简约清新（白色或浅色）
- 配色：绿色(#27AE60)代表农业/养殖，红色(#E74C3C)代表法律/警示
2. 启动本地服务器
cd ~/Desktop
python3 -m http.server 9999
3. 浏览器打开并截图
- 使用OpenClaw browser工具打开
http://localhost:9999/文件名.html - 截图保存到桌面
4. 清理
- 关闭本地服务器
- 删除临时HTML文件（可选保留）
模板示例
农业/养殖海报模板
<style>
.poster { width: 800px; height: 1200px; background: white; }
.header { background: linear-gradient(135deg, #27AE60 0%, #1E8449 100%); padding: 30px; text-align: center; }
.header-title { font-size: 36px; font-weight: 900; color: white; }
.section { background: #F8F8F8; border-radius: 12px; padding: 15px; margin-bottom: 12px; }
.section-title { font-size: 18px; font-weight: 700; color: #27AE60; }
.highlight-box { background: #E8F8F0; border-radius: 12px; padding: 15px; border-left: 5px solid #27AE60; }
.warning-box { background: #FDEBD0; border-radius: 12px; padding: 15px; border-left: 5px solid #E67E22; }
.footer { background: linear-gradient(135deg, #27AE60 0%, #1E8449 100%); padding: 20px; text-align: center; }
.tag { background: #E8F8F0; color: #27AE60; padding: 5px 10px; border-radius: 15px; font-size: 12px; }
</style>
法律/咨询海报模板
<style>
.poster { width: 800px; height: 1200px; display: flex; }
.left { width: 220px; background: #FFF5F5; }
.right { flex: 1; background: white; }
.header { background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%); border-radius: 10px; padding: 16px; }
.case-box { background: #F8F8F8; border-radius: 8px; padding: 12px; }
.result-box { background: linear-gradient(135deg, #FFE5E5 0%, #FFF5F5 100%); border-radius: 8px; padding: 10px; }
.cta-box { background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%); border-radius: 8px; padding: 10px; }
</style>
快速命令
# 启动服务器
cd ~/Desktop && python3 -m http.server 9999
# 关闭服务器
pkill -f "python3 -m http.server 9999"
注意事项
- 端口9999避免与8888冲突（Canva等可能占用）
- HTML中的图片用本地路径或网络URL
- 截图后及时关闭服务器释放资源