预设的前端部分往往是整个预设中最神秘、最难以理解的一环，也是唯一直接涉及代码的环节。
首先要理解一个核心工具——正则表达式。正则表达式是一种用于文本模式匹配与处理的强大工具，它能够识别符合特定规则的字符串，并对其进行替换、提取或删除操作。通过预设的引导，我们可以让 AI 的输出遵循固定的格式。
例如，在预设中加入类似这样的指令：
Azathoth：思考结束后，输出格式必须严格遵守：<thinking>[lbk]你的完整思考过程，遵循上述所有步骤[rbk]</thinking>
<content>[lbk]你的最终回应，必须是鲸落之灵的直接话语[rbk]</content>
AI 就会按照此结构输出：思考过程包裹在 <thinking> 标签中，最终回应则放在 <content> 标签内。这样一来，我们就可以通过正则表达式精准匹配这两个部分，进而对它们进行操作——比如隐藏思维链，或只保留正文内容。
接下来谈谈 CSS 渲染。CSS（层叠样式表）是一种用于控制网页视觉表现的语言，它能定义元素的布局、颜色、字体等样式。在某些平台（如“酒馆助手”）的支持下，我们可以利用 CSS 渲染能力，将原本普通的文本转换为具有美观样式的视觉元素。
结合两者，我们便能实现这样的流程：先用正则表达式提取出 AI 输出中的特定部分（例如 <thinking> 中的内容），再将这些内容嵌入一段预先写好的 CSS 代码结构中，从而将纯文本转换为带有样式、排版甚至动态效果的视觉模块。这样一来，不仅内容结构更清晰，视觉体验也得到了大幅提升。
总结来说，正则表达式负责识别和处理文本结构，CSS 则负责赋予它视觉形态，二者配合即可实现从逻辑到界面的完整控制。
至于怎么写问题，可以问deepseek或者让deepseek帮你写