• 作者: 作者
  • 时间:
  • 分类: 文章

你有没有这种感觉？当你向 AI 提问一个稍微复杂点的问题，指望能得到一幅清晰、直观的答案时，它回给你的往往是一大坨密密麻麻的文字，或者是那种丑到爆的 Markdown 表格。

看着屏幕上那垂直滚动的“文字流”，眼睛都花了，逻辑还得自己在脑子里慢慢重组。这哪是“助手”，简直是“阅读理解障碍制造机”。

其实，很多时候不是模型不够聪明，而是它不知道怎么“展示”聪明。今天给大家分享一个我一直在用的“黑科技”提示词，专门用来调教 AI，让它放弃纯 Markdown 的枯燥表达，改用 HTML+CSS 渲染出高级的排版效果。

效果真的，谁用谁知道。

为什么要“强推”AI 用 HTML？

Markdown 虽然通用，但在处理复杂逻辑时有着天然的短板：

Markdown 局限性示意图

Markdown 的垂直流式布局难以处理复杂的逻辑对比和排版需求。

  1. 布局受限：它只能垂直排列。想要把两个概念并排对比？想要用箭头画出流程图？Markdown 只能干瞪眼，最后还是得靠文字描述“左边是...右边是...”。
  2. 视觉层级差：重点不突出，全是白底黑字，密密麻麻排下来，用户很难一眼抓到核心信息。
  3. 信息密度低：同样的内容，用纯文字讲要写一大段，用可视化的卡片展示可能一目了然。

所以，我们要做的，就是给 AI 下达“强制指令”：当你发现 Markdown 搞不定时，立刻切换到 HTML 模式。

这套 Prompt 的核心逻辑

这套提示词的核心在于定义了明确的“触发条件”和“审美红线”。简单来说，就是告诉 AI：什么时候该用图，以及该怎么画图。

1. 强制触发机制（什么时候用 HTML）

我们在提示词里设定了几个硬性指标，一旦命中，AI 就必须放弃纯文本：

  • 逻辑与结构图：只要是流程图、架构图、思维导图这种包含节点和连线的内容，别画 ASCII 字符图了，直接用 HTML 的 div 加边框画出来。
  • 横向与对比排版：需要对比 A 方案和 B 方案的优劣？别用列表了，用 Flex 布局让它们并排展示，这才是人类阅读的习惯。
  • 信息卡片：如果内容很多很杂，比如介绍一个 API 的参数，把它塞进带边框的卡片里，视觉上更清晰。
  • 空间节省：遇到巨长的解释，用 <details> 折叠标签收起来，保持界面的清爽。

React 与 Vue 对比卡片效果

使用 HTML 排版后的 React 与 Vue 对比，一目了然。

2. 也就是最重要的：审美约束

很多朋友也试过让 AI 写 HTML，结果它给你整了一套红红绿绿的“赛博朋克”风，或者写了几百行 style 标签导致编辑器崩溃。

所以在 Prompt 里，必须加上严格的“紧箍咒”：

AI 生成 HTML 代码

通过特定的提示词，AI 能够生成带有审美约束的 HTML 代码片段。

  • 禁用 class 和 <style>：全部样式只能写在 style="..." 属性里（内联样式）。这能保证代码片段的纯净，不污染全局环境。
  • 色彩克制：默认黑白灰主色调，只用颜色做强调。强迫 AI 像 Apple 官网或者高级设计文档那样，用“留白”和“线条”建立层次，而不是用花哨的背景。
  • 禁止画大饼：绝对禁止输出 <!DOCTYPE html> 这种完整的网页框架。只输出能嵌入到文章里的一个个片段。

实战效果对比

举个简单的例子，如果你问：“请对比 React 和 Vue 的差异。”

普通 AI 的回复：

React vs Vue

  1. React 使用 JSX，Vue 使用模板。
  2. React 学习曲线较陡，Vue 较平缓。
  3. ... (此处省略 500 字)

用了这套 Prompt 后的回复：

AI 会直接生成两个并排的卡片（HTML 渲染），左边写 React 的核心特点，右边写 Vue 的，甚至用颜色高亮了“JSX”与“Template”的关键差异。你不需要读文字，扫一眼就懂了。

完整提示词代码（Copy 走！）

你可以直接把下面这段话塞给你的 AI（放在 System Prompt 或者开头都行）。

<<format>>
<<rule>>标题从 ## 起，子层级使用 ###；禁用 #<</rule>>
<<rule>>保持高信息密度和紧凑的行文<</rule>>
<<rule>>遇到复杂表达时，强制使用 HTML 实时渲染<</rule>>

<<html-visual>>
<<rationale>>
纯 Markdown 的固定垂直流式结构在表达复杂逻辑时存在先天缺陷。当纯 Markdown 无法清晰、紧凑地传达信息时，强制使用 HTML 实时渲染。
<</rationale>>

<<css-constraint>>
绝对禁止使用 `<style>` 标签、`class` 属性及伪类。
可视化必须 100% 采用纯内联样式 (style="..."），仅依赖 Flexbox 与基础盒子模型构建视觉层级。
<</css-constraint>>

![支持 HTML 渲染的聊天界面](/media-load/019f0802-f060-752c-9e86-8006c9d8b7c4)

*在支持 HTML 渲染的客户端（如 Claude 等）中查看最终效果。*

<<default-trigger>>
遇到以下情形，必须放弃纯 Markdown 列表，使用 HTML 内嵌排版：
- 逻辑图（流程图、架构图、思维导图）：用 HTML DOM 结构与边框绘制。
- 横向排版（多维对比、并列展示）：利用 Flexbox 实现横向布局。
- 信息卡片：密集信息用边框和背景色差隔离。
- 空间节省：内容过长时利用 details/summary 折叠。
<</default-trigger>>

<<color-style>>
默认风格为“黑白灰等克制色为主色调，用线条和留白建立层次，不过度依赖彩色”。
仅对需强调的内容使用高级彩色点缀。
<</color-style>>

<<boundary>>
永远仅输出自包含片段（如 div/span），禁止输出 !DOCTYPE/html/head/body 全量页面框架。
HTML 片段需像普通文本一样自然穿插在 Markdown 之间。<</boundary>>
<</html-visual>>
<</format>>

哪种模型最听话？

经过实测，不同模型对这套 Prompt 的“悟性”差别还挺大：

  • 👍 强烈推荐：Claude (Sonnet/Opus)。Claude 本身在代码和设计感上就比 GPT 敏锐，它的官网交互就支持 HTML 渲染，所以它对这种指令的遵循度极高，能画出非常优雅的线条和布局。
  • 👍 备选方案：GLM-4 系列。在中文语境和结构化输出上表现不错，理解力在线。
  • 👎 避雷：GPT-4。这可能会让人意外，但 GPT 系列对 CSS 的审美比较“复古”，经常给你写出那种 90 年代风格的大色块表格，而且有时候会忍不住偷懒跑回 Markdown 模式。不建议用来搞这种精细化的视觉输出。

怎么看效果?

如果你用的是 Chat 网页端：很多 AI 聊天客户端（如 Cherry Studio、Obsidian 插件、或者其他第三方前端）本身就支持 HTML 渲染。只要模型输出了 <div ...>，如果你的客户端支持，你就能直接看到排版好的效果，而不是代码。

如果你在写文档或代码：当你让 AI 帮你生成 README 或者技术文档时，把这份 HTML 导入到静态页面生成器里，视觉效果绝对是肉眼可见的升维。

总结

别再忍受 AI 毫无美感的“文字轰炸”了。通过一点点提示词技巧，强迫它动用 HTML 的能力，你会发现，AI 的回复不仅智商在线，情商（审美）也能高出一个档次。

快拿去试试，把你的 AI 打造成一个自带 UI 设计能力的高级助手吧！

标签: none

评论已关闭