原文：https://juejin.cn/post/7624442962525011978

一、像素風(fēng) · 復(fù)古風(fēng)（8-bit/街機(jī)游戲/精簡粗獷主義）

1. NES.css（8-bit 像素/紅白機(jī)風(fēng)）

官方文檔（官網(wǎng)） ：https://nostalgic-css.github.io/NES.css/

GitHub：https://github.com/nostalgic-css/NES.css

適用技術(shù)棧：無限制（純 CSS，任意框架可用）

風(fēng)格：很經(jīng)典的一個(gè)UI庫。純正8-bit像素風(fēng)格，還原經(jīng)典紅白機(jī)、復(fù)古游戲的視覺質(zhì)感，自帶懷舊游戲氛圍。

nes.png

2. Pixel-UI（Vue3專用像素風(fēng)）

官方文檔（官網(wǎng)） ：https://maomentai817.github.io/pixel-ui/

作者：貓悶臺817

適用技術(shù)棧：Vue3 專用

風(fēng)格：基于CSS Houdini的復(fù)古像素風(fēng)格，Vue3專用像素風(fēng)。

vue3.png

3. Pixel RetroUI

官方文檔（官網(wǎng)） ：https://retroui.io/

GitHub：https://github.com/Dksie09/RetroUI

適用技術(shù)棧：React / Next.js

風(fēng)格：我覺得很平庸??。

retro.png

4. Pxlkit（最強(qiáng)像素組件+圖標(biāo)庫）

官方文檔（官網(wǎng)） ：https://pxlkit.xyz/

GitHub：https://github.com/joangeldelarosa/pxlkit

適用技術(shù)棧：React / Next.js

風(fēng)格：兼顧復(fù)古像素感與3D效果實(shí)用性，可適配多種像素風(fēng)項(xiàng)目場景。主要是該組件的像素風(fēng)還不像老式的像素風(fēng)，更像高清版像素風(fēng)??我確實(shí)很喜歡

pxlkit.png

5. 8bitcn（像素風(fēng)資源站）

官方文檔（官網(wǎng)） ：https://www.8bitcn.com/

GitHub：https://github.com/TheOrcDev/8bitcn-ui

適用技術(shù)棧：React

風(fēng)格：純像素游戲街機(jī)風(fēng)，聚焦8-bit復(fù)古游戲視覺風(fēng)格。

8bitcn.png

6. RetroUI（精簡線條復(fù)古+Next.js友好）

官方文檔（官網(wǎng)） ：https://retroui.dev/

GitHub：https://github.com/logging-studio/retroui

適用技術(shù)棧：React + TailwindCSS

風(fēng)格：精簡復(fù)古風(fēng)格，融合現(xiàn)代簡約設(shè)計(jì)，摒棄冗余細(xì)節(jié)，兼顧復(fù)古感與實(shí)用性，適配現(xiàn)代Web開發(fā)場景。

retroUI.png

7. Neobrutalism Components（新粗野主義=精簡復(fù)古）

官方文檔（官網(wǎng)） ：https://www.neobrutalism.dev/docs

GitHub：https://github.com/rikschennink/neobrutalism-components

適用技術(shù)棧：React / Next.js

風(fēng)格：新粗野主義風(fēng)格，屬于精簡復(fù)古的一種，繼承粗野主義的粗獷、原始美學(xué)，結(jié)合現(xiàn)代排版與動(dòng)畫標(biāo)準(zhǔn)，視覺沖擊強(qiáng)。很像動(dòng)漫??

neo.png

二、其他復(fù)古風(fēng)格 · 經(jīng)典老庫（基本無限制）

1. 98.css（Win95/Win98 復(fù)古風(fēng)格）

官方文檔（官網(wǎng)） ：https://jdan.github.io/98.css/

GitHub：https://github.com/jdan/98.css

風(fēng)格：還原Windows 95/Windows 98經(jīng)典系統(tǒng)界面風(fēng)格，復(fù)古懷舊，自帶年代感。

2. XP.css（Windows XP 復(fù)古風(fēng)格基本都是純css）

官方文檔（官網(wǎng)） ：https://botoxparty.github.io/XP.css/

GitHub：https://github.com/botoxparty/XP.css

風(fēng)格：復(fù)刻Windows XP系統(tǒng)經(jīng)典界面風(fēng)格，還原XP系統(tǒng)的窗口、按鈕等視覺特征，懷舊感拉滿。

3. 7.css（Windows 7 Aero 毛玻璃風(fēng)格）

官方文檔（官網(wǎng)） ：https://khang-nd.github.io/7.css/

GitHub：https://github.com/khang-nd/7.css

風(fēng)格：還原Windows 7系統(tǒng)Aero毛玻璃風(fēng)格，主打透明窗口、玻璃質(zhì)感，兼具復(fù)古與精致感。

4. System.css（復(fù)古 Mac OS 風(fēng)格）

官方文檔（官網(wǎng)） ：https://sakofchit.github.io/system.css/

GitHub：https://github.com/sakofchit/system.css

風(fēng)格：經(jīng)典復(fù)古Mac OS風(fēng)格，以黑白配色為主，還原早期Mac系統(tǒng)的窗口、菜單等視覺設(shè)計(jì)，簡約且有年代感。

5. PaperCSS（手繪/草稿風(fēng)）

官方文檔（官網(wǎng)） ：https://www.getpapercss.com/

GitHub：https://github.com/papercss/papercss

風(fēng)格：手繪、草稿風(fēng)格，模擬手寫草稿的筆觸與質(zhì)感，視覺活潑，自帶隨性、自然的復(fù)古感。

三、選型總結(jié)（推薦這3個(gè)）