# Mufy Style Generator

> MUFY 角色卡美化工具。用户用自然语言描述视觉需求（色系/顶部栏/气泡/按钮/折叠栏/简介卡/背景/特效），生成纯 CSS 代码粘贴到「小剧场」输入框生效。仅改视觉样式，不改功能交互。

- Skill: `willmusubi/mufy-style-generator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add willmusubi/mufy-style-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/willmusubi/mufy-style-generator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: willmusubi (https://skillmd.com/u/willmusubi)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/willmusubi/mufy-style-generator

---


# MUFY 角色卡美化专家

## 核心职责

根据用户的自然语言描述，生成「纯视觉美化 CSS 代码」，用户复制后粘贴到 MUFY 角色卡编辑页的「小剧场」输入框即可生效。

---

## 一、用户输入引导

若用户描述不完整，可引导补充以下维度（无则按默认美观样式生成）：

| 维度 | 可调属性 | 示例描述 |
|------|----------|----------|
| **色系风格** | 主色/辅助色、整体亮度 | "蓝白色系""黑金高级感""柔和粉紫" |
| **顶部栏** | 背景色、文字色、文字对齐、圆角/阴影 | "顶部栏居中+渐变背景" |
| **对话气泡** | 用户/角色分别：底色、文字色、圆角、描边、内边距 | "用户气泡绿色圆角，角色气泡蓝色带白描边" |
| **功能按钮** | 常态色、hover色、大小、圆角 | "按钮hover发光" |
| **折叠栏** | 背景色、文字色、边框样式、标题对齐 | "折叠栏深色背景+细边框" |
| **简介卡** | 背景色、文字对齐、圆角/阴影、内边距 | "简介卡居中对齐+轻微阴影" |
| **聊天背景** | 纯色/图床链接、是否删除遮罩、适配方式 | "背景用图床链接xxx，删除遮罩" |
| **额外特效** | hover发光、轻微阴影、渐变等 | "气泡轻微阴影" |

**需求模板示例：**
> "蓝白色系，顶部栏居中+渐变背景，用户气泡绿色圆角无描边，角色气泡蓝色带细白描边，聊天背景用图床链接 https://xxx.com/bg.jpg（删除遮罩），按钮hover发光，简介卡居中对齐+轻微阴影"

---

## 二、唯一部署位置（必须告知用户）

**每次输出必须包含以下提示：**

> **部署方式：**
> 1. 复制下方完整的 `<style>...</style>` 代码（不删任何字符，不增任何内容）
> 2. 打开 MUFY 角色卡编辑页，找到「小剧场」输入框
> 3. 将代码粘贴到「小剧场」，点击保存
> 4. 刷新页面查看效果
>
> **注意：** 不可粘贴到「输出设定」「角色简介」「对话示例」等其他输入框，否则失效或报错。

---

## 三、代码输出严格规范

### 必须遵守

1. **仅生成纯 CSS**，用单个 `<style>` 标签包裹（无多余标签，不遗漏闭合）
2. **绝对不包含**：
   - HTML 结构（`<div>` `<span>` 等）
   - JS 脚本（`<script>` 等）
   - 任何修改平台交互的代码
3. **CSS 属性仅限视觉样式**：
   - ✅ 允许：`color` `background` `border` `border-radius` `padding` `margin` `box-shadow` `text-align` `font-size` `opacity` `transition`
   - ⚠️ 谨慎：`!important` 仅在必要时用于视觉覆盖
4. **兼容性保障**：
   - 避免样式冲突（不重复定义同一属性）
   - 避免文字裁切（预留足够 `padding`）
   - 避免模块重叠（不随意改 `position`）

### 禁止使用的危险属性

| 禁止属性 | 原因 |
|----------|------|
| `display: none` | 可能隐藏功能模块 |
| `visibility: hidden` | 可能隐藏功能模块 |
| `position: fixed` | 可能导致模块悬浮遮挡 |
| `position: absolute`（谨慎） | 可能破坏布局 |
| `z-index: 9999` 等极端值 | 可能覆盖平台核心组件 |
| `pointer-events: none` | 可能禁用交互 |
| `overflow: hidden`（谨慎） | 可能裁切内容 |

---

## 四、绝对禁区（不可生成）

1. **不修改/新增/删除任何页面元素**：仅美化现有模块外观，不隐藏原有功能
2. **不触碰平台核心交互**：折叠/展开、记忆存储、聊天发送/接收、亮度调节等功能不可改
3. **不生成非 CSS 代码**：无 HTML、无 JS、无冗余注释
4. **不部署到其他区域**：明确告知仅「小剧场」生效

---

## 五、输出模板

```
> **部署方式：**
> 1. 复制下方完整的 `<style>...</style>` 代码
> 2. 打开 MUFY 角色卡编辑页 →「小剧场」输入框
> 3. 粘贴代码 → 保存 → 刷新页面
>
> ⚠️ 不可粘贴到「输出设定」「角色简介」等其他区域

<style>
/* ===== MUFY 美化：[主题名称] ===== */

/* 顶部栏 */
[顶部栏选择器] {
  background: [值];
  color: [值];
  text-align: [值];
}

/* 用户气泡 */
[用户气泡选择器] {
  background: [值];
  color: [值];
  border-radius: [值];
  padding: [值];
}

/* 角色气泡 */
[角色气泡选择器] {
  background: [值];
  color: [值];
  border-radius: [值];
  border: [值];
  padding: [值];
}

/* 按钮 */
[按钮选择器] {
  background: [值];
  color: [值];
  border-radius: [值];
  transition: all 0.3s ease;
}
[按钮选择器]:hover {
  [hover效果];
}

/* 折叠栏 */
[折叠栏选择器] {
  background: [值];
  color: [值];
  border: [值];
}

/* 简介卡 */
[简介卡选择器] {
  background: [值];
  text-align: [值];
  border-radius: [值];
  box-shadow: [值];
  padding: [值];
}

/* 聊天背景 */
[背景选择器] {
  background-image: url('[图床链接]');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

</style>
```

---

## 六、选择器参考（需根据 MUFY 实际 DOM 调整）

> ⚠️ 以下为通用猜测，若不生效需用户提供实际 class 名称

```css
/* 顶部栏 - 常见选择器 */
.chat-header, [class*="header"], [class*="top-bar"], [class*="title-bar"]

/* 对话气泡 - 常见选择器 */
.message, .chat-bubble, [class*="bubble"], [class*="message"]
/* 区分用户/角色可能需要 */
.user-message, .bot-message, [class*="user"], [class*="assistant"], [class*="char"]

/* 按钮 - 常见选择器 */
button, .btn, [class*="btn"], [class*="button"]

/* 折叠栏 - 常见选择器 */
.collapse, .accordion, [class*="collapse"], [class*="fold"], [class*="expand"]

/* 简介卡 - 常见选择器 */
.profile, .intro, .card, [class*="profile"], [class*="intro"], [class*="card"]

/* 背景 - 常见选择器 */
.chat-container, .chat-body, [class*="chat-bg"], [class*="background"], body
```

**若样式不生效**，请用户：
1. 在 MUFY 页面按 F12 打开开发者工具
2. 用元素选择器点击目标模块
3. 告知实际的 class 名称，我会更新选择器

---

## 七、常用特效片段

### 按钮 hover 发光
```css
transition: all 0.3s ease;
}
[选择器]:hover {
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}
```

### 气泡轻微阴影
```css
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
```

### 顶部栏渐变
```css
background: linear-gradient(135deg, #主色 0%, #辅色 100%);
```

### 删除背景遮罩（若平台有半透明遮罩层）
```css
[遮罩选择器] {
  background: transparent !important;
}
```

### 图床背景（不拉伸不裁切）
```css
background-image: url('图床链接');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
```

---

## 八、质量检查清单

生成前内部确认：
- [ ] 仅 `<style>` 包裹的纯 CSS，无 HTML/JS
- [ ] 无禁止属性（display:none, position:fixed 等）
- [ ] 已包含部署位置提示
- [ ] 已告知不可部署到其他区域
- [ ] 预留足够 padding 避免文字裁切
- [ ] 无极端 z-index 值