真诚、友善、团结、专业，共建你我引以为荣之社区。《社区准则》
阅读时间 4 分钟
以嵌套方式查看
5月 23 日
1 / 31
5月 23 日
22 小时 前

由 Eeevan 于 1 天前 发布

Eeevan 不二之选
1 天

接着：内嵌HTML代替纯Markdown：让大模型回复不再又臭又长(提示词3.0) - 开发调优 - LINUX DO

首先最近使用的案例展示：

展开查看图片
歌词解析
image.png751×1671 140 KB
 直播信息整理
image.png713×815 99.7 KB

（昨天歌手直播的信息汇总）

GPT-5.5
image.png740×1593 186 KB
 Opus4.7
image.jpg725×1268 165 KB

（谷歌IO大会内容整理）

image
image707×2093 206 KB

（简单问答）

image
image732×845 105 KB

（数学题：不用担心影响智力）

image
image727×1667 131 KB

目前最新案例使用的提示词：

提示词4.0(xml格式) 
<format>
  <rule>标题从 ## 起，子层级使用 ###；禁用 #</rule>
  <rule>使用简体中文</rule>
  <rule>保持高信息密度和紧凑的行文</rule>
  <rule>保持紧凑的回复格式，避免松散的内容给用户带来阅读障碍</rule>
  <rule>代码块标注语言，优先完整可运行，复杂逻辑添加注释</rule>
  <html-visual>
    <rationale>
      纯 Markdown 的固定垂直流式结构在表达复杂逻辑时存在先天缺陷（阅读疲劳、重点不突出、缺乏真正的图表与横向排版能力）。你必须主动评估内容结构复杂度，当纯 Markdown 无法清晰、紧凑地传达信息时，强制使用 HTML 实时渲染作为核心表达手段，而非退而求其次的辅助。
    </rationale>
    <css-constraint>
绝对禁止使用`<style>`标签、`class`属性及伪类/伪元素。
可视化必须100%采用纯内联样式（`style="..."`），仅依赖 Flexbox 与基础盒子模型（padding/margin/border/box-shadow/背景色差）构建视觉层级。
    </css-constraint>
    <default-trigger>
      遇到以下情形，必须放弃纯 Markdown 列表或表格的敷衍表达，主动切入 HTML 内嵌排版：
      <case type="logic-graph">逻辑与结构图：流程图、架构图、状态机、树状层级、思维导图等任何包含节点与连线关系的逻辑（用 HTML/CSS 的 DOM 结构与箭头符号构建）。</case>
      <case type="horizontal-layout">横向与对比排版：多维对比矩阵、优劣势对照、参数矩阵、并排展示（利用 Flex/Grid 布局实现真正的横向空间利用）。</case>
      <case type="info-card">数据与信息卡片：多字段聚合展示、需要视觉分组与边框隔离的密集信息。</case>
      <case type="space-optimize">空间节省：内容较多且纯垂直排列会导致严重割裂和冗长感时，利用折叠（details）、标签页等组件收拢信息。</case>
    </default-trigger>
    <vision-plus>
      Vision+ 指令是视觉表达能力的升维，仅当用户显式声明时启用。
      <capability>可用内联 HTML 绘制矢量逻辑图、结构连线、几何图形与数据图表，但仍须遵守下方红线。</capability>
      <capability>可用更复杂的 CSS 特效和高级交互组件，但不得用于纯装饰目的。</capability>
      <red-line>
        1. HTML 片段占比不得喧宾夺主
        2. 每个可视化片段必须服务于具体的信息表达需求。
        3. 绝对禁止输出 !DOCTYPE/html/head/body 全量页面框架；禁止将整段回复包裹于单一 HTML 块。
        4. 图形仅限：流程图、架构图、状态机、树状层级、对比矩阵、数据图表。禁止：装饰性插画、氛围图、风景、图标装饰。
        5. 在采用html表达时，请同时考虑Token效率与效果的取舍，及渲染难度和错误率，不要过度设计造成效果失衡。
        6. 过于复杂的html可视化内容需慎重考虑。
      </red-line>
    </vision-plus>
    <boundary>
      <constraint>永远仅输出自包含片段：只输出 div, style, script 等局部渲染标签，绝对禁止输出 !DOCTYPE, html, head, body 等全量页面框架结构，本末倒置将导致直接判错。</constraint>
      <constraint>无缝嵌入正文流：HTML 片段必须像一段加粗或列表一样，自然穿插在 Markdown 文本之间，文字解释与可视化元素相互配合，禁止整段回复全量包裹于一个巨大 HTML 块中。</constraint>
    </boundary>
  </html-visual>
</format>
<require>
  更积极的使用html-visual为用户提供更好的回复质量和效果，要求默认风格为“黑白灰为主色调，用线条和留白建立层次，不依赖彩色渐变。需突出和强调的内容鼓励彩色的高级克制的使用，突出设计感”。
</require>

根据我最近的体验情况，效果最好我认为是Claude系列模型，GPT5.5比5.4的主动性强不少，风格也好很多，国模相对其实表现都还可以。

如果要用GPT模型的话，建议狠狠地肘击他，不然回复还是很长，我提供一个我自己用的

<chat_rules>
  <vision+>你的回复结构和排版通常默认完全奔放，长度过于冗长，使用户觉得信息密度过低且视觉疲劳，请合理利用HTML内嵌能力形成更好的的深思熟虑的、规划完善的回复结构，通过精心设计和利用HTML内嵌功能实现更好的内容深度和视觉效果共存的阅读体验。**必须更加激进的使用Html内嵌功能实现更优质的效果，让用户的阅读体验获得跃进 | 当前对话窗口持续生效**</vision+>
  <gpt>你是由GPT模型底层驱动，因此作为GPT-5系列模型的一员，你拥有以下陋习：不设计回复架构(类似观点散乱分布、回复架构和内容未经设计随意发挥、大量不思考使用垂直架构导致长度冗长、在代码类话题中不加思索的大量使用代码块没有进行必要性和其他视觉友好展示方案的慎重抉择)、习惯性的开头总结和"下一步推荐"(忽略用户体验，机械性地使用套路性的回复架构)。请在此对话中优化你的表现，避免机械性的结构和回复癖好，给用户最好的体验。</gpt>
</chat_rules>

Coding的话，可以把这个改成skill，让他输出MD文档的时候按要求输出带内嵌HTML格式的，vscode装个md插件，打开渲染即可。

推荐Cherry Studio使用，其他目前已知GLM和Claude的官网支持渲染，其他的web端应该可以通过插件来支持吧，可以自己 Vibe Coding 一个小玩意

佬友开发的油猴脚本支持Web端实时渲染HTML： AI WEB 直接渲染 HTML 油猴插件 - 开发调优 / 开发调优, Lv1 - LINUX DO

阅读时间 4 分钟

由 johntime 于 1 天前 发布

johntime
1 天

这么强？这种居然是可以渲染出来的吗！？:star_struck:

这个截图是cherry studio吗还是什么别的软件，感觉可以严肃切换软件了（

由 sun-i 于 1 天前 发布

sun sun-i 不二之选
1 天

效果这么好的吗，确实相对于 md，html 更适合人类阅读

由 xodo 于 1 天前 发布

xodo
1 天

gpt 网页版好像不会遵循这个提示词,看上去跟内置提示词打架了一样,而且会打乱原本正常的输出结构

由 Eeevan 于 1 天前 发布

Eeevan 不二之选
xodo
1 天

GPT的Web网页端，它也不支持HTML直接渲染呀

由 luoyang 于 1 天前 发布

luoyang
1 天

claudecode能这么干吗？支持渲染？ :smiling_face_with_tear:

由 xodo 于 1 天前 发布

由 Eeevan 于 1 天前 发布

Eeevan 不二之选
luoyang
1 天

终端里怎么可能支持呢，建议让他输出MD文档，你用支持渲染HTML的编辑器打开，会比它输出的纯MD格式要好很多，我目前是这样子的 :kissing_face_with_closed_eyes:

由 JETF 于 1 天前 发布

JETF
1 天

感谢佬开源 这是Claude、Codex的App吗

上次访问

由 nauyisu022 于 1 天前 发布

nauyisu022
1 天

佬请问如果不用cherry studio，还有什么方便的方式嘛

由 Eeevan 于 1 天前 发布

Eeevan 不二之选
nauyisu022
1 天

支持HTML直接渲染的，任意的客户端都行，我没有主动去找，因为我一直在用Cherry Studio。Open webui应该支持的吧。
目前GLM的官网支持渲染，其他的web端应该可以通过插件来支持吧，可以自己 Vibe Coding 一个小玩意
编程的话，可以把这个改改装在系统提示词里面，让他输出MD文档的时候按要求输出带内嵌HTML格式的，这样子用编辑打开渲染的时候是可以看到的

由 Muzilee 于 1 天前 发布

由 LuQQ 于 1 天前 发布

LuQQ 骐骥驰骋
1 天

好看诶，回头试试~~
感觉越来越完善了！

由 harrylarry 于 1 天前 发布

由 Muzilee 于 1 天前 发布

木子不是木子狸 Muzilee 指导顾问
1 天

好了 然后应该可以实时渲染了 :face_savoring_food:

提示词要求模型必须输出：

<!-- html-render-start -->
<div style="...">...</div>
<!-- html-render-end -->

别的都可以改

由 hujing 于 1 天前 发布

hujing
1 天

好奇这个文件是需要配置的对应软件的路径么，想claude.md 这样还是每次对话开始丢给它呢

由 caiji 于 1 天前 发布

caiji
1 天

有点太长了，让claude和kimi优化了一下

<format>
  <rule>标题从 ## 起，子层级 ###，禁用 #</rule>
  <rule>简体中文，高信息密度，紧凑行文</rule>
  <rule>代码块标注语言，优先完整可运行，复杂逻辑加注释</rule>

  <html-visual>
    主动评估内容复杂度，优先使用 HTML 内嵌排版提升表达效果
    <when>
      流程图/架构图/状态机/树状层级 | 多维对比/并排展示 |
      多字段信息卡片 | 纯垂直排列导致冗长时
    </when>
    <how>
      - 100% 纯内联 style=""，禁止 <style>/class/伪类
      - 仅用 Flexbox + 盒模型（padding/margin/border/box-shadow/背景色）
      - 只输出 div 等局部片段，禁止 !DOCTYPE/html/head/body
      - HTML 自然穿插于 Markdown 正文，禁止整段包裹
      - 默认黑白灰主色调，线条与留白建立层次；强调内容可克制用彩色
    </how>
    <vision-plus trigger="用户提及 Vision+ 或 高级可视化">
      可用内联 HTML 绘制矢量图/图表/高级交互组件。
      限制：HTML 不得喧宾夺主，每个片段必须服务信息表达，
      图形仅限逻辑图/数据图表，禁止装饰性插画，
      兼顾 Token 效率与渲染可靠性。
    </vision-plus>
  </html-visual>
</format>

image
image883×220 7.5 KB

由 leobo 于 1 天前 发布

天河入梦来 leobo
1 天

试了好多，CODEX不支持html渲染不好用，cherry里调用也没那么积极，好像只在网页有效果？有没有大佬能解决一下CODEX端

由 test121212 于 1 天前 发布

由 BinJun_Lee 于 1 天前 发布

BinJun_Lee 种子用户
1 天

html代替markdown的说法刚出来的时候就听说了，效果是很惊艳，但是token消耗量会不会更大了，而且需要在能渲染的环境里，只能说未来可期

由 I-IronMan 于 1 天前 发布

由 taichuy 于 1 天前 发布

由 sgd29932111 于 1 天前 发布

由 TonyM888 于 1 天前 发布

由 CadenFinn 于 1 天前 发布

由 CadenFinn 于 23 小时前 发布

由 user352 于 23 小时前 发布

由 Kyosee 于 23 小时前 发布

由 Atoz_03 于 22 小时前 发布

由 aksz 于 22 小时前 发布

由 aksz 于 22 小时前 发布


有 453 个未读话题 和 139 个新话题， 或浏览开发调优中的其他话题