大家好，又見面了，我是 GitHub 精選君！
背景介紹網頁設計和開發是一個不斷進化的領域，設計師和前端開發者們經常面臨一個共同的挑戰：如何快速、高效地將概念化的設計草圖轉化爲實際可用的 HTML 代碼。這一過程不僅耗時而且容易出錯，尤其是在將複雜的設計想法具體實現時。在初步設計階段，往往需要頻繁地修改和調整，如果每一次修改都需要手動編寫代碼，無疑會大大拖慢項目的進度，增加項目成本。
今天要給大家推薦一個 GitHub 開源項目 SawyerHood/draw-a-ui，該項目在 GitHub 有超過 12.9k Star。
一句話介紹該項目：Draw a mockup and generate html for it
項目介紹draw-a-ui 項目基于 tldraw 和 gpt-4-vision api，旨在通過用戶繪制的線框圖自動生成 HTML 代碼。用戶只需繪制一個模擬界面的草圖，draw-a-ui 就能將其轉換爲配備 Tailwind CSS 的 HTML 文件，極大縮短從設計到開發的時間。項目目前尚處于開發階段，但核心功能——將繪圖畫布的 SVG 轉換爲 PNG，再將該 PNG 傳送給 gpt-4-vision 以指令形式返回單個 HTML 文件——已經完善。
如何使用首先，需要有一個 OpenAI API 密鑰，並確保它有訪問 GPT-4 Vision API 的權限。只需按照以下步驟操作即可輕松設置和運行 draw-a-ui:
1、克隆項目到本地
2、在項目的根目錄下創建 .env.local 文件，並添加您的 OpenAI API 密鑰
3、安裝依賴並啓動項目
4、通過浏覽器打開 http://localhost:3000 查看結果。
echo "OPENAI_API_KEY=sk-your-key" > .env.localnpm installnpm run dev項目推介盡管目前 draw-a-ui 項目標注爲演示用途，並不建議在生産環境中直接使用，但其背後的理念和技術實現無疑展現了未來開發的趨勢。該項目利用最新的人工智能技術（如 GPT-4），爲前端開發帶來了革命性的工作模式改變。
以下是該項目 Star 趨勢圖（代表項目的活躍程度）：
更多項目詳情請查看如下鏈接。
開源項目地址：https://github.com/SawyerHood/draw-a-ui
開源項目作者：SawyerHood
以下是參與項目建設的所有成員：
關注我們，一起探索有意思的開源項目。
