OpenClaw 企业定制 私人订制工作流 优化运维 openclaw记忆优化 问题咨询解决 请加微信交流
微信: aixbwz
想让Hermes的界面风格与众不同？Skins系统让你自定义AI的视觉外观，包括颜色、字体、布局、Logo等。这篇讲清楚Skins是什么、怎么配置、以及有哪些现成的皮肤可选。
Skins是什么
Skins是Hermes的界面主题系统，可以自定义：
- 颜色方案（主色调、背景色、强调色）
- 字体和字号
- 布局和间距
- Logo和图标
- 欢迎语和提示词
如果你在网页或App中使用Hermes，Skins能让它匹配你的品牌风格。
快速开始
# 查看可用皮肤
hermes skins list
# 应用皮肤
hermes skins apply minimal-dark
# 预览皮肤
hermes skins preview minimal-dark内置皮肤
1. default
默认皮肤，简洁干净，适合大多数场景。
2. minimal-dark
深色极简风格，适合开发者，深色护眼。
3. minimal-light
浅色极简风格，干净明亮。
4. terminal-green
复古终端风格，绿色文字黑色背景，致敬经典命令行。
5. hacker-blue
黑客蓝色调，科技感十足。
6. warm-orange
暖橙色系，友好亲切。
7. purple-dream
紫色梦幻风格，个性鲜明。
8. ocean-blue
海洋蓝色，清新专业。
9. forest-green
森林绿色，自然环保。
10. sunset-pink
日落粉色，温馨浪漫。
配置皮肤
# config.yaml
skins:
active: "minimal-dark"
custom_path: "~/.hermes/skins"创建自定义皮肤
皮肤文件结构
~/.hermes/skins/my-skin/
skin.json # 皮肤配置
logo.svg # Logo图片
styles.css # 自定义样式（可选）
preview.png # 预览图（可选）skin.json配置
{
"name": "My Custom Skin",
"version": "1.0.0",
"author": "Your Name",
"colors": {
"primary": "#6366f1",
"secondary": "#8b5cf6",
"background": "#0f172a",
"surface": "#1e293b",
"text": "#f8fafc",
"textSecondary": "#94a3b8",
"accent": "#22d3ee",
"success": "#22c55e",
"warning": "#f59e0b",
"error": "#ef4444"
},
"fonts": {
"primary": "Inter, system-ui, sans-serif",
"mono": "JetBrains Mono, monospace",
"size": {
"small": "12px",
"medium": "14px",
"large": "16px",
"xlarge": "20px"
}
},
"layout": {
"borderRadius": "8px",
"spacing": "16px",
"maxWidth": "800px"
},
"logo": {
"url": "./logo.svg",
"width": 32,
"height": 32
},
"welcome": {
"title": "Hello, I'm Hermes",
"subtitle": "Your AI assistant, ready to help"
}
}字段说明
- colors：定义所有颜色变量，必填
- fonts：字体配置，可选
- layout：布局参数，可选
- logo：Logo配置，可选
- welcome：欢迎语，可选
颜色变量
所有颜色都支持CSS变量：
colors:
primary # 主色调（按钮、链接等）
secondary # 次要色
background # 页面背景
surface # 卡片、容器背景
text # 主要文字
textSecondary # 次要文字
accent # 强调色
success # 成功状态
warning # 警告状态
error # 错误状态
border # 边框色使用CSS自定义样式
可以在styles.css中写自定义CSS：
/* styles.css */
.my-skin .message {
border-radius: 16px;
padding: 12px 16px;
}
.my-skin .message.user {
background: var(--primary);
color: white;
}
.my-skin .message.assistant {
background: var(--surface);
}
/* 隐藏某些元素 */
.my-skin .branding {
display: none;
}预览皮肤
hermes skins preview my-skin在浏览器中预览皮肤效果。
生成预览图
hermes skins screenshot my-skin --output preview.png生成皮肤预览PNG图片。
分享皮肤
皮肤文件可以分享给其他人：
# 导出皮肤
hermes skins export my-skin -o my-skin.zip
# 导入皮肤
hermes skins import my-skin.zip发布到市场
hermes skins publish my-skin发布到Skins市场，其他人可以安装。
高级配置
响应式配置
layout:
mobile:
maxWidth: "100%"
padding: "12px"
desktop:
maxWidth: "800px"
padding: "24px"深色/浅色模式
colors:
# 当系统为深色模式时
dark:
background: "#0f172a"
text: "#f8fafc"
# 当系统为浅色模式时
light:
background: "#ffffff"
text: "#1e293b"渐变背景
colors:
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"毛玻璃效果
colors:
surface: "rgba(255, 255, 255, 0.1)"
backdropFilter: "blur(10px)"最佳实践
- 保持可读性：文字和背景对比度要够
- 一致性：颜色数量控制在3-5个
- 测试响应式：确保手机和电脑都好看
- 预览再应用：先用preview确认效果
品牌配色
如果要给公司用：
colors:
primary: "#你的品牌主色"
secondary: "#你的品牌辅助色"
background: "#背景色"
# 保持文字可读常见问题
皮肤不生效？
检查：1）皮肤文件格式是否正确；2）JSON是否有效；3）路径是否正确；4）hermes skins apply后重启。
Logo不显示？
检查：1）图片路径是否正确；2）图片格式是否支持（SVG/PNG/JPG）；3）尺寸是否合理。
颜色变量不识别？
确保使用标准CSS变量名：–hermes-primary等。
如何恢复默认皮肤？
hermes skins apply default总结
Skins让Hermes的界面完全可定制。
核心价值：
- 10+内置皮肤，即选即用
- 完全自定义颜色、字体、布局
- 支持CSS自定义样式
- 导出分享给他人
- 适合品牌定制
建议先用内置皮肤试试效果，再创建自己的。
相关文章
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容