小黑盒能做小程序了，推荐几个开源免费的库搭配食用

小黑盒上线了小程序工坊，正式开放公测！

不用申请开发者资格，实名认证就能建项目。做完提交审核，过了就能发布。从官网进「开放平台」，再进「小程序工坊」。

官方说能做什么

游戏工具、数据查询、互动体验。

平台放开的能力不少。能读到用户的 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 以上才看得到自己做的东西。分类只能填工具、游戏或者其他三选一。

喜欢本文，关注、长按点赞一键三连

有没有想法做个小黑盒的小程序？评论区聊聊