前段時間很多人用了我那套幫你從文檔生成漂亮可視化網頁的提示詞。

后面也有很多朋友基于那個進行了很多創新，但是我發現有個問題一直沒有被解決。

模型每次生成的結果過于隨機了，有時候很好看，有時候雖然好看但是不太符合我的喜好。

所以就想能不能讓大家用更加可視化的方式探索方案，之后再生成。

還真讓我搞出來了一套非常優雅的方案，我寫了一個樣式探索工具。

你可以自己在這個網頁上自定義各種基礎的樣式，或者你可以直接點擊隨機生成，直到隨機到你喜歡的。

然后用用新的提示詞和網頁導出的文件就可以生成更加漂亮可控的網頁。

不用擔心每次隨機都很丑，我做了很多的視覺約束，會保證每次生成的基本美學表現。

可以來試試：https://60mcp23013.yourware.so/

比如下面這就是同樣的一個簡歷用了我這個工具生成的不同樣式的結果，是不是感覺比上個版本強了非常多。

先介紹一下怎么使用

整個頁面的核心就是兩個部分一個是調整樣式，一個是導出樣式和提示詞。

首先你可以在頁面左側對網頁樣式進行調整，比如主題色、輔助色、字體、大小、字間距、按鈕樣式等。

然后可以在右側預覽，預覽這里我也做的很細，做了三個頁面首頁、產品、博客，方便你在不同的頁面內容上預覽。

另外預覽的部分還支持手機、電腦、平板不同頁面寬度的預覽，另外咱們的夜間模式也是有的。

我知道你們看著左邊密密麻麻的元素頭疼，所以還給大家兩個兜底，首先你可以選擇預設的各種風格模板，另外的話可以點擊「隨機生成」按鈕，點完所有的元素都會變化，多點幾次選你們喜歡的就好了。

最后就是導出和如何使用了，點擊導出樣式之后，你可以在左側的 Tab 抽屜看到提示詞和對應的代碼，覺得看不懂是吧，沒問題，我已經考慮到了，你只需要復制提示詞、點擊下載文件。

之后將你自己的內容文檔、提示詞和下載下來的 Json 文件一起扔給 Claude 回車就行，其他一概不用管。

當然還有提示詞

雖然網頁上面可以復制提示詞，但這里還是寫一下，方便大家收藏，其中 json 部分需要在網頁生成。

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

## 內容要求

- 所有頁面內容必須為簡體中文
- 保持原文件的核心信息，但以更易讀、可視化的方式呈現
- 在頁面底部添加作者信息區域，包含：
    - 作者姓名: []
    - 社交媒體鏈接: 至少包含Twitter/X：
    - 版權信息和年份

## 設計風格

- 整體風格參考Linear App的簡約現代設計
- 使用清晰的視覺層次結構，突出重要內容
- 配色方案應專業、和諧，適合長時間閱讀

## 技術規范

- 使用HTML5、TailwindCSS 3.0+（通過CDN引入）和必要的JavaScript
- **使用CDN引入Preline UI組件庫，按需使用其組件增強界面效果**
- **根據提供的JSON文件內容（顏色、字體等）配置TailwindCSS的樣式Token，確保設計一致性**
- 實現完整的深色/淺色模式切換功能，默認跟隨系統設置
- 代碼結構清晰，包含適當注釋，便于理解和維護

## 響應式設計

- 頁面必須在所有設備上（手機、平板、桌面）完美展示
- 針對不同屏幕尺寸優化布局和字體大小
- 確保移動端有良好的觸控體驗

## 媒體資源

- 使用文檔中的Markdown圖片鏈接（如果有的話）
- 使用文檔中的視頻嵌入代碼（如果有的話）

## 圖標與視覺元素

- 使用專業圖標庫如Font Awesome或Material Icons（通過CDN引入）
- 根據內容主題選擇合適的插圖或圖表展示數據
- 避免使用emoji作為主要圖標

## 交互體驗

- 添加適當的微交互效果提升用戶體驗：
    - 按鈕懸停時有輕微放大和顏色變化
    - 卡片元素懸停時有精致的陰影和邊框效果
    - 頁面滾動時有平滑過渡效果
    - 內容區塊加載時有優雅的淡入動畫

## 性能優化

- 確保頁面加載速度快，避免不必要的大型資源
- 圖片使用現代格式(WebP)并進行適當壓縮
- 實現懶加載技術用于長頁面內容

## 輸出要求

- 提供完整可運行的單一HTML文件，包含所有必要的CSS和JavaScript
- 確保代碼符合W3C標準，無錯誤警告
- 頁面在不同瀏覽器中保持一致的外觀和功能

請根據上傳文件的內容類型（文檔、數據、圖片等），創建最適合展示該內容的可視化網頁。在配置TailwindCSS時，請使用提供的JSON文件中的顏色、字體等配置項來自定義樣式Token。

再來看我是怎么做的

我之前當設計師的時候做了很長時間的設計系統，所以對設計工程化和如何保證還原度還是有一定的研究。

因為這套提示詞是基于 TailwindCSS 的，剛好他就設定了非常多已經整合好的 CSS 樣式，我們只需要在更改一部分它默認的樣式的值就可以讓我們的頁面發生很大變化。

但是 TailwindCSS 的值還是太細了，不太好調整，那有沒有更加整合的東西呢，有的，組件庫或者說設計系統。

市面上有非常多基于 TailwindCSS 構建的設計系統，他們在CSS 樣式上再次封裝，重新設計了每個前端組件。

比如：按鈕、輸入框，還有他們的各種狀態選中是什么樣的、禁用是什么樣的。

所以我還引用了基于 TailwindCSS 的組件庫 Preline UI。這樣一來我們的基本美學表現就有了很大的保障，因為一些規則已經約束好了。

生成整個產品的過程很簡單也讓我對 Claude 3.7 的強大有了新的認知，我整理完需求發給他，他一次就搞定了這個接近 4000 行代碼的工具。

當然還是有些小 BUG，我用 Windsurf 修復了一下，補充了一下缺失的元素，然后用 Youware 上線了，就這么簡單。

澀話時間

當我坐在電腦前，看著這個從構思到實現的工具終于完成時，我有些迷茫。

我既害怕又興奮，害怕的是我之前學的那么多東西突然很多都沒意義了，興奮是這玩意會帶來非常多的機會。

這種復雜的情緒，恐怕是我們這個時代每個創作者都會經歷的。

當我看著Claude在短短幾個小時內就完成了需要我數周甚至更長時間才能實現的代碼，我不得不直面這個問題：技術的進步到底是在取代我們，還是在賦能我們？

技術的本質從未改變，它始終是人類思想的延伸和工具。

真正有價值的，不是我們掌握了多少技術細節，而是我們對問題的洞察、對用戶的理解、對美的鑒賞，以及將這些轉化為實際解決方案的能力。

技術可以簡化過程，但永遠無法替代我們獨特的視角和表達。

如果覺得對你有幫助的話請不要吝嗇你手中的贊、喜歡和分享按鈕??，

這里嘗試TailwindCSS 樣式編輯器：https://60mcp23013.yourware.so/