隨著AI技術(shù)的飛速發(fā)展，生成復(fù)雜且可交互的HTML頁面變得前所未有的簡(jiǎn)單。本文將詳細(xì)介紹如何利用AI工具（如Claude 3.7）快速將復(fù)雜內(nèi)容轉(zhuǎn)化為結(jié)構(gòu)化、可視化的網(wǎng)頁，并通過簡(jiǎn)單步驟將其部署為可公開訪問的網(wǎng)站。

前兩篇文章講了Claude3.7帶來的超強(qiáng)性能：生成復(fù)雜可交互的HTML，再加上審美的極大提升，已經(jīng)可以幫助0經(jīng)驗(yàn)的開發(fā)者快速生成高保真原型：

「滴滴打人」APP上線：Claude 3分鐘生成原型圖，Cursor15分鐘完成開發(fā)。產(chǎn)品經(jīng)理要下線了？

「死了么」APP上線——Claude3.7生成高保真原型UI 2.0

其實(shí)，除了開發(fā)領(lǐng)域，生活中還有很多場(chǎng)景可以應(yīng)用到這種HTML

本質(zhì)上就是能把復(fù)雜的抽象概念，量化成代碼后，就可以形成結(jié)構(gòu)化的清晰知識(shí)。

例如公眾號(hào)上有非常多優(yōu)秀的「萬字長(zhǎng)文」但說實(shí)話，有時(shí)候我只需要讀個(gè)大概，或者說先通讀，再找合適的地方深入學(xué)習(xí)。這樣的需求下，傳統(tǒng)文章的排版布局就很不友好了。

如下圖，左邊是2萬字的《中國(guó)經(jīng)濟(jì)的邏輯與出路》，內(nèi)容沒有排版可言，就算再精彩也很難讀得下去。

于是我讓Cluade幫我重新排版生成了清晰的架構(gòu)化HTML，如下圖右邊所示。

通過以上各模塊的對(duì)比，我們看到AI幫我生成的HTML文章，是總結(jié)提煉了原文的核心，并保持一樣的邏輯與脈絡(luò)。

它甚至在最后還給我出了思考題，真的在關(guān)心我有沒有認(rèn)真學(xué)習(xí)，我哭死

感興趣可以到這里看到：https://api.bggg.tech/website/0e26d457-d7a4-46d9-a72b-5d899bee2169/

這樣的HTML文章是怎么生成的呢？

提示詞：

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

除了幫助高效閱讀外，還有老師把晦澀難懂的高中物理知識(shí)做成了可視化的HTML

這里就不只是靜態(tài)的文字圖片，而是動(dòng)態(tài)計(jì)算的效果：

原文地址： https://lisa94destiny.github.io/physics-simulation/index.html

大家都可以自行去嘗試，最好的效果是用Claude 3.7，如果沒有的話，用Deepseek也可以做簡(jiǎn)單一些的。

B端究竟需要什么样的产品经理？

B端产品经理都是以提升供应侧的工作效率为目的，所以B端需求主要是以业务问题为导向。 这个是B端产品比较重要的一点，B端产品是服务于一个主体 ...

查看详情 >

那做完之后，如何把Html代碼部署到網(wǎng)站分享給其他人呢？

有兩種方式：

方式一：麻煩但可自主控制

買一個(gè)阿里云服務(wù)器，新人99元一年的，然后安裝寶塔面板-新建網(wǎng)站，把html放到網(wǎng)站的目錄下即可。

這樣的方式，不適合絕大部分普通人，感興趣的可以評(píng)論區(qū)留言我詳細(xì)介紹。

方式二：簡(jiǎn)單，直接用免費(fèi)的托管服務(wù)

這種是適合絕大部分人，簡(jiǎn)單來說就是把html文件上傳到網(wǎng)站上，網(wǎng)站給你一個(gè)訪問地址。

網(wǎng)上很多教程是用Github，例如上面物理老師的例子，網(wǎng)站后綴是 github.io 就是了，這種方法有個(gè)問題就是經(jīng)常會(huì)被墻，無法訪問，所以我也不推薦。

推薦使用網(wǎng)站：https://www.yourware.so/

直接把Cursor生成好的html，上傳到上去，或者選擇「Paste Code」把代碼黏貼進(jìn)去

即可。

頁面下面有展示別人上傳好的網(wǎng)站。

如果你不想自己做的html給公眾訪問，也可以用我自己做好的網(wǎng)站（https://bggg.tech/tools/website-generator），操作形式是一樣的