前幾天，看到好基友歸藏在 X 上發了一個帖子：

還挺爆，一天半的時間過去，已經有 17.3 萬的閱讀了。

這個東西，簡單點說，就是用一個 Prompt，把一些非常難以閱讀的文字報告，一鍵轉成更舒服更易讀的可視化網頁。

甚至，還是能交互的那種。

藏師傅發完了之后，我的群里大家也開始了復現潮，然后也不知道這群人為啥，kuku 給藏師傅交作業。

我給大家看一個朋友交作業的例子，她本職工作是物理老師，然后把一些物理概念的 PDF，轉成了一個可視化的網頁。

超級驚艷。

網址在此：https://lisa94destiny.github.io/physics-simulation/index.html

隨便打開一個其中的一個實驗，動態效果是這樣的。

我只能說，佩服得五體投地。

還是沒趕上好時候，但凡我學物理時候有這個，我能只考 30 多分嗎。。

說實話，在看到這種玩法的時候，作為一個干了快 10 年的設計師。

我有一種直覺，大眾的信息傳達媒介，可能會涌現出一種新的形態了。

因為我們都經歷過那種痛苦，面對一頁頁密密麻麻的 PDF 文字時，那種提不起勁看下去的感覺。

比如我每次看一些報告或者論文時，說實話，在閱讀第二頁時已經開始走神了。。。

我相信，這不是我一個人的問題，而是傳統文檔形式本身的局限。

后來，人們為了閱讀更好、更直觀，于是，涌現出了 PPT 這種形式。

只不過，難度高了很多。

而現在，可視化網頁這種方式，在 AI 的加持下，門檻低到塵埃里，人人都可以做，那曾經遙不可及的形式，如今唾手可得。

這也是一種，非常有趣的新的信息革命。

你想想，你以后的報告不是 PDF，不是 PPT，而是一個可以交互的可視化網頁甩過去，該有多酷。

說說怎么做，整體的思路幾乎都還是來自于歸藏。

非常實用，按藏師傅的話說，八十老太都能操作。

我在藏師傅的基礎上，稍稍修改了一點點 prompt，以便能更好的讓大家使用。

我會給你一個文件，分析內容，并將其轉化為美觀漂亮的中文可視化網頁作品集：

## 內容要求
- 保持原文件的核心信息，但以更易讀、可視化的方式呈現
- 在頁面底部添加作者信息區域，包含：
* 作者姓名: [作者姓名]
* 社交媒體鏈接: 至少包含 Twitter/X：
- 版權信息和年份
## 設計風格
- 整體風格參考 Linear App 的簡約現代設計
- 使用清晰的視覺層次結構，突出重要內容
- 配色方案應專業、和諧，適合長時間閱讀
## 技術規范
- 使用 HTML5、TailwindCSS 3.0+（通過 CDN 引入）和必要的 JavaScript
- 實現完整的深色/淺色模式切換功能，默認跟隨系統設置
- 代碼結構清晰，包含適當注釋，便于理解和維護
## 響應式設計
- 頁面必須在所有設備上（手機、平板、桌面）完美展示
- 針對不同屏幕尺寸優化布局和字體大小
- 確保移動端有良好的觸控體驗
## 媒體資源
- 使用文檔中的 Markdown 圖片鏈接（如果有的話）
- 使用文檔中的視頻嵌入代碼（如果有的話）
## 圖標與視覺元素
- 使用專業圖標庫如 Font Awesome 或 Material Icons（通過 CDN 引入）
- 根據內容主題選擇合適的插圖或圖表展示數據
- 避免使用 emoji 作為主要圖標
## 交互體驗
- 添加適當的微交互效果提升用戶體驗：
* 按鈕懸停時有輕微放大和顏色變化
* 卡片元素懸停時有精致的陰影和邊框效果
* 頁面滾動時有平滑過渡效果
* 內容區塊加載時有優雅的淡入動畫
## 性能優化
- 確保頁面加載速度快，避免不必要的大型資源
- 實現懶加載技術用于長頁面內容
## 輸出要求
- 提供完整可運行的單一 HTML 文件，包含所有必要的 CSS 和 JavaScript
- 確保代碼符合 W3C 標準，無錯誤警告
- 頁面在不同瀏覽器中保持一致的外觀和功能
請根據上傳文件的內容類型（文檔、數據、圖片等），創建最適合展示該內容的可視化網頁。

要注意，這個 Prompt 不是復制給任何大模型都可以用的，目前大家測試下來，只有 Claude 3.7 Sonnet 效果最好最強，其他的大模型生成出來的審美，總還是差點意思，所以，你可以把 Prompt，發給任何能用 Claude 3.7 的產品。

比如 Claude 自己的官網、trea 海外版、cursor 等等。

Prompt 整體上基本復制就可以用，但是細節部分，你還是要改成你的信息。

主要就是兩趴：

1. 作者信息這一塊改成你自己的內容
2. 媒體資源這一塊，你可以加上自己特定要出現的圖片/視頻，不需要的直接刪掉這一塊就行

把這兩塊定義一下，就 OK 了，文檔啥的你就自己上傳就行。

媒體資源這塊我詳細說一下，比如你希望展現的圖片啥的，但是記住不要跟著文檔一起上傳，可能會有顯示錯誤，盡量用公鏈。

圖片這塊，如果是網上現成的圖片，你就直接右鍵圖片，復制圖像鏈接就行。

如果是你自己的圖片，可以使用圖床服務（比如 https://sm.ms/ ）托管圖片，生成一個公鏈。

然后，用 Markdown 格式貼到媒體資源那。

![圖片描述](網址)

如果你想插入視頻的話，也很簡單，找到公網的視頻地址（你自己的本地視頻就先上傳到公網上，比如 Youtube 或者 B 站之類的）。在視頻頁面尋找"分享"按鈕，點擊"嵌入"或"嵌入代碼"選項。

比如這個 B 站的例子。

把復制下來的 HTML 代碼粘貼到媒體資源那。

比如《死亡擱淺 2》預告片的資源代碼就是這樣的：

然后，就把改完的 Prompt，粘貼到 Claude 自己的官網、trea 海外版、cursor 等等里面去就行。

如果是其他渠道的，沒有那種代碼預覽功能的，就可以把生成的代碼直接復制到這個網站里：?https://www.yourware.so/

像這樣，然后點 deploy code，稍等一會，就有預覽了。

點 copy link，就可以直接分享給朋友鏈接就可以一起看。

教程就是這樣了，是不是很簡單。

真的，只要你能用上 Claude 3.7，真的就是有手就行。

我自己也隨手跑了兩個 case 玩。

我第一個想到的場景，就是吃瓜。。。

因為每次一有點啥瓜，朋友就扔給我個 pdf。好看是好看，就是忒長了。。還是純流水賬，毫無重點。每次我都得強撐著分著看好幾次，才能看完。

比如說，這個 PDF（為了保護別人的隱私，所以這個是我用純 Claude 仿制生成的，可能有點無聊。如有雷同，就是 Claude 的鍋）

我閑讀著麻煩，直接反手改成了可視化網頁。

網址在這： https://jdsrt3f1pk.yourware.so/

時間線、人物關系圖譜應有盡有。

甚至還有對話重現。。太細了。

對比一下，這不比看純文字文檔有趣多了。。。

還有另一個，我最近新買的吹風機的說明書。

（不是廣告。。。純是剛好手邊有這個）

真的，我就問你這種說明書誰看誰不腦殼疼。

直接三下五除二，捏了一個可視化網頁。

網址：https://qicpvw19ax.yourware.so/

還能切換日間模式。

這不爽多了？

我們為什么會對 PDF 這類傳統文檔感到如此抵觸？

我細想了想，我覺得其實不是是對形式的嫌棄，而是對一種舊認知模式的本能抗拒。

PDF 這類東西就像是代表著工業時代的線性思維，知識被切割成章節段落，按預設路徑強制你從 A 走到 Z。

它們假設所有讀者以相同步調、相同方式吸收信息，這與人類思維的網狀、跳躍、聯想性本質完全相悖。

而我們人類，生來就是喜歡探索、喜歡跳躍的。

在游戲里，典型的就像一個可以自由探索的塞爾達，和一段純粹線性敘事的游戲的對比。

而現在游戲行業是什么情況大家也都知道了，開放世界，遠遠占了上風。

而當文字遇上可視化可交互的網頁這種形式，就像進入了一段巨型的開放世界。

枯燥的內容，煥發出了新的生命力。

在這個新世界里，知識不是被讀的，而是被體驗的。

我們體驗信息的方式，變得更加多元，也更加主動了。

不再是被動輸入，而是主動探索。

信息頁不再是高墻上的明珠。

而是流動在生活每個角落的活水。

最后，祝你玩得開心。

讓你的文檔也開心起來。

謝謝歸藏。

歡迎關注作者的微信公眾號：數字生命卡茲克