# AI生成網頁美化樣式

:::info
## 說明
使用生成式AI，可以用很容易的方式產生對應的網頁樣式語法css，達成美化網頁的效果
:::

---

## 有獎徵答原始樸素版

[](https://codepen.io/not0000/full/azvGVzZ)

---

## AI美化版1-通用樣式風格咒文，將這個提示詞貼給 AI，加上原始網頁 Html 即可

:::success
* 這裡有一份html，請在不修改html和class的情況下，給我css進行網頁美化
:::
---

## AI美化版1-通用樣式風格畫面

[](https://codepen.io/not0000/full/ZYboXBm)

---

## AI美化版2-絢麗夜店風格畫面

* 我希望能有另外一種不同風格的樣式，盡可能越絢麗越好，可以使用css3動畫、框線、陰影或是各種背景等等，請你發揮創意盡量發展，給我純css

---

[](https://codepen.io/not0000/full/jEbxaER)

---

## AI美化版3-復古8bit風格 (AI自主推薦)
* 原始提示詞：復古8bit 遊戲風，AI自主說明使用的元素
* 像素感字體（使用系統常見替代字體模擬，例如 Press Start 2P, monospace）。
* 背景 → 深色 CRT 螢幕感，格線動畫。
* 按鈕 → 方塊化、像素邊框，hover 時有「閃爍 + 抖動」動畫。
* 卡片 → 像素化邊框 & 黑底綠字感覺。
* 影片彈窗 → 像「街機彈窗」，帶有像素框線。

---

## AI美化版3-復古8bit風格 畫面

[](https://codepen.io/not0000/full/azvGVvZ)

---

---

:::info
## 學生實作成果
:::

---

## 粉紅泡泡風格畫面

[](https://codepen.io/not0000/full/KwdEvdm)

---

## 海洋風

[](https://codepen.io/not0000/full/azdKKdd)

---

## 駭客任務Matrix風格

[](https://codepen.io/not0000/full/YPqZpow)

---

## 蠟筆小新動畫風格

[](https://codepen.io/not0000/full/VYapadw)