Hello，大家好，我是 Sunday。

通過(guò) AI 輔助開(kāi)發(fā)是未來(lái)的大趨勢(shì)，所以今天就為大家推薦 8 個(gè) AI 編程助手（針對(duì)前端方向），大家可以選擇適合的工具，從而大幅提升工作效率！

1. Webcrumbs — 使用 TailwindCSS 即時(shí)生成組件

圖片

官網(wǎng)地址：https://www.webcrumbs.org/frontend-ai

Webcrumbs 的 Frontend AI 是一個(gè) AI 助手，它可以根據(jù)用戶(hù)請(qǐng)求、圖像或屏幕截圖生成 UI 組件的代碼。

這款 AI 工具允許開(kāi)發(fā)人員編寫(xiě)特定的提示、生成 UI 并生成相應(yīng)的 JSX 代碼。代碼會(huì)通過(guò) Tailwind CSS 或常規(guī) CSS 生成的，可以直接復(fù)制并粘貼到我們的項(xiàng)目中。

2. Watsonx Code Assistant — 企業(yè)級(jí)代碼生成和自動(dòng)化工具

圖片

官網(wǎng)地址：https://www.ibm.com/products/watsonx-code-assistant

IBM Watsonx? Code Assistant 是一款由 IBM 提供的生成式 AI 工具，旨在通過(guò)自動(dòng)化和 AI 輔助代碼生成來(lái)提升開(kāi)發(fā)者的生產(chǎn)力，特別是對(duì)于企業(yè)級(jí)的應(yīng)用的開(kāi)發(fā)和維護(hù)?？梢愿采w java 和 前端。

它的主要功能包括：生成代碼、代碼解釋以及自動(dòng)化測(cè)試，并且可以提高代碼質(zhì)量和可管理性。

同時(shí)，它還能夠幫助我們?cè)诠芾砑夹g(shù)債務(wù)較高或文檔不完善的老舊系統(tǒng)時(shí)，通過(guò)自動(dòng)化代碼轉(zhuǎn)換和運(yùn)行時(shí)優(yōu)化，減少開(kāi)發(fā)過(guò)程中的風(fēng)險(xiǎn)和成本。

3. Coderabbit — 團(tuán)隊(duì)代碼生成和錯(cuò)誤檢測(cè)

圖片

官網(wǎng)地址：https://coderabbit.ai/

這是一個(gè)非常獨(dú)特的工具它是 GitHub 和 GitLab 上安裝最多的 AI 應(yīng)用程序，已審核超過(guò) 300 萬(wàn)個(gè)拉取請(qǐng)求，并有 50 多萬(wàn)個(gè)存儲(chǔ)庫(kù)正在審核中。

圖片

Coderabbit 是一款為團(tuán)隊(duì)提供的 AI 代碼審查工具。它可以通過(guò)生成 AI 驅(qū)動(dòng)的上下文反饋并更快地發(fā)現(xiàn)可能已進(jìn)入生產(chǎn)環(huán)境的錯(cuò)誤來(lái)幫助縮短代碼審查時(shí)間。

它首先會(huì)匯總所做的更改，并將其分解為易于理解的要點(diǎn)。

然后，它會(huì)生成拉取請(qǐng)求的技術(shù)演練，其中包含更改的完整詳細(xì)信息。

它能夠建議可能相關(guān)的問(wèn)題，并提供更改的流程圖。Coderabbit 會(huì)審查你的代碼更改，并在 GitHub 或 GitLab 上的代碼審查中為你提供“一鍵式”解決方案。

圖片

4. v0.dev — 使用 React 和 TailwindCSS 進(jìn)行智能 UI 合成

圖片

官網(wǎng)地址：https://v0.dev/chat

Vercels的 AI 團(tuán)隊(duì)創(chuàng)建的一款前衛(wèi)的 AI 助手，專(zhuān)門(mén)針對(duì)前端開(kāi)發(fā)人員，主要關(guān)注：React、Next.js App Router 和現(xiàn)代 Web 開(kāi)發(fā)實(shí)踐。

雖然它目前處于公開(kāi)測(cè)試階段，但它旨在通過(guò)提供清晰的編碼解決方案和解釋來(lái)模擬高級(jí)開(kāi)發(fā)人員的工作內(nèi)容

5. CodeParrot — 通過(guò) AI 完成 UI 組件的設(shè)計(jì)和代碼

圖片

官網(wǎng)地址：https://codeparrot.ai/

CodeParrot 是一個(gè) vscode 插件，它使用 AI 將 Figma 組件或屏幕截圖轉(zhuǎn)換為代碼。同時(shí)提供了使用 GitHub 或 Figma 登錄的選項(xiàng)。Figma 登錄選項(xiàng)可讓您直接在 Vscode 中瀏覽 Figma 文件中的組件。

它支持多種編程語(yǔ)言和框架，包括開(kāi)箱即用的支持、React、Tailwind 和 TypeScript。

我們可以從VS Code 市場(chǎng)安裝 CodeParrot 插件。

6. MutableAI — AI 文檔編寫(xiě)

圖片

官網(wǎng)地址：https://mutable.ai/

Mutable AI 可以幫助我們編寫(xiě)代碼文檔。當(dāng)我們將代碼推送到存儲(chǔ)庫(kù)時(shí)，Mutable AI 將為我們的存儲(chǔ)庫(kù)編寫(xiě)一篇百科文章。這篇文章使用圖表和引文記錄我們的存儲(chǔ)庫(kù)，直接指向代碼倉(cāng)庫(kù)。

7. ellipsis.dev — Pull 請(qǐng)求審核和代碼生成

圖片

官網(wǎng)地址：https://www.ellipsis.dev/

Ellipsis 可以在 GitHub 上直接審查拉取請(qǐng)求（具體基于邏輯正確性）、創(chuàng)建發(fā)布說(shuō)明和修復(fù)錯(cuò)誤。

如果提交代碼時(shí)經(jīng)常忘記為拉取請(qǐng)求添加描述，或者不知道每次提交要添加什么內(nèi)容，那么可以使用 Ellipsis 完成這些工作。

它還允許您添加規(guī)則（使用自然語(yǔ)言）來(lái)規(guī)定 Ellipsis 在審查代碼時(shí)應(yīng)檢查的內(nèi)容。

8. Jam.dev — 一鍵報(bào)告錯(cuò)誤

圖片

官網(wǎng)地址：https://jam.dev/

Jam 是一款瀏覽器擴(kuò)展程序。只需單擊兩次，就可以直接生成報(bào)告錯(cuò)誤。它會(huì)自動(dòng)包含導(dǎo)致錯(cuò)誤發(fā)生的最后 30 秒、網(wǎng)絡(luò)請(qǐng)求以及有關(guān)的會(huì)話的所有元數(shù)據(jù)（包括網(wǎng)絡(luò)速度）。然后，當(dāng)我們想要修復(fù)錯(cuò)誤時(shí)，他就會(huì)獲得有關(guān)錯(cuò)誤的完整信息，并可以快速找出問(wèn)題所在并輕松修復(fù)它。

Jam 是第一個(gè)專(zhuān)門(mén)為報(bào)告錯(cuò)誤而設(shè)計(jì)的屏幕錄像工具，它可以與所有問(wèn)題跟蹤軟件配合使用，包括 Jira、Linear、Asana 等。