---
name: SolonCode Skin Generator
slug: soloncode-skin-generator
category: Frontend
description: SolonCode Skin Generator creates installable SolonCode Web UI skin zip packages from natural-language design requests. Use it when you need a theme, background, accent color, or a skin upload for SolonCode settings.
github: "https://github.com/opensolon/soloncode/tree/main/soloncode-cli/release/skills/soloncode-skin-skill"
language: Java
stars: 191
forks: 37
install: "npx degit https://github.com/opensolon/soloncode/tree/main/soloncode-cli/release/skills/soloncode-skin-skill ~/.claude/skills/soloncode-skin-skill"
installs_to: ~/.claude/skills/soloncode-skin-skill
source_path: soloncode-cli/release/skills/soloncode-skin-skill/SKILL.md
collection_size: 6
category_size: 670
collection_url: "https://dirskills.com/collections/opensolon/soloncode"
added: 2026-09-06T05:19:32.238Z
last_synced: 2026-09-06T05:19:32.238Z
canonical_url: "https://dirskills.com/skills/soloncode-skin-generator"
---

# SolonCode Skin Generator

SolonCode Skin Generator creates installable SolonCode Web UI skin zip packages from natural-language design requests. Use it when you need a theme, background, accent color, or a skin upload for SolonCode settings.

**Install:**

```bash
npx degit https://github.com/opensolon/soloncode/tree/main/soloncode-cli/release/skills/soloncode-skin-skill ~/.claude/skills/soloncode-skin-skill
```

## README

# SolonCode Skin Generator

根据用户自然语言需求，生成**可直接上传安装**的 SolonCode Web 皮肤 Zip。  
目标产物始终是可安装的 zip（默认 `.uploads/{name}-yyyyMMddHH.zip`），不是零散 CSS 片段。

**作用范围**：仅 SolonCode Web UI 皮肤系统。  
**禁止**：改 `soloncode-desktop`；生成 js/html/svg/可执行文件；使用保留名。

## When to Use

- 「做个皮肤 / 生成 skin / 换肤 / 主题包」
- 「设置面板加背景 / 像 ddd 那样」
- 「海洋/极光/护眼/高对比风格」
- 「欢迎页别太空 / 主区氛围图」
- 「根据 skin.md / skin-spec 出 zip」

## Critical Rules

1. **交付物必须是 zip**：至少含 `skin.json` + `skin.css`。
2. **`name` 合法**：`^[a-zA-Z0-9][a-zA-Z0-9_-]{0,63}$`，且不是 `default` / `eyecare` / `contrast`。
3. **选择器绑定 name**：`[data-skin="{name}"][data-theme="light|dark"]`，light/dark 成对；模板 id 必须改干净。
4. **图片只写包内相对路径**：优先 `url("./assets/...")`；禁止 `..` 与绝对路径；不推荐外链。
5. **列表预览固定 `preview.png`**（不要只给 webp/jpg）。
6. **限制**：zip ≤ 8MB；单资源 ≤ 2MB（**仅 `skin.css` 例外**；`skin.json` 也算资源）；解压总量 ≤ 32MB。
7. **可读性优先**：输入框/正文/代码块必须可读；功能色（success/danger/git）默认不动。
8. **不要臆造 token**：当前无 `--bg-welcome-image` 等官方欢迎区槽位。
9. **无可靠位图能力时用 CSS 渐变**；有 Pillow 时用本 skill 的 `gen_bg.py` / `gen_preview.py`。
10. **详细规范按需加载**：`references/skin-spec.md`。

## Progressive Loading

| 需要时 | 读取 / 执行 |
|---|---|
| 完整规范 / 变量表 / 排障 | `references/skin-spec.md` |
| **一键生成（推荐）** | `scripts/make_skin.py` |
| 脚手架 | `scripts/scaffold_skin.py` |
| 预览图 | `scripts/gen_preview.py` |
| 有结构背景图 | `scripts/gen_bg.py` |
| 模板 A/B/C/D | `assets/templates/{minimal-accent,ocean-gradient,settings-panel,full-theme}/` |
| 校验 | `scripts/validate_skin.py` |
| 打包 | `scripts/pack_skin.py` |

脚本路径：先定位本 skill 根目录，再 `python3 scripts/...`。  
依赖：校验/打包仅需标准库；**生成 PNG 需要 Pillow**（`pip install pillow`）。

## Workflow

### 0. 优先一键（Agent 默认路径）

用户给了风格词时，直接：

```bash
python3 scripts/make_skin.py \
  --name aurora \
  --recipe c \
  --theme aurora \
  --display-name "极光设置" \
  --with-assets \
  --force
# 默认产出：.uploads/aurora-yyyyMMddHH.zip（如 aurora-2026071715.zip）
```

| 参数 | 说明 |
|---|---|
| `--name` | 皮肤 id |
| `--recipe` | `a/b/c/d/e/f` |
| `--theme` | `ocean/forest/aurora/ink/warm/pink/business` |
| `--with-assets` | 配方 C/D 生成有结构 PNG 并写入 `url("./assets/...")` |
| `--no-preview` | 跳过 preview.png（默认会生成） |
| `--work-dir` | 保留工作目录便于再改 |
| `-o` | 输出 zip（**默认** `.uploads/{name}-yyyyMMddHH.zip`，避免覆盖冲突） |

成功后按「输出协议」回复即可。

### 1. 解析需求

```text
name / displayName
主题词（海洋、极光、墨色…）
主色（未给则 --theme 启发式）
目标区域：main / sidebar / settings / filer / all
是否要位图（要 → --with-assets 或 gen_bg）
是否“只改设置”
明暗偏好（仍必须 light+dark）
输出路径（默认 .uploads/{name}-yyyyMMddHH.zip，已在 .gitignore）
```

默认：合法英文短名 + 配方 B + 无位图 + 不改功能色 + zip 落到 `.uploads/{name}-yyyyMMddHH.zip`。

### 2. 选择配方

```text
只提颜色/风格词 ────────► A  minimal-accent
氛围/渐变/海洋/森林 ─────► B  ocean-gradient
点名设置面板 / 参考 ddd ─► C  settings-panel（建议 --with-assets）
整站完整主题 ───────────► D  full-theme（建议 --with-assets）
高对比/无障碍 ──────────► E  强化文字边框，*-image:none
欢迎页留白/头像 ────────► F  .welcome-view + main 背景
```

| 配方 | 模板 | 重点 |
|---|---|---|
| A | `minimal-accent` | `--accent*` / 用户气泡 |
| B | `ocean-gradient` | 主区/侧栏 CSS 渐变 |
| C | `settings-panel` | `--bg-settings-*` + tabs/卡片半透明 |
| D | `full-theme` | 多区 image/overlay/surface + 设置透图 |
| E | minimal + extras | 高对比，禁用装饰图 |
| F | ocean + extras | 欢迎区布局（非正式槽位） |

### 3. 分步脚手架（需要细改时）

```bash
python3 scripts/scaffold_skin.py \
  --name aurora --recipe c --theme aurora \
  --display-name "极光设置" \
  --out /tmp/aurora-skin \
  --preview --with-assets --force
```

手动补资源：

```bash
python3 scripts/gen_bg.py -o /tmp/aurora-skin/assets/settings-light.png --mode light --theme aurora
python3 scripts/gen_bg.py -o /tmp/aurora-skin/assets/settings-dark.png --mode dark --theme aurora
python3 scripts/gen_preview.py -o /tmp/aurora-skin/preview.png --theme aurora --label aurora
```

**配方 C 透图清单（必须同时满足）**：

1. `--bg-settings-image` 有结构（真图或强渐变，勿近纯色）
2. overlay 偏薄（light 约 0.18–0.35）
3. `--bg-settings-surface: transparent`
4. `--bg-settings` 半透明 rgba
5. 覆盖 `.settings-tab.active` / 卡片，避免实色遮挡

### 4. 校验并打包

```bash
python3 scripts/validate_skin.py /tmp/aurora-skin
mkdir -p .uploads
# 不传 -o 时默认 .uploads/{name}-yyyyMMddHH.zip
python3 scripts/pack_skin.py /tmp/aurora-skin
```

zip 必须**扁平结构**（根上直接 `skin.json`）。  
`pack_skin.py` 会跳过 `assets/README.txt` 等脚手架说明。

### 5. 回复用户（输出协议）

必须包含：

1. Zip 路径（相对当前 workspace，供一键安装）  
2. **一键安装链接**（优先，Web 端点一点即可装）  
3. `name` / `displayName`  
4. 覆盖区域  
5. 是否含位图  
6. 备用手动安装步骤  
7. 验收点（light/dark、目标区域、可读性）

**默认落盘路径**：`.uploads/{name}-yyyyMMddHH.zip`

- 与 Web 聊天附件统一目录一致，已在仓库 `.gitignore`，不污染项目根
- 文件名带本地时戳 `yyyyMMddHH`（到小时），避免同名覆盖；同小时再次生成可加 `--force` 或换 `-o`
- 打包前确保目录存在：`mkdir -p .uploads`（脚本默认也会创建）
- 用户明确要求其它路径时才改；安装链接 `file=` 始终跟**真实相对路径**

**一键安装链接（必须）**：zip 落在当前工作区后，用 Markdown 链接输出。前端会把该链接渲染成**醒目主按钮**，并 `POST` 安装后自动启用：

```markdown
[⬇️ 点击安装皮肤](/web/settings/skins/install?file={相对路径.zip})
```

规则：

- `file` 为 **相对 workspace 的路径**，不要带 `./` 前缀，不要绝对路径
- 例：默认产物 `.uploads/aurora-2026071715.zip` → `file=.uploads/aurora-2026071715.zip`
- **链接文案必须醒目**，推荐固定：`⬇️ 点击安装皮肤`（或 `点击安装并启用皮肤`）；**不要**用「下载」「详情」等弱文案
- 链接单独成段（上下各空一行），放在摘要之后、备用说明之前，方便扫读
- 前端会拦截该链接并 `POST` 安装，成功后自动启用；**不要**只写纯文本路径而不给链接
- 若无法确定相对路径（极少见），才退回手动上传说明

```text
已生成皮肤包：.uploads/aurora-2026071715.zip
- name: aurora
- 展示名: 极光
- 区域: settings 独立背景 + 全局强调色
- 资源: preview.png + assets/settings-*.png

[⬇️ 点击安装皮肤](/web/settings/skins/install?file=.uploads/aurora-2026071715.zip)

备用：设置 → 通用 → 皮肤选择 → 上传皮肤
请检查 light/dark 设置面板；若无变化：强制刷新，或先切默认再切回。
```

## Settings Panel Checklist

背景图“看不见”时按序查：

1. 图是否接近纯色？（要用 `gen_bg.py` 或强渐变）
2. `--bg-settings-overlay` 是否过厚（≥0.6）？
3. `--bg-settings-surface` 是否仍是实色？
4. `--bg-settings` 是否不透明？
5. `.settings-body` / 卡片是否盖实色？
6. `url("./assets/...")` 与 zip 内路径是否一致？
7. 是否覆盖 `.settings-tab.active`？

## Welcome Page Note

欢迎区在 `.main-area` 内，**吃 `--bg-main-*`**，无官方独立背景 token。  
`scaffold/make --recipe f` 会预置 `.welcome-view` 布局增强。

## Color Heuristics

| 主题 | light accent | dark accent |
|---|---|---|
| ocean | `#0b7ea4` | `#3db8d9` |
| forest | `#3f7d4e` | `#6bbf7a` |
| aurora | `#6d5efc` | `#a89bff` |
| ink | `#3f3f46` | `#a1a1aa` |
| warm | `#d97706` | `#fbbf24` |
| pink | `#db2777` | `#f472b6` |
| business | `#4f6ef7` | `#6b8aff` |

脚手架 / make 可用 `--theme` 自动套用 accent / user-msg / thinking-dot。

## Install / Runtime

| 项 | 值 |
|---|---|
| 默认 zip 路径 | `.uploads/{name}-yyyyMMddHH.zip`（与 Web 附件目录一致，gitignore；时戳防冲突） |
| 一键安装 | Markdown 链接 `[⬇️ 点击安装皮肤](/web/settings/skins/install?file=.uploads/{name}-yyyyMMddHH.zip)` → 前端渲染为按钮并 POST 安装启用 |
| 手动安装 | 设置 → 通用 → 皮肤选择 → 上传皮肤 |
| 安装目录 | `~/.soloncode/skins/{name}/` |
| 预置 | `default` / `eyecare` / `contrast` |
| 本地 CSS | `/web/settings/skins/file?name={name}&file=skin.css`（服务端改写相对 url） |
| 同名重装 | 覆盖 |

## Self-Check Before Delivery

- [ ] 含 `skin.json` + `skin.css`
- [ ] name 合法且非保留名
- [ ] CSS `data-skin` == name（无残留模板 id）
- [ ] light + dark 成对
- [ ] 有图则 overlay 薄；透图场景 surface/卡片半透明
- [ ] 无 js/html/svg/exe/sh
- [ ] 相对路径正确；预览用 `preview.png`
- [ ] zip ≤ 8MB；资源 ≤ 2MB（css 除外）
- [ ] 通过 `validate_skin.py`
- [ ] 已产出 zip（优先 `make_skin.py` / `pack_skin.py`，默认 `.uploads/{name}-yyyyMMddHH.zip`）
- [ ] 回复中含醒目一键安装链接：`[⬇️ 点击安装皮肤](/web/settings/skins/install?file=.uploads/…zip)`（链接 `file=` 与真实路径一致）

## Do Not

- 不要只输出 CSS 文本就结束（除非用户只要片段）
- 不要修改 soloncode-desktop
- 不要使用/覆盖预置名
- 不要假设欢迎页官方独立背景变量
- 不要用厚遮罩 + 弱对比图冒充“有背景”
- 不要把模板目录名直接当最终 `name` 交付（除非用户明确要求）
- 不要手写接近纯色的 PNG；用 `gen_bg.py` 或纯 CSS 强渐变