dsh 渲染外掛全圖解:讓 AI 的回答從純文字變成圖表、動畫和新聞排版

dsh-raw-html 第三彈實測:8 張截圖走完「裝外掛 → 換主題 → 第一張渲染卡 → 圖表 → 動畫 → 風格系統 → 新聞卡 → 提問實戰」全程,每張圖都能跳回來源影片。

最近更新: 2026-09-25

DeepSeek Harness 聊天裡渲染出柱狀圖資料卡,旁邊 VCP 渲染設定浮層中渲染 HTML 與美學注入均已開啟 — VCP 渲染設定浮層:渲染 HTML、美學注入雙開關全開——回答從此能被看見

預設的 DeepSeek Harness 會話是「能被讀到」的:回答是純文字,過程埋在工具軌跡裡,想看個資料還得自己腦補表格。裝上 dsh-raw-html 渲染外掛之後,回答變成「能看到」的:HTML 卡片、圖表資料卡、canvas 動畫、新聞晚報排版,直接長在聊天流裡。

本頁 8 張截圖全部取自 B 站 UP 主「愛喵喵的栗子」的實測影片(單一來源,無 CC 字幕),每張圖都帶時間戳連結,點一下就跳回影片對應位置。截圖裡載入的「藍沙·鯨魚娘女僕」是社群主題皮膚——這是 dsh 主題系統的正常用法,也是渲染能力的展示舞台;預設 UI 為淺色簡約風。

三句話看懂

▸dsh-raw-html 是一個 VCP 預覽渲染協議規範外掛:裝上後打開「</> 渲染」開關,AI 回覆裡的 HTML 卡片直接在聊天中渲染,即插即用、零設定。
▸能渲染的不止圖文:融資長條圖與熱力點陣、canvas 粒子動畫、新聞晚報排版、KaTeX 公式、Mermaid 圖表、內嵌影片,都能出現在卡片裡。
▸安全有分層:標準模式對 script / iframe / on* 事件一律攔截,要跑腳本需切可信模式;主題管皮膚、外掛管渲染,可以分開裝。

DSH最强渲染插件,dsh-raw-html大更新第三弹!图表,动画,看视频!让大肥鱼彻底疯狂!爱喵喵的栗子 · Bilibili

在 Bilibili 觀看

8 步裝出「能看到」的聊天

第一組 · 裝上與變身

1
改造前:純文字回答與乾巴巴的工具軌跡
預設淺色 UI 裡,新會話只有一個輸入框。影片在這一刻問了句天氣:軌跡裡連著三次上下文注入,還有一條 Tool call Error: Location not found: 上海,助手換成拼音 get_weather Shanghai 才拿到資料——過程全靠逐行讀日誌,回答本身仍是一段純文字。
探索未至之境 · 预览版
标准模式 · DeepSeek-V4-Flash · High
改造前:預設淺色 UI,回答是純文字,過程埋在工具軌跡裡。看到源影片 0:30 處
2
換上社群主題,介面先「變身」
先載入「藍沙·鯨魚娘女僕」社群主題:背景換成水下宮殿,左側立繪換成女僕,回覆裡還能貼一張「開心」貼圖。注意這一步只換了皮膚——聊天內容還是普通文字,渲染引擎要靠下一步的外掛。
鸣哇!是先生的声音~咕噜噜~!
开心
截圖為社群主題皮膚,預設 UI 為淺色簡約風;此刻只有皮膚變了,渲染還沒開。看到源影片 1:18 處
3
第一張渲染卡:外掛先自我介紹
送出「首先,我們這個外掛,是用來幹嘛的吖」之後,聊天流裡長出第一張深色卡片:dsh-raw-html v0.6.0 · 修補 v6.38 的介紹卡,分「渲染引擎」「vcp-fast 加速」「設計規範」三欄,右上角直接給「下載 HTML」按鈕——AI 的回答第一次變成了介面。
dsh-raw-html v0.6.0 · 补丁 v6.38
渲染引擎 · vcp-fast 加速 · 设计规范
下载 HTML
外掛先用一張卡片自我介紹:渲染引擎、vcp-fast 加速 1200→6800 格速、設計規範。看到源影片 1:53 處

第二組 · 能看到的一切

4
圖表資料卡:融資榜一眼看懂
請 AI 報一組資料,它會按「美學系統」裡的青瓷藍·資料風(PORCELAIN-DATA)輸出整張資料卡:2026 上半年 AI 細分賽道融資長條圖,大模型以 320 億美元一騎絕塵,自動駕駛 210、醫療 140、金融 120 緊隨其後,下方再補一張北美洲 46 點、亞太 33 點、歐洲 14 點、其他 5 點的熱力點陣。
大模型一骑绝尘,占上半年融资额三分之一
北美洲 46 点 · 亚太 33 点 · 欧洲 14 点 · 其他 5 点
圖表卡自帶長條圖與熱力點陣,風格來自「美學系統」的青瓷藍·資料風。看到源影片 2:30 處
5
canvas 動畫與可信模式的安全邊界
動畫是檢驗渲染的硬骨頭。標準模式下 script / iframe / on* 事件一律攔截,canvas 只是一塊深色空面板,HUD 三格(TRUSTED::EXECUTED、BALLS::14、BOUNCES::0)只是 CSS 寫的靜態文案;切到可信模式(extractTrustedScripts / flushTrustedScripts),粒子動畫真的跑起來。卡片底部還放了「動畫在跳」「只有空面板」兩個對照按鈕,方便親手驗證。
TRUSTED::EXECUTED · BALLS::14 · BOUNCES::0
动画在跳 / 只有空面板
標準模式攔下腳本只剩空面板;切到可信模式,動畫真的在跳。看到源影片 2:48 處
6
「美學系統」:給輸出定一套設計規範
打開「美學系統」彈窗,裡面是一排現成風格:青瓷藍·資料風、侘寂·文學散文風、編輯部紅·新聞晚報風、高透逐光玻璃·Y2K 未來風……每個預設都帶色板與字型預覽,點標題即可試穿;掛載後整套設計規範會注入系統提示詞,AI 的輸出從此有版面。
美学系统
青瓷蓝·数据风 · 侘寂·文学散文风 · 编辑部红·新闻晚报风
點標題即可試穿,色板、字型、排版規範一套帶走。看到源影片 3:30 處
7
新聞卡 A/B 對比:排版由外掛 CSS 驅動
同一批當日新聞渲染成「AI 產業晚報(2026-08-29)」:「A · 無美學系統」只注入結構塊,能畫但不知道風格庫存在,字型只能系統兜底;「B · 美學系統 wire-news」則按「編輯部紅」的色板、字型、版式鉛線排印。切一下分頁,差距一目瞭然。
AI 产业晚报(2026-08-29)
A · 无美学系统 / B · 美学系统 wire-news
A 只注入結構塊,B 按「編輯部紅」的色板、字型、版式鉛線排印。看到源影片 4:12 處
8
換你上場:打開渲染開關,提問
回到輸入框,選中 dsh-raw-html 工作區,保持「</> 渲染」開著,把問題打出來送出——卡片就會像第 3 步那樣長在聊天裡。圖表、動畫、新聞排版,都從這一句提問開始。
首先,我们这个插件,是用来干嘛的吖
</> 渲染 · DeepSeek-V4-Flash · High
提問時刻:保持「</> 渲染」開著,送出後卡片就長在聊天裡。看到源影片 1:48 處

關於 dsh 渲染外掛的常見問題

渲染引擎、主題皮膚、安全邊界與效能,一次說清。

富渲染是外掛還是主題?

是外掛,主題只是皮膚。dsh-raw-html 這類外掛負責渲染引擎——把 AI 輸出的 HTML 卡片真正渲染進聊天;「藍沙·鯨魚娘女僕」這類社群主題只負責背景、立繪、字型等外觀。兩者可以分開安裝,也可以像影片裡那樣組合使用:主題換皮,外掛管渲染。

讓 AI 輸出 HTML 安全嗎?

預設是安全的。標準模式對 script、iframe、on* 事件一律攔截,只渲染靜態樣式——所以沒開可信模式時 canvas 只會是空面板;要執行腳本需顯式切到可信模式(extractTrustedScripts / flushTrustedScripts),第 5 步的兩個對照按鈕演示的正是這個邊界。

渲染會不會拖慢會話?

外掛自帶 vcp-fast 加速:靠快取與增量渲染,雜湊命中的部分不重畫。卡片上的原話是格速從 1200 提到 6800,重渲染只處理增量、約提升 12 倍,長會話捲動時也依然流暢。

支援渲染哪些內容?

HTML 卡片、圖表資料卡(長條圖、熱力點陣)、SVG 與 canvas 動畫、互動頁面、新聞與書籍裝幀排版、KaTeX 公式、Mermaid 圖表和內嵌影片都可以。配合「美學系統」的青瓷藍·資料風、編輯部紅·新聞晚報風等預設,排版由外掛 CSS 統一驅動。