设计师工程师的 AI 外挂来了
设计师工程师的 AI 外挂来了
你有没有过这种崩溃时刻？Claude Code 写代码写得飞起，一到 UI 设计就拉胯——排版乱、配色丑、组件间距全靠缘分。说白了，大模型懂逻辑，但真的不懂审美。
今天给你挖到一个刚冲上 GitHub Trending 的项目：ibelick/ui-skills，一天涨了 242 颗星，目前总星 4,970。作者 ibelick 专门给 Design Engineer 做了一套 Claude Skills，教 AI 做真正能看的界面。
它到底干了什么？
这套 Skills 的核心思路很直接：把「好设计」拆解成 AI 能理解的规则，塞进 Claude Code 的上下文里。不是让 AI 「尽量好看一点」，而是让它按设计工程的标准输出。
具体覆盖的方向包括：
- 视觉一致性：颜色系统、间距尺度、字体层级
- 组件设计：按钮、表单、卡片的状态与交互
- 响应式布局：移动端到桌面端的断点与排版
- 可访问性：对比度、焦点管理、语义化结构
为什么值得装？
以前 Claude Code 生成的 UI 代码，review 起来全靠人工审美救场。装了 ui-skills 之后，AI 输出的第一版就能达到「能直接交差」的水准——不是说完美，而是至少不会让你看到一半想删掉重写。
对前端工程师来说，这意味着省掉了大量「告诉 AI 这里要留白、那里要圆角」的废话。对独立开发者来说，这意味着你一个人也能产出像模像样的产品界面。
怎么用？
直接 clone 到你的 Claude Code skills 目录就行。项目地址在这里：https://github.com/ibelick/ui-skills。适合搭配 Anthropic 官方的 frontend-design skill 一起用，效果更炸。
如果你也在用 Claude Code 做前端项目，这个 repo 值得立刻 star。毕竟能让 AI 「审美在线」的技能，在 2026 年这个时间点，比任何框架教程都值钱。
评论区
0 条评论
登录后可评论。