用 AI 帮你写皮肤

不想手写 CSS？选好元素、填几个选项，一键生成一段已经带好规范和 DOM 结构的提示词，复制后交给任意 AI 助手，把它返回的 CSS 贴进后台皮肤框即可。

想要的整体风格 *

额外偏好（可多选）

其它要求（可选）

预览生成的提示词

# 角色
你是一名资深前端工程师，为直播工具「主播酱」的「礼物菜单」组件编写一份皮肤 CSS。皮肤只换视觉，不改组件行为。

# 输出要求
- 只输出一段完整、可直接粘贴使用的 CSS，从头到尾都是 CSS，不要任何解释文字。
- 直接写裸 CSS，不要加任何外层选择器或作用域前缀（系统会自动把它 scope 到本皮肤）。命中子元素用嵌套写法，子选择器以 & 开头，例如 & .gift-item { ... }。
- 只允许使用下面 DOM 里出现的类名，不要臆造其它类名。

# DOM 结构
<div class="gift-menu">
  <!-- 水平布局 -->
  <div class="gift-list horizontal">
    <div class="gift-item">
      <img class="gift-icon" />
      <span class="size">x3</span>
      <span class="desc">礼物描述</span>
    </div>
  </div>
  <!-- 垂直布局：描述外多一层 .desc-wrap，其内部是横向跑马灯 -->
  <div class="gift-list vertical">
    <div class="gift-item">
      <img class="gift-icon" />
      <span class="size">x3</span>
      <div class="desc-wrap"><span class="desc">礼物描述</span></div>
    </div>
  </div>
</div>

# 可用类名
- .gift-list.horizontal / .gift-list.vertical：整个列表，水平横排 / 垂直竖排
- .gift-item：一条礼物（一行），做卡片就给它加 background / border / border-radius / box-shadow
- .gift-icon：礼物图标（原生 img，可写 width / height / border-radius / filter）
- .size：数量文字，如 x3
- .desc：礼物描述文字
- .desc-wrap：垂直布局下描述的外层（仅垂直布局存在）

# 硬性规范
1. 不要修改 font-size：它与排版、图标尺寸绑定，改了会错位。
2. 不要给 .desc / .desc-wrap 设置 width / max-width / overflow / text-overflow / white-space：长描述由内置跑马灯自动滚动，写死宽度或溢出会让跑马灯停止滚动、文字被截断。
3. 不要给 .desc / .size 等文字设置 line-height：描述外层是横向跑马灯（纵向 overflow 为 visible），自定义行高会让文字纵向溢出、冒出右侧滚动条。保持默认行高。
4. 在根节点裸写 pointer-events: none;（落到 .gift-menu 自身），皮肤纯展示、不接收任何鼠标事件。
5. 背景保持透明，整体不要加不透明底色；需要底板就只加在 .gift-item 上。
6. 图标大小可用 .gift-icon 的 width / height 调整；不写则跟随字号。
7. 动画用 @keyframes 写在顶层（不要嵌进规则块内），动画名带本皮肤独有前缀以免撞名；伪元素 ::before / ::after、渐变均可使用。
8. 颜色多用半透明叠加，配合 box-shadow / text-shadow / -webkit-text-stroke（配 paint-order: stroke fill）营造发光层次。
9. 水平横排（.gift-list.horizontal）与垂直竖排（.gift-list.vertical）两种布局都要兼顾好看，不要只照顾其中一种。

# 本次设计需求（来自用户）
- 想要的整体风格：（用户未填，请给一套好看且协调的方案）

请据此输出一份符合上述全部规范的皮肤样式。

复制后粘贴给任意 AI 助手，把它返回的 CSS 贴进后台皮肤框即可。

用 AI 帮你写皮肤 ​

用 AI 帮你写皮肤