用 AI 重塑 ScriptWidget，更轻松的创建小组件

2021 年，我做了一个叫 ScriptWidget 的 App，让人可以用 JavaScript 写 iPhone 小组件。后来项目做做停停，还下架过一段时间。这是当时的发布文章 https://sspai.com/post/65435

最近我又（让AI）把它捡起来，有了AI的存在，就可以大胆实现之前曾经没有时间做的事情。现在可以在 iPhone、iPad 和 Mac 上使用，也可以打开 Web Studio，在浏览器里写代码、调布局、看预览。如果你平时用 Coding Agent，还可以让它按 ScriptWidget 的规则生成组件，再用工具检查。

从一块桌面小组件开始

我想在手机桌面上放一点自己关心的东西：倒计时、一句话、一张图片，或者接口返回的几行数据。ScriptWidget 就是从这个念头开始的。

为了这么一小块界面去建原生工程、写 Swift、编译安装，我总觉得准备工作比做组件本身还多。于是我用 JavaScript 和 JSX 做了一层接口：用代码描述文字、图片和布局，ScriptWidget 再把它渲染成原生小组件。写过 React 的人会觉得 JSX 眼熟。ScriptWidget 用的是自己的组件和 API，桌面上显示的是原生小组件。

第一个组件做出来以后，麻烦才慢慢冒出来。编辑器要能保存代码，脚本要在系统允许的时间内跑完，图片、权限、iCloud、不同尺寸的布局都要处理。App 里预览得好好的，放上桌面可能又是另一回事。做出基本功能以后，我有一段时间一直在修这些问题，越修越觉得维护不动，项目也曾下架。

让 AI 继续维护 ScriptWidget

这几年 AI 写代码进步很快。以前总被我拖到后面的文档、测试和兼容问题，现在能一件件推进了。

一个功能做完界面，还得写文档、准备例子、处理错误、兼容旧数据、在几个平台上测试。过去我常常把最显眼的部分做出来，后面的事情却排着长队。现在可以让 AI 帮我读旧代码、梳理调用关系、起草实现和测试，我再去检查、修改、在设备上跑。Web Studio、可视化编辑、CLI 和 Skill，就是这样一点点补起来的。

AI 生成的代码还得在设备上检查。最近我们在真机上跑了 iCloud、组件选择、打卡记录、导入导出这些流程。问题该复现还得复现，桌面上的效果也得亲眼看。以前压着没做完的事，现在有余力接着做了。

现在可以在浏览器里写小组件

Web Studio 可以直接在浏览器里写和预览小组件，不用先装 Xcode，也不用把手机连到电脑上。Windows、Mac、Linux 和 iPad 都可以用。

Web Studio : https://xnu.app/scriptwidget/studio/

左边是文件，中间写代码，右边看小组件。可以复制阅读热力图模板，把标题改成“每天读书”，换一种颜色，再分别看看小号、中号、大号放不放得下。觉得太空，就加上连续天数或今天的状态。每改一次，右边马上能看见结果，不必重新编译 App。

在 Layout 里改布局

Layout 会把能识别的界面结构显示成图层树；选中文字改文案，选中元素调颜色、字体、间距和对齐，容器里的元素也能增减、换顺序。

一张卡片上面写“今天”，中间是一句提醒，下面是日期。你可以把提醒换成自己的话，字号调大，再把日期移到右边。改动会写回 JSX；要写条件判断、循环或处理动态数据，切回代码就行。目前 Layout 处理的是它能识别的布局和静态属性，复杂 JavaScript 仍然要自己写。

Theme 可以调配色、字体和间距，Assets 可以插入图片等资源。AI 生成初稿后，还可以在这里继续调整。

用 Mock Data 试空数据和错误状态

做数据卡片时，我常想看看“没数据”或“请求失败”是什么样。没必要为了预览去删自己的记录，或者等接口碰巧出错。Web Studio 的 Mock Data 允许你填一份模拟响应。健康卡片可以先放示例步数，网络卡片可以分别试正常、空列表和错误状态。

浏览器预览方便随时看界面。装到手机之后，真实数据仍需要对应 API、权限或服务配置；桌面上的外观和刷新也要以苹果系统的实际表现为准。

从现成模板改起

我给 ScriptWidget 做了不少模板。打开编辑器就有现成的组件可以改。

热力图可以用来记录读书、跑步、练琴、拉伸，每天完成一次就点亮一个格子。Habit Heatmap 会保存打卡，连续天数也会跟着变化。Reading Goal 可以改成读书进度卡；把 Countdown 的日期换掉，就能用来数考试、生日或旅行还有多少天。

还有一些很小的日常记录：喝水时点一下、给今天选一个心情、记下植物上次浇水的时间。它们不需要复杂的数据接口，适合拿来试着改标题、颜色和交互。

GitHub 仓库统计、天气、健康概览和日程模板用来显示外部信息。可以先用模拟数据调布局，再到设备上接入需要的接口或系统权限。健康数据只能在支持的 iOS 设备上授权读取，网页预览不会去读你的健康 App。

Quick Launcher 可以放常用链接，水族箱能给桌面添点乐趣。WidgetKit 对刷新和动画有自己的限制，最后还是要装到桌面上看看。

模板可以拆开重组。把天气、今天的安排和阅读打卡入口放在一起，是一张早晨卡片；把发布倒计时和仓库信息放在一起，是一张项目卡片。这两张卡片目前未必有现成模板，可以把需求交给 AI 来做。

我给 Coding Agent 做了一个 Skill

很多人已经在用 Claude Code 之类的 Coding Agent。我做了一个 scriptwidget-creator Skill，让已有的 Agent 也能按 ScriptWidget 的规则写小组件。

Skill 里写了 ScriptWidget 的 JSX、API、组件包结构、权限声明和校验命令。你可以继续用自己熟悉的 Agent 和模型；如果原来的服务收费，费用仍按那个服务计算。

Claude Code 用户可以下载压缩包，把完整的 scriptwidget-creator 文件夹放到 ~/.claude/skills/。文件夹里的 references 等文件也要一起保留。

Skill 安装说明 : https://xnu.app/scriptwidget/creator/

Skill 下载 : https://github.com/everettjf/scriptwidget/releases/download/cli-v0.2.0/scriptwidget-creator-0.2.0.zip

可以这样提需求：

/scriptwidget-creator 做一个中号阅读打卡组件，标题叫“每天读书”，浅色背景、绿色热力图。先用明确标注的示例数据预览，保留真实打卡能力。校验后在 Web Studio 打开，并导出 .swt 文件。

已有的组件也可以交给它改：检查小号布局里会不会截断长标题，试试接口没数据时的样子，或者只改配色和字体、不动原有功能。生成完先看预览，再检查诊断，哪里不对就接着改。

Mac 上的命令行工具

Mac 用户可以通过 Homebrew 安装 scriptwidget-cli。它能检查组件包和代码、生成原生 Mac 预览、导出 .swt。运行 scriptwidget preview ./MyWidget，还能打开 Web Studio，直接加载刚生成的组件。当前原生 CLI 要求 macOS 26 或更高版本。