ARTICLE · 1338046

AI 生成 App UI 不难,这款设计 Skill 生成 App UI 有规范!

发布时间：2026-11-10 09:53:19 最近访问：2026-11-10 09:53:19

在 agent 里打一句话，拿回能交付的设计：网页 / App 原型 / 可编辑 PPTX / 动画 / 信息图 · 六个候选挑三个方向 · 84 种带样张的风格库 · 越用越懂你的外观账本与设计体检 ·

星宿 UI 目前处于准备更新阶段，这段时间我一直在思考：搁置许久，是时候对页面 UI 进行一次重设计，慢慢打磨新版本。当下 AI 热潮正盛，不借助它产出几套版面方案实在可惜。市面上同类 AI 设计插件数量繁多，我的需求很朴素，希望找到一款门槛低、小白也能直接上手的。

之前优化项目时体验过一次这个工具。它可以遵循预设规范输出设计稿，具备基础设计体系，风格偏向大众向，设计逻辑规整。但上一轮 AI 生成的方案最终没有通过审核，后续我花了两天手工完成半版设计才过稿。话不多说，一起来看看这次用它重绘星宿 UI 的成果。

目前感觉还是得自己画

PART

效果

PART

安装

可以直接丢个给ai

npx skills add alchaincyf/huashu-design

装完先自检：这个 skill 不只是 SKILL.md 一个文件，references/、assets/、scripts/、demos/ 四个子目录里有 99 处被引用的配方、脚本、素材，缺一不可。装完看一眼安装目录（如 ~/.claude/skills/huashu-design/），如果只有 SKILL.md、没有那几个子目录，说明你的 skills CLI 版本太旧（≤1.5.15 有个只同步单文件的 bug，已在 1.5.19 修复）。升级后再装一次即可：

npm i -g skills@latest        # 或 npx skills@latest add alchaincyf/huashu-design

PART

能做什么

能力	交付物	典型耗时
交互原型（App / Web）	单文件 HTML · 真 iPhone bezel · 可点击 · Playwright 验证	10–15 min
演讲幻灯片	HTML deck（浏览器演讲）+ 可编辑 PPTX（文本框保留）	15–25 min
时间轴动画	MP4（25fps / 60fps 插帧）+ GIF（palette 优化）+ BGM	8–12 min
设计变体	3+ 并排对比 · Tweaks 实时调参 · 跨维度探索	10 min
信息图 / 可视化	印刷级排版 · 可导 PDF/PNG/SVG	10 min
小红书图文 / 封面	3:4 一组图（≤18 张）· 8 种范式模板 · 长卷连续滑动 · 一条命令切图并体检	10–15 min
设计方向顾问	三套逻辑各出两个候选（最佳设计师 + 同媒介获奖作品 + 秒数轮盘）· 六张缩略图挑三版真实视觉，另三张作备选	10 min
5 维度专家评审	雷达图 + Keep/Fix/Quick Wins · 可操作修复清单	3 min