写在前面
在确定你的变量之前，一定要结合状态栏去思考。不要到了制作状态栏的时候才想到少了几个变量，这样子又得重新走流程，非常麻烦
状态栏正则
- MVU脚本自动会在每层输出
，本身来说，这个字段没有什么作用，但是因为可以稳定地输出，我们就可以使用正则把它替换成状态栏代码。这也是我们状态栏的原理。
状态栏的创作
- 状态栏创作，我想了许多，但是始终感觉似乎没有什么好说的，你只要多多去尝试拷打AI，多血压升高几次，大概你就会明白你想要的状态栏是怎样的了，也会知道如何组织语言了——毕竟每个人都有自己的喜好。
- 关于状态栏创作，我觉得要始终保持学习的态度
- 首先肯定是要建立自己“错题库”，可能下次制作，AI还是会有相同的问题。那你就应该在某个问题解决的时候，记录下来，或者让AI告诉你，我要怎样说你才能解决刚刚的问题
- 比如我比较喜欢让ai完成状态栏之后，进行反推提示词。在这过程，也可以学习自己需要知道的一些术语，方便ai理解。
- 另外，也可以创建自己的模板，下次直接让AI按着模板来写就行了
算是一个示例吧，应该没有大佬们高级
请根据我提供的变量数据，为我编写/重构前端状态栏代码。在UI设计、DOM结构与CSS样式上，必须严格满足以下所有技术与美化要求： ### 1. 布局与响应式控制 (Layout & Responsiveness) - **图文混排与比例**：使用 `Flexbox` 或 `Grid` 布局。对于分栏布局（如左图右文），需严格设定等分比例（如 `flex: 1`），或固定某一侧宽度并设置 `flex-shrink: 0` 防止被其他元素挤压变形。 - **图片自适应**：图片容器需设定固定尺寸或最小高度，图片本身必须使用 `object-fit: contain`（或根据需求使用 `cover`），绝对禁止图片因交互或拉伸发生形变或被错误裁剪。 - **容器定高与溢出处理**：各功能面板（Panel/Card）必须设定固定高度（如 `height: xxxpx`）或最大高度。溢出内容统一使用 `overflow-y: auto` 触发滚动条。 - **滚动条美化**：必须自定义 `-webkit-scrollbar` 样式，修改轨道和滑块的颜色与圆角，使其符合整体主题，拒绝浏览器默认的粗糙滚动条。 ### 2. 色彩、背景与图形美化 (Aesthetics & Backgrounds) - **全局与局部背景**：拒绝大面积纯色留白。需利用 `linear-gradient`、`radial-gradient` 或 `repeating-linear-gradient` 为不同卡片和背景添加多层渐变、波点、暗纹等底纹图案。 - **卡片化与层级**：运用 `box-shadow` 构建层级感，使用 `border-radius` 圆角设计。不同类别的折叠框或列表请使用不同色彩体系的边框和背景进行视觉区分。 - **复杂CSS图形与动效**：如果存在属性展示图（如魔法阵、雷达图），不得仅用简单文本排版。需使用绝对定位（`position: absolute`）配合 CSS `transform`、`box-shadow`（发光粒子效果）和 `@keyframes` 动画（如缓慢旋转、呼吸灯效果）手绘复杂且富有主题感的底层图案。 - **图表展示**：对于百分比/进度类属性，优先使用 `conic-gradient` 绘制环形进度条（Ring Chart）等直观的图表组件，而非干瘪的数字。 ### 3. 排版与字体细节 (Typography & Spacing) - **间距控制**：合理使用 `margin` 和 `padding`。在信息密集区（如折叠面板内的多行数据）缩小行距（`line-height`）和下边距，使排版紧凑不松散。 - **字体栈配置 (Font Stack)**：重要标题、姓名或特殊模块（如日记、手账）需单独配置艺术字体或手写字体（如 `Caveat, Comic Sans MS, STXingkai, Kaiti` 等作为后备回退栈），提升沉浸感。 ### 4. 数据与变量展示规范 (Data Binding Rules) - **忠于原变量命名**：展示文本的标签与标题，必须直接使用原变量默认名称（如“上身着装”、“胸部”），严禁 AI 擅自造词、增加冗余的定语或将简单属性复杂化（如将“温度”擅自改为“情感丰度（温度）”）。 - **默认值兜底**：所有变量绑定必须做好判空处理，避免页面出现 `undefined`。
双端适配检查
- 把代码另存为.html后打开，按下f12后，点击左上角第二个按键（显示/隐藏设备工具栏），通过上方的条形即可预览在不同设备的显示情况
状态栏-进阶
图片如何使用
- 我们习惯把图片放在catbox，下面是介绍
catbox介绍
- Catbox.moe 是一个非常简洁且受欢迎的免费文件托管平台，常被开发者、画师和二次元社群用作图床或临时文件分享工具。
- 它的特点是无需注册、直连访问且支持多种文件格式，支持 NSFW
- 上传无上限。目前官方没有限制每个用户或每个 IP 的总上传总量。
- 要注意的是
- 它是完全由个人/用户捐赠支持的，有时会因为流量过载或服务器维护导致连接缓慢甚至无法访问。 这也是比较主要的图片不能显示的原因。
- 一般来说，如果你多次更换节点后也没有显示，那可能就是网站炸了
- 它是完全由个人/用户捐赠支持的，有时会因为流量过载或服务器维护导致连接缓慢甚至无法访问。 这也是比较主要的图片不能显示的原因。
高级美化
- 实际我们在尝试的过程中，AI输出的效果往往会让人血压升高，总是有各种各样的问题。
- 一个主要的原因大概是因为我们使用的自然语言并不能很好地表达我们的想法，ai不能很好的理解——然后灾难就开始了
- 因此我们应当考虑的是使用一些专业性更强、更有针对性的术语，起码我们要知道有这些东西，可以实现这些东西
动效
- 常见的动效有：鼠标悬停互动效果、毛玻璃效果，呼吸效果、旋转效果、闪烁（流光）效果、发光效果、渐进（淡入）效果…
来自po佬的提示词
使用丰富的美学，设计应让用户第一眼就感到惊艳。使用现代网页设计的最佳实践(例如鲜艳的色彩、深色模式、玻璃拟态和动态动画)来创造令人惊叹的第一印象。如果做不到这一点，是不可接受的。优先考虑视觉卓越性；实施能让用户发出“WOW”惊叹并感觉极其高端的设计。避免使用通用颜色(纯红、蓝、绿)。使用精心挑选、和谐的调色板(例如HSL定制颜色、时尚的深色模式)。
字体
- 可以使用zeoseven来获取一些字体的css代码
在“嵌入字体”界面可进行复制下面的内容
@import url("https://fontsapi.zeoseven.com/292/main/result.css"); body { font-family: "LXGW WenKai"; font-weight: normal; }
色彩
- 在前端中使用HSL颜色而不是RGB颜色
- 一般来说HSL与CSS语法配合更好，并且它在调整颜色的时候非常有优势，尤其是需要渐变、深色、hover变色的时候
图像
- 可以让ai绘制SVG，可以适配底色，相对比较灵活
- 可以使用图片来制作背景
- 立绘控制方法
参考资料
以下是可以参考与学习的资源