今天開(kāi)始放假了，估計(jì)年后初七八開(kāi)始正式工作。那過(guò)年這段時(shí)間，簡(jiǎn)單分享一些我平時(shí)用到的工具、或者素材。

比如今天這篇文章，分享一份我一直在用的免費(fèi)前端組件樣式。

鏈接：https://21st.dev/

首先，這份組件庫(kù)的內(nèi)容很全，基本網(wǎng)頁(yè)上需要用到的元素都有包含到。無(wú)論是頁(yè)面頂部的 Hero 區(qū)域，還是頁(yè)面底部的 CTA 區(qū)域，都有非常多的組件樣式供我們選擇。

經(jīng)過(guò)我這段時(shí)間的深度體驗(yàn)，發(fā)現(xiàn)很多頁(yè)面上的元素都能在這個(gè)網(wǎng)站上找到。而需要我們做的，就是先定義好版面上的各個(gè)樣式，并做好相應(yīng)記錄，然后逐一去找需要用的樣式組件即可（類(lèi)似于搭積木），非常方便。

然后，當(dāng)我們選擇某個(gè)組件后，可以直接拷貝相應(yīng)的代碼到我們自己的項(xiàng)目里。

比如我最近在做一個(gè)產(chǎn)品屬性配置的頁(yè)面，過(guò)程中需要使用到表格組件。那直接去這個(gè)網(wǎng)站找到表格相應(yīng)的組件，看看是不是與自己的項(xiàng)目適配便可以了。

如果覺(jué)得風(fēng)格一致，那便可以直接拷貝右側(cè)的代碼放進(jìn)自己的項(xiàng)目中。

當(dāng)然，有可能會(huì)出現(xiàn)組件的編程語(yǔ)言與我們項(xiàng)目使用的編程語(yǔ)言不一致的情況。而要想解決這個(gè)問(wèn)題也比較簡(jiǎn)單，直接借助 AI 的能力便可以了。

比如還是上面這份代碼，我直接喂給 AI，然后讓 AI 參考風(fēng)格樣式，輸出一份我們所需要的代碼。

甚至可以的話(huà)，多收集一點(diǎn)數(shù)據(jù)一并投喂給 AI 模型，讓其根據(jù)我們所需的風(fēng)格進(jìn)行自定義輸出，而這些操作都不是很難。

那有了這些組件的幫助，完整開(kāi)發(fā)出一個(gè)功能完善的頁(yè)面，便不再是什么難事了。