小黑盒能做小程序了，推薦幾個開源免費的庫搭配食用

小黑盒上線了小程序工坊，正式開放公測！

不用申請開發者資格，實名認證就能建項目。做完提交審覈，過了就能發佈。從官網進「開放平臺」，再進「小程序工坊」。

官方說能做什麼

遊戲工具、數據查詢、互動體驗。

平臺放開的能力不少。能讀到用戶的 Steam 遊戲庫，能調雲端排行榜做挑戰榜，能在本地存東西。

發佈以後可以在小程序工坊裏看到哦

官方把 AI 這條路鋪好了

官方推薦的開發方式就是讓 AI 幹。

他們給 Codex、Claude Code 這些工具配了個 Agent Skill，跟着 npm 包裝在一起，一條命令裝上。

hb-sdk skill install

裝完 AI 就懂這個平臺的規矩，知道哪些 API 能用、該怎麼調。不像之前古法編程邊試邊做。

文檔站還專門開了一份給 AI 讀的索引，AI 幹活前先去讀一遍，拿到的是最新說法，不是訓練數據裏那些過時記憶。

流程可以是這樣：讓 AI 建項目、寫功能，你負責看效果、提要求、點發布。

界面這塊，得自己搭

我把 SDK 的方法從頭翻了一遍，一共 59 個。

跟界面UI沾邊的只有三個，彈個 Toast，顯示 Loading，關掉 Loading。

按鈕、卡片、表單、列表這些，得自己想辦法。官方模板給了一份基礎樣式，十幾個 CSS 變量加一個居中佈局，起步夠用。你讓 AI 把功能做出來，它跑得通，界面醜得很具體。

所以我推薦幾個UI庫搭配官方SDK就可以做出好看的小程序咯。

一、Tailwind CSS

GitHub 90K Star，是這個領域裏用得最多的一個。裝上就三步。

npm install tailwindcss @tailwindcss/vite

然後在 vite.config.js 裏把插件加進去。

import tailwindcss from '@tailwindcss/vite'

import { miniappManifest } from '@heybox/hb-sdk/vite'

export default defineConfig({

    base: './',

    plugins: [tailwindcss(), miniappManifest()],

})

最後把

src/styles.css 的頭一行換成 @import 'tailwindcss';。

爲什麼排第一個。

它跟官方模板不打架，官方模板本來就是 Vite 項目，Tailwind 的插件也要求 Vite 5 以上，正好對上。它也不碰沙箱的雷，沙箱有 CSP 策略，inline 樣式、eval、wasm 都可能被攔，而 Tailwind 的樣式是構建時生成好的獨立 css 文件。

最重要的是 AI 最會寫它。你大概率不會自己寫代碼，全靠 AI 代勞。AI 見過的 Tailwind 代碼比任何組件庫都多，寫起來準，報錯了也最容易搜到答案。

二、UnoCSS

GitHub 19K Star，跟 Tailwind 一類東西，語法兼容，AI 寫的 Tailwind 代碼它認得。區別是能配的東西更多，適合已經熟悉前端的人。

三、daisyUI

GitHub 42K Star，Tailwind 的插件，裝上之後 Button、Card 這些現成組件直接能用，不用自己拼。代價是多裝一層。

四、Bulma

GitHub 50K Star，一整份獨立的 CSS，不綁框架，也不挑瀏覽器版本。AI 對它沒那麼熟，但兼容性是這批裏最穩的。

五、NES.css

GitHub 21K Star，紅白機像素風，按鈕、對話框、血條全是 8-bit 的樣子。這個調性很對味。

但它那些像素圖標全是內聯的圖片數據，遇上嚴格的 CSP 有可能加載不出來，用前先在真機上跑一遍。

圖標怎麼辦？

上面這些庫都不帶圖標，怎麼辦？

能用 emoji 就別折騰。 零依賴零請求，沙箱裏絕對攔不到。小黑盒本來就是遊戲社區，emoji 不違和。

讓 AI 直接畫。 說要什麼樣，比如「一個向下的箭頭」，讓它寫內聯 SVG 貼進頁面，也是零依賴。

要成套的，去圖標庫複製。 國外的 Lucide 兩千多個，Tabler 六千多個，許可都免費商用。國內就用阿里的 iconfont，量最大，還能自己傳 SVG 進去湊一套，但標了「免費」的纔可商用，設計師個人上傳的那些要看清楚。

三樣別碰。 字體圖標要加載 woff，是外部資源；iconfont 主推的 symbol 方式要引一個 js，運行時往頁面裏注入 SVG；把圖標自動編譯成內聯圖片的方案，原理跟 NES.css 一樣。三個都撞 CSP，容易審覈不通過。

講在最後

Tailwind 挑瀏覽器版本，要 Chrome 111、Safari 16.4 以上。小黑盒小程序是運行在WebView上的。iOS 跟着系統走，問題不大，安卓的 WebView 版本參差，老設備上一定要真機驗一遍。跑不起來就退回 Tailwind 3。

本地預覽不等於真機。官方文檔寫得很明白，生產構建不能當普通網頁直接跑，只能在小黑盒沙箱裏運行。調試臺裏看着好好的，真機上可能兩回事。

發佈有門檻。要實名認證，要審覈，還要把小黑盒更新到 1.3.390 以上纔看得到自己做的東西。分類只能填工具、遊戲或者其他三選一。

喜歡本文，關注、長按點贊一鍵三連

有沒有想法做個小黑盒的小程序？評論區聊聊