上次分享完如何用 Claude 寫出好看的界面之后發現，這套邏輯還能解決另一個打工人更加緊迫的問題?！?/p>

將文檔變成更加易讀的 PPT 或者網頁。先來看一下效果。　

我找了一個 Stripe 24 年的總結文檔，里面有他們的各種數據和優質客戶的案例，但是全是密密麻麻的文字，而且全是英文。　

生成之后的頁面是這樣的，Claude 會自動提取信息層級和分類，然后生成非常易于理解和美觀的可視化網頁，支持切換成夜間模式和移動端的響應式網頁。　

你也可以在這個網址預覽網頁：https://lqb9jj5ryz.yourware.so/　

怎么做的呢？　

其實大部分的技巧和提示詞來自我前幾天寫的這個教程：。　

這里直接給提示詞。

相較于上個教程，我又加了幾條要求，確保你可以將任何文件扔進去，不需要一個字的修改就能生成美觀的網頁?！?/p>

• 因為我們很多的文件都是英文的，所以我加了讓他變成中文的要求
• 另外讓他參考 Linear App 的設計語言，這個靈感來自 Padphone 老師
• 還有就是可以在頁面加上你的社交媒體鏈接和你的名字，方便網頁傳播之后大家可以找到作者
• 去掉了 Unsplash 的圖片要求，因為免費的 API 不太好查找對應的主題圖片

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

你說生成之后如何部署的問題，這個如果你用的 POE 或者 Claude 都可以直接分享在線版本的網頁，如果你用的不是這兩個的話，只需要訪問https://www.yourware.so/，然后將代碼粘貼進去點 Deploy Code 就行。　

我其實已經看到很多自媒體將這種方法生成的網頁截圖放在他們的視頻里幫助用戶理解了，比如口罩哥那里我就看到好幾次，但是沒有這么漂亮?！?/p>

所以這種方法不只是可以幫你在工作中匯報內容，也可以幫用戶理解復雜邏輯的內容和文檔。　

你也可以在提示詞中加入你自己的需求，例如確實需要 PPT 形式的就可以讓他生成網頁形式的 PPT，每個卡片大小都是 16:9 的比例就行。　

今天的教程就到這里了，如果覺得對你有幫助的話麻煩給個贊或者喜歡