写卡攻略本AI玩家 · 创作者
技术手册

技术手册

美化实例

四个可以预览和复制的正则、CSS 与 JavaScript 美化实例。

AI 助手可以代写

这四个效果都可以跟 AI 创作助手直接说。想自己复制、或者对照检查助手写的代码，就看这一页。

先切换“原始效果”和“美化效果”查看差异，再复制对应代码。四个实例从简单到进阶排列。

想实现的效果使用技术建议
一张固定状态卡正则、CSS第一次制作从这里开始
可展开的多字段面板正则、CSS、原生 HTML不需要 JavaScript
统一聊天外观CSS不修改消息内容
根据消息切换雨夜氛围正则、CSS、JavaScript Hook需要理解生命周期清理

状态卡片 ​

把角色回复中的固定状态标签转换成一张清晰卡片。

预览是固定的演示页，只用来看效果；复制到角色卡后，还要在创作页预览、网页和 App 里分别检查。

让角色输出固定标签 ​

在角色设定中约定，每次需要展示状态时输出：

text
<status>地点：玻璃温室｜天气：雨</status>

标签内部只放简短纯文本。不要让模型每次输出完整 HTML。

新增正则 ​

应用于“AI 消息”，启用规则。

查找：

text
<status>([\s\S]*?)</status>

flags：

text
g

替换：

html
<aside class="status-card">
  <span class="status-card__label">当前状态</span>
  <strong>$1</strong>
</aside>

添加全局 CSS ​

css
.status-card {
  display: grid;
  gap: 0.3rem;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0.75rem 0;
  padding: 0.8rem 0.95rem;
  border: 1px solid #b96f9b;
  border-radius: 0.875rem;
  background: #fff4fa;
  color: #5f304d;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.status-card__label {
  color: #89536f;
  font-size: 0.75rem;
  font-weight: 700;
}

.status-card strong {
  font-size: 0.95rem;
}

@media (prefers-color-scheme: dark) {
  .status-card {
    border-color: #b7779e;
    background: #3b2934;
    color: #f5dce9;
  }

  .status-card__label {
    color: #d9a2c2;
  }
}

检查结果 ​

  • 正则测试输出包含 <aside class="status-card">。
  • $1 显示完整地点和天气。
  • 没有状态标签的普通回复保持不变。
  • 长文字可以换行，卡片不超过消息宽度。
  • Creator、Web、App 的完整回复分别检查。

可折叠信息面板 ​

这个实例把情绪和目标放进一个原生 <details> 面板。点击标题即可展开或收起，不需要全局 JavaScript。

预览是固定的演示页，只用来看效果；复制到角色卡后，还要在创作页预览、网页和 App 里分别检查。

让角色输出两个字段 ​

text
<panel><mood>警觉</mood><goal>找到出口</goal></panel>

新增正则 ​

应用于“AI 消息”。

查找：

text
<panel>\s*<mood>([\s\S]*?)</mood>\s*<goal>([\s\S]*?)</goal>\s*</panel>

flags：

text
g

替换：

html
<details class="intel-panel">
  <summary>行动信息</summary>
  <dl>
    <div><dt>情绪</dt><dd>$1</dd></div>
    <div><dt>目标</dt><dd>$2</dd></div>
  </dl>
</details>

$1 对应情绪，$2 对应目标。字段顺序变化时，这条正则不会继续匹配，所以角色输出约定也要保持顺序。

添加全局 CSS ​

css
.intel-panel {
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #c8a8ba;
  border-radius: 0.875rem;
  background: #fbf4f8;
  color: #4e3042;
}

.intel-panel summary {
  position: relative;
  padding: 0.8rem 2.7rem 0.8rem 0.95rem;
  color: #643f56;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.intel-panel summary::-webkit-details-marker {
  display: none;
}

.intel-panel summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 0.95rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #ead6e2;
  color: #73475f;
  text-align: center;
  line-height: 1.4rem;
  transform: translateY(-50%);
}

.intel-panel[open] summary::after {
  content: "−";
}

.intel-panel dl {
  display: grid;
  margin: 0;
  padding: 0 0.95rem 0.85rem;
}

.intel-panel dl div {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0.55rem 0;
  border-top: 1px solid #eadce4;
}

.intel-panel dt,
.intel-panel dd {
  margin: 0;
}

.intel-panel dt {
  color: #865b73;
  font-size: 0.8rem;
}

.intel-panel dd {
  color: #3e2935;
  overflow-wrap: anywhere;
}

@media (prefers-color-scheme: dark) {
  .intel-panel {
    border-color: #76576a;
    background: #392b34;
    color: #f1dce8;
  }

  .intel-panel summary,
  .intel-panel dd {
    color: #f1dce8;
  }

  .intel-panel summary::after {
    background: #553d4b;
    color: #efcfe1;
  }

  .intel-panel dl div {
    border-color: #5a4350;
  }

  .intel-panel dt {
    color: #cf9fb9;
  }
}

检查结果 ​

  • 正则测试输出同时包含“警觉”和“找到出口”。
  • 点击“行动信息”可以展开和收起。
  • 使用 Tab 键可以聚焦标题，按 Enter 或空格可以切换。
  • 长目标文字不会把面板撑出消息区域。
  • 没有添加全局 JavaScript。

聊天主题美化 ​

这个实例只修改聊天背景、双方消息、导航和输入区，不改变消息内容。

预览是固定的演示页，只用来看效果；复制到角色卡后，还要在创作页预览、网页和 App 里分别检查。

添加全局 CSS ​

css
.charx-chat-bg {
  --charx-color-primary: #a85c8d;
  --charx-color-bg: #f7f2f6;
  --charx-color-bg-bubble-user: #9d5b82;
  --charx-color-bg-bubble-char: #fff9fc;
  --charx-color-text: #3e2d37;
  --charx-color-text-muted: #7f6675;
  --charx-color-border: #dccbd5;
  --charx-bubble-radius: 0.875rem;
  background:
    radial-gradient(circle at 86% 12%, rgb(168 92 141 / 12%), transparent 32%),
    var(--charx-color-bg);
  color: var(--charx-color-text);
}

[data-charx-slot="nav"],
.charx-input-bar {
  border-color: var(--charx-color-border);
  background: rgb(255 249 252 / 86%);
}

[data-charx-slot="message-surface"] {
  border: 1px solid var(--charx-color-border);
  border-radius: var(--charx-bubble-radius);
  color: var(--charx-color-text);
  box-shadow: 0 0.55rem 1.5rem rgb(87 52 73 / 8%);
}

.charx-message-surface--assistant {
  border-top-left-radius: 0.3rem;
  background: var(--charx-color-bg-bubble-char);
}

.charx-message-surface--user {
  border-color: #9d5b82;
  border-top-right-radius: 0.3rem;
  background: var(--charx-color-bg-bubble-user);
  color: #fff9fc;
}

.message-body {
  line-height: 1.7;
}

.charx-input-box,
[data-charx-slot="input-box"] {
  border: 1px solid #d5bdcb;
  border-radius: 0.65rem;
  background: #fffdfd;
  color: #4a3542;
}

@media (prefers-color-scheme: dark) {
  .charx-chat-bg {
    --charx-color-bg: #272127;
    --charx-color-bg-bubble-char: #342a31;
    --charx-color-text: #f2e7ed;
    --charx-color-text-muted: #c3aebb;
    --charx-color-border: #5f4957;
    background:
      radial-gradient(circle at 86% 12%, rgb(210 139 181 / 13%), transparent 32%),
      var(--charx-color-bg);
  }

  [data-charx-slot="nav"],
  .charx-input-bar {
    background: rgb(43 35 41 / 88%);
  }

  .charx-input-box,
  [data-charx-slot="input-box"] {
    border-color: var(--charx-color-border);
    background: #342c32;
    color: #f2e7ed;
  }
}

@media (max-width: 480px) {
  [data-charx-slot="messages"] {
    padding-inline: 0.75rem;
  }

  [data-charx-slot="message-surface"] {
    max-width: 90%;
  }
}

检查结果 ​

  • 角色和用户消息仍然容易区分。
  • 浅色和深色主题中的正文对比清楚。
  • 长消息、代码块和图片没有被强制裁切。
  • 390px 宽度下没有横向页面滚动。
  • App 使用原生输入栏时，输入区外观已单独检查。

场景氛围动效 ​

这个实例根据消息中的隐藏场景标记切换雨夜氛围。正则负责把标记变成隐藏 HTML，CSS 负责画面，JavaScript Hook 只负责切换状态。

预览是固定的演示页，只用来看效果；复制到角色卡后，还要在创作页预览、网页和 App 里分别检查。

预览中的“切换场景”按钮只用于展示效果。复制到角色卡的脚本会在收到角色消息时自动切换。

让角色输出场景标记 ​

text
[场景:雨夜]

没有雨时输出：

text
[场景:平静]

用正则隐藏标记 ​

查找：

text
\[场景:(雨夜|平静)\]

flags：

text
g

替换：

html
<span class="scene-marker" data-scene="$1" hidden></span>

添加全局 CSS ​

css
.charx-chat-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 280ms ease, color 280ms ease;
}

.charx-chat-bg::before {
  content: "";
  position: absolute;
  inset: -28% -12%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(
    106deg,
    transparent 0 17px,
    rgb(125 153 188 / 34%) 18px,
    transparent 19px 36px
  );
  transform: translate3d(0, -8%, 0);
  transition: opacity 280ms ease;
}

.charx-chat-bg > * {
  position: relative;
  z-index: 1;
}

.charx-chat-bg[data-scene="rain"] {
  background-color: #cfd7e2;
  color: #202b3a;
}

.charx-chat-bg[data-scene="rain"]::before {
  opacity: 0.74;
}

@media (prefers-reduced-motion: no-preference) {
  .charx-chat-bg[data-scene="rain"]::before {
    animation: charx-rain-drift 1.7s linear infinite;
  }

  @keyframes charx-rain-drift {
    from {
      transform: translate3d(0, -8%, 0);
    }
    to {
      transform: translate3d(-3%, 12%, 0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .charx-chat-bg,
  .charx-chat-bg::before {
    animation: none;
    transition: none;
  }

  .charx-chat-bg::before {
    transform: none;
  }
}

@media (prefers-color-scheme: dark) {
  .charx-chat-bg[data-scene="rain"] {
    background-color: #1c2b3a;
    color: #f1f5fa;
  }
}

添加全局 JavaScript ​

Creator 预览和正式聊天传给 Hook 的内容处理时机可能不同。下面的脚本同时识别原始场景标记和正则替换后的 HTML，避免只在一个环境中生效。

js
{
  const setScene = function (content = '') {
    const root = document.querySelector('.charx-chat-bg')
    if (!root) return

    const isRain = content.includes('[场景:雨夜]')
      || content.includes('data-scene="雨夜"')
    root.setAttribute('data-scene', isRain ? 'rain' : 'calm')
  }

  const stopReady = $charx.hooks.on('onReady', function () {
    setScene('')
  })

  const stopMessage = $charx.hooks.on('onMessageReceived', function (message) {
    setScene(String(message?.content ?? ''))
  })

  $charx.hooks.once('onDestroy', function cleanup() {
    stopReady()
    stopMessage()
    document.querySelector('.charx-chat-bg')?.removeAttribute('data-scene')
  })
}

检查结果 ​

  • 正则替换后，场景标记不再显示成正文。
  • 原始标记和替换后的 HTML 都可以触发雨夜状态。
  • 收到带“雨夜”标记的完整角色消息后，背景出现雨线。
  • 下一条“平静”消息会移除雨夜状态。
  • 系统开启减少动画后，雨线保持静止。
  • 切换会话和退出聊天后，没有遗留监听器或页面属性。

分别检查三个环境

文档预览只展示固定演示代码。复制到角色卡后，仍需在 Creator 预览、正式 Web 和 App 中分别检查消息事件、DOM 选择器和动画性能。

还想让 AI 帮你修改 ​

把最接近的实例和自己的角色主题一起交给 AI 生成美化指令。要求 AI 保留现有类名和平台安全限制，只调整颜色、文案和字段。