本帖使用社区开源推广，符合推广要求。我申明并遵循社区要求的以下内容：
* 我的帖子已经打上 开源推广 标签： 是
* 我的开源项目完整开源，无未开源部分： 是
* 我的开源项目已链接认可 LINUX DO 社区： 是
* 我帖子内的项目介绍，AI生成、润色内容部分已截图发出： 是
* 以上选择我承诺是永久有效的，接受社区和佬友监督： 是
以下为项目介绍正文内容，AI生成、润色内容已使用截图方式发出
自己给小项目设计 UI 的方式一直是给 AI 一句话许愿：「帮我这个项目做一个 Web UI」。抽出来的多半是很有 AI 特色的稀碎设计。偶尔抽到看得过去的，微调又成了困难：说一句「卡片收紧一点」，它会把整块重写一遍，原来已经对的地方又被改坏了。拿截图去评审也一样，弹窗、空状态、暗色模式都看不到，只能凭想象拍板。
ui-design-iteration 是一个 agent skill，用来提高这种许愿的成功率。
1. 抄！
先根据项目需求列出要放的内容，再从 shadcn/ui、Tremor、Astro themes 这类来源挑两三个参考，并说明为什么选它们。最后由你拍板，剩下的就是等抽卡。
也可以自己提供一个链接，或和其他前端设计 skills 搭配使用，例如 claude frontend design、ui ux pro max 等。
天下文章一大抄，抄就完了！
挑定参考后，agent 先把它的设计语言写下来，包括字体、圆角、阴影、图片的节奏，以及它最有辨识度的那几个细节。然后用这套语言承载你的真实内容。有源码就直接复制源码，只有截图时才照着重建。
起草好之后，AI 再按本 skill 的要求套上 draft kit，并启动一个后台服务进程。
2. 改！
交付物是一个静态 HTML 草稿，不需要构建，打开就能预览。页面上该有的东西都在：菜单能展开，对话框能打开。页面右下角浮着一个小工具条（draft kit），不占页面宽度，可以拖到任意一个角。
点选元素，直接写意见。 按 P 进入点选模式，点中任意元素，旁边会弹出输入框。框里已经带好这个元素的选择器、所属组件和文字对比度，写一句话按回车就行。
一次标好几处。 每条备注都会编号钉在页面上。agent 从 selection.json 读这些标记，拿到的是精确的选择器和计算值，不用再猜「左边那个按钮」指的是哪个。
{ "n": 1, "note": "数字太挤了，和上面的标签拉开一点",
"target": "[data-node=\"kpis/card#2\"] > div:nth-child(1) > div:nth-child(2)",
"component": "kpis/card#2", "levers": ["spacing", "radius"],
"computed": { "font-size": "30px", "font-weight": "600", ... },
"contrast": { "ratio": 16.48, "required": 3, "passes": true } }
拖滑杆调设计参数（lever），每一轮都审计。 圆角、密度、字号这些风格变量被收进一组 lever，拖动滑杆整页同步变化。审计按钮会统计这一屏用了几种圆角、几种阴影、几档字号，以及有几处对比度不达标，这些数字就是「像不像拼出来的页面」的判据。
平时看不到的界面也能评审。 空状态、加载中、暗色、对话框、详情抽屉，在 states 菜单里一键切换，再点一下就关掉。
每一轮只动一个维度，比如密度、层次或颜色，并且事先说好允许改哪几个 lever。评审时只看这次的 diff，避免 AI 又随手乱改。收工前，在每个状态、每个评审宽度下跑一遍审计和可访问性检查，最后卸掉 draft kit 定稿。
附带的代码只有零依赖的 draft-kit.js 和一个只用 Python 标准库的小服务。
用！
skill 产出的是普通的 HTML/CSS/JS 草稿。要迁移到其他框架里（比如我常用的 templ），就靠 AI 自己发挥了。
npx skills add https://git.nite07.com/nite/skills.git -g -s ui-design-iteration