√天堂中文在线网,亚洲一区二区免费av,国产成人成人免费视频网站,亚洲综合欧美日韩一区,第九影院午夜理论影院

前段時(shí)間很多人用了我那套幫你從文檔生成漂亮可視化網(wǎng)頁(yè)的提示詞。

后面也有很多朋友基于那個(gè)進(jìn)行了很多創(chuàng)新，但是我發(fā)現(xiàn)有個(gè)問(wèn)題一直沒(méi)有被解決。

模型每次生成的結(jié)果過(guò)于隨機(jī)了，有時(shí)候很好看，有時(shí)候雖然好看但是不太符合我的喜好。

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

還真讓我搞出來(lái)了一套非常優(yōu)雅的方案，我寫了一個(gè)樣式探索工具。

你可以自己在這個(gè)網(wǎng)頁(yè)上自定義各種基礎(chǔ)的樣式，或者你可以直接點(diǎn)擊隨機(jī)生成，直到隨機(jī)到你喜歡的。

然后用用新的提示詞和網(wǎng)頁(yè)導(dǎo)出的文件就可以生成更加漂亮可控的網(wǎng)頁(yè)。

不用擔(dān)心每次隨機(jī)都很丑，我做了很多的視覺(jué)約束，會(huì)保證每次生成的基本美學(xué)表現(xiàn)。

可以來(lái)試試：https://60mcp23013.yourware.so/

比如下面這就是同樣的一個(gè)簡(jiǎn)歷用了我這個(gè)工具生成的不同樣式的結(jié)果，是不是感覺(jué)比上個(gè)版本強(qiáng)了非常多。

先介紹一下怎么使用

整個(gè)頁(yè)面的核心就是兩個(gè)部分一個(gè)是調(diào)整樣式，一個(gè)是導(dǎo)出樣式和提示詞。

首先你可以在頁(yè)面左側(cè)對(duì)網(wǎng)頁(yè)樣式進(jìn)行調(diào)整，比如主題色、輔助色、字體、大小、字間距、按鈕樣式等。

然后可以在右側(cè)預(yù)覽，預(yù)覽這里我也做的很細(xì)，做了三個(gè)頁(yè)面首頁(yè)、產(chǎn)品、博客，方便你在不同的頁(yè)面內(nèi)容上預(yù)覽。

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

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

最后就是導(dǎo)出和如何使用了，點(diǎn)擊導(dǎo)出樣式之后，你可以在左側(cè)的 Tab 抽屜看到提示詞和對(duì)應(yīng)的代碼，覺(jué)得看不懂是吧，沒(méi)問(wèn)題，我已經(jīng)考慮到了，你只需要復(fù)制提示詞、點(diǎn)擊下載文件。

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

當(dāng)然還有提示詞

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

我會(huì)給你一個(gè)文件，分析內(nèi)容，并將其轉(zhuǎn)化為美觀漂亮的中文可視化網(wǎng)頁(yè)：

## 內(nèi)容要求

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

## 設(shè)計(jì)風(fēng)格

- 整體風(fēng)格參考Linear App的簡(jiǎn)約現(xiàn)代設(shè)計(jì)
- 使用清晰的視覺(jué)層次結(jié)構(gòu)，突出重要內(nèi)容
- 配色方案應(yīng)專業(yè)、和諧，適合長(zhǎng)時(shí)間閱讀

## 技術(shù)規(guī)范

- 使用HTML5、TailwindCSS 3.0+（通過(guò)CDN引入）和必要的JavaScript
- **使用CDN引入Preline UI組件庫(kù)，按需使用其組件增強(qiáng)界面效果**
- **根據(jù)提供的JSON文件內(nèi)容（顏色、字體等）配置TailwindCSS的樣式Token，確保設(shè)計(jì)一致性**
- 實(shí)現(xiàn)完整的深色/淺色模式切換功能，默認(rèn)跟隨系統(tǒng)設(shè)置
- 代碼結(jié)構(gòu)清晰，包含適當(dāng)注釋，便于理解和維護(hù)

## 響應(yīng)式設(shè)計(jì)

- 頁(yè)面必須在所有設(shè)備上（手機(jī)、平板、桌面）完美展示
- 針對(duì)不同屏幕尺寸優(yōu)化布局和字體大小
- 確保移動(dòng)端有良好的觸控體驗(yàn)

## 媒體資源

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

## 圖標(biāo)與視覺(jué)元素

- 使用專業(yè)圖標(biāo)庫(kù)如Font Awesome或Material Icons（通過(guò)CDN引入）
- 根據(jù)內(nèi)容主題選擇合適的插圖或圖表展示數(shù)據(jù)
- 避免使用emoji作為主要圖標(biāo)

## 交互體驗(yàn)

- 添加適當(dāng)?shù)奈⒔换バЧ嵘脩趔w驗(yàn)：
    - 按鈕懸停時(shí)有輕微放大和顏色變化
    - 卡片元素懸停時(shí)有精致的陰影和邊框效果
    - 頁(yè)面滾動(dòng)時(shí)有平滑過(guò)渡效果
    - 內(nèi)容區(qū)塊加載時(shí)有優(yōu)雅的淡入動(dòng)畫

## 性能優(yōu)化

- 確保頁(yè)面加載速度快，避免不必要的大型資源
- 圖片使用現(xiàn)代格式(WebP)并進(jìn)行適當(dāng)壓縮
- 實(shí)現(xiàn)懶加載技術(shù)用于長(zhǎng)頁(yè)面內(nèi)容

## 輸出要求

- 提供完整可運(yùn)行的單一HTML文件，包含所有必要的CSS和JavaScript
- 確保代碼符合W3C標(biāo)準(zhǔn)，無(wú)錯(cuò)誤警告
- 頁(yè)面在不同瀏覽器中保持一致的外觀和功能

請(qǐng)根據(jù)上傳文件的內(nèi)容類型（文檔、數(shù)據(jù)、圖片等），創(chuàng)建最適合展示該內(nèi)容的可視化網(wǎng)頁(yè)。在配置TailwindCSS時(shí)，請(qǐng)使用提供的JSON文件中的顏色、字體等配置項(xiàng)來(lái)自定義樣式Token。

再來(lái)看我是怎么做的

我之前當(dāng)設(shè)計(jì)師的時(shí)候做了很長(zhǎng)時(shí)間的設(shè)計(jì)系統(tǒng)，所以對(duì)設(shè)計(jì)工程化和如何保證還原度還是有一定的研究。

因?yàn)檫@套提示詞是基于 TailwindCSS 的，剛好他就設(shè)定了非常多已經(jīng)整合好的 CSS 樣式，我們只需要在更改一部分它默認(rèn)的樣式的值就可以讓我們的頁(yè)面發(fā)生很大變化。