# MUFY美化规范

 

{% hint style="warning" %} <mark style="color:$warning;">⚠️更新后可能出现的严重冲突</mark>

1\.  请各位创作者去掉卡片中的min-height: 100vh，这样输入框就不会异常了

<mark style="color:$warning;">⚠️更新后可能存在的冲突</mark>

1\.  输入框部分，由原有的 <mark style="color:$primary;">#chatInput</mark> 更换为 <mark style="color:$primary;">#mufy\_chat\_input\_container</mark>

替换代码中#chatInput后可解决冲突

&#x20;&#x20;

2\.  版本更新亮度调节功能，背景遮罩元素调整。

![](/files/3L10a2MK561dvAdVJsyG)

若原有代码中存在修改背景遮罩部分，修改为 <mark style="color:$primary;">#mufy\_background\_overlay</mark>

&#x20;

3\.  更新打包后，原ai气泡框动态码.\_message\_6hyew\_1更换，可能造成ai气泡框美化失效

使用规范<mark style="color:$primary;">.mufy\_ai\_message\_bubble</mark> 即可解决冲突
{% endhint %}

## 快速开始

文档整理了官方推荐的美化规范。

遵循本规范，可以减少版本更新后的兼容性问题，快速定位页面中的美化元素。

&#x20;

<img src="/files/A8r2jGPRaehd7yCPLabQ" alt="" data-size="line"> <mark style="color:$primary;">**快速开始美化编写**</mark>

*目标：实现mufy的ai气泡框美化*

1\.  在文档中找到 AI气泡框 的定位符（如：<mark style="color:$info;">.mufy\_ai\_message\_bubble</mark> ）

2\.  将定位符和你的美化需求发给AI，例如：

```
请为类名为.mufy_ai_message_bubble 的气泡框生成CSS代码。
美化需求：我需要一个紫色主题，渐变，白色边框的气泡框，左上角右下角加上图片，可爱的效果
严格保持我给你的优化部分的类名或id，具有良好审美，代码简洁，尽量不改变原有元素布局与大小
```

3\.  获取到ai生成的代码，用\<style>...\</style>包裹，放建卡小剧场即可

&#x20;

## 快速检索美化定位符

| 名称          | 定位                              |
| ----------- | ------------------------------- |
| 聊天背景/聊天背景图  | #mufy\_background\_image        |
| 聊天背景/聊天背景遮罩 | #mufy\_background\_overlay      |
| 顶部栏/顶部栏容器   | #mufy\_chat\_header             |
| 顶部栏/返回按钮    | #mufy\_back\_button             |
| 顶部栏/关注按钮    | #mufy\_header\_follow\_btn      |
| 顶部栏/亮度按钮    | #mufy\_header\_clarity\_btn     |
| 顶部栏/消息按钮    | #mufy\_header\_message\_btn     |
| 顶部栏/更多按钮    | #mufy\_header\_more\_btn        |
| 输入框/输入框容器   | #mufy\_chat\_input\_container   |
| 输入框/输入框框体   | #mufy\_chat\_input\_box         |
| 输入框/重说按钮    | #mufy\_chat\_input\_replay\_btn |
| 输入框/模型按钮    | #mufy\_chat\_input\_model\_btn  |
| 作者的话        | #mufy\_author\_note             |
| 聊天操作/按钮     | #mufy\_message\_actions\_btn    |
| 聊天操作/容器     | #mufy\_message\_actions\_box    |
| 聊天操作/删除     | #mufy\_message\_actions\_delete |
| 聊天操作/修改     | #mufy\_message\_actions\_edit   |
| 聊天操作/复制     | #mufy\_message\_actions\_copy   |
| 气泡框/Ai气泡框   | .mufy\_ai\_message\_bubble      |
| 气泡框/用户气泡框   | .mufy\_user\_message\_bubble    |
| 系统设定        | .mufy\_message\_system          |
| 心理叙述        | .mufy\_message\_narration       |
| 代码块         | .mufy\_code\_block              |
| 加重句         | .mufy\_emphasis\_text           |

&#x20;&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mufy.ai/api-reference/readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.