5个让AI写的页面变好看的Skill，不用自己调样式

AI写代码快，但写出来的页面往往不好看。按钮乱放、颜色刺眼、间距不均匀，一眼就能看出来是AI做的。这不是AI的问题，是它不知道什么叫“好看”。

这几个Skill能解决这个问题。装了之后，AI生成页面的时候会按设计规则来，出来的效果跟你手动调过一样。

taste-skill

这是现在GitHub上最火的前端设计Skill之一。作者是个设计工程师，项目已经涨到五万多星。

装法很简单，就一行命令：

npx skills add https://github.com/Leonxlnx/taste-skill

装完之后，AI生成的页面会有明显变化——有设计语言了，不再随便堆组件；间距、色板、字体层级都有规则；动效也更自然，不会乱闪。

里面还分了好几个子Skill，按需取用就行。

这个Skill适合想快速让页面变好看的人。轻量，装完就能用，效果立竿见影。

项目地址：https://github.com/Leonxlnx/taste-skill

UI-UX-Pro-Max Skill

如果说taste-skill是轻量优化，那这个就是完整的设计系统包。它覆盖了从需求到原型到代码的全部流程，里面有现成的设计系统、组件规范、交互规则，还有完整的色板、间距、字体、动效参数。

装完之后，AI生成的不只是页面，是符合完整设计规范的产品级界面。适合做完整的商业项目，不用自己再从零搭设计系统。

优点是全面，生成出来的页面风格统一，不会每个页面都不一样。缺点是比taste-skill重，小项目用有点大材小用。学习成本也稍高，要先理解里面的设计规则。

项目地址：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

Shadcn UI Skill

如果你的项目已经在用Shadcn UI组件库，那这个Skill可以直接装。生成出来的页面直接用Shadcn的组件，不用自己再改。

它把Shadcn的所有组件规范、样式规则都写进了提示词里，AI生成的时候按Shadcn的标准来，出来的效果跟你手动写的一模一样。

优点是和Shadcn生态完美适配，生成的代码可直接用，不用二次修改。缺点是只适合用Shadcn的项目，用其他组件库的要手动改。

安装：

npx skills add shadcn/ui

项目地址：https://github.com/shadcn-ui/ui

Aceternity Skill

适合做营销页、产品官网、落地页这些需要视觉冲击力的场景。它把Aceternity的所有动效组件和高级视觉规则都写进了提示词。生成出来的页面有毛玻璃效果、滚动动效、悬停交互，直接能达到上线标准。

Aceternity UI是一个React组件库，里面有100多个带动画的组件，专门给Next.js用的。

优点是视觉效果拉满，适合做营销类页面，动效自然不浮夸。缺点是不适合做后台管理系统这类需要克制风格的项目，文件稍大。

项目地址：https://ui.aceternity.com/

Awesome-design-md

这是VoltAgent维护的一个设计资源合集。里面收集了几十个知名网站的设计系统，都写成了DESIGN.md格式。

DESIGN.md是Google Stitch提出的一种格式。就是一个纯文本的Markdown文件，AI读了之后就知道页面应该长什么样。把这个文件放進项目里，告诉AI“按这个风格做”，出来的页面就跟那个网站的风格一样。

Vercel、Linear、Stripe、Supabase、Notion这些常见开发者工具网站的设计规范都在里面。

优点是资源全，覆盖各种设计场景，免费开源。缺点是装完不能直接用，需要自己挑合适的DESIGN.md放進项目。适合有一定设计基础的人。

项目地址：https://github.com/VoltAgent/awesome-design-md

怎么选

想快速让现有页面变好看，立马看到效果，选taste-skill。

做完整的商业项目，需要全套设计系统，选UI-UX-Pro-Max Skill。

项目已经用了Shadcn UI，选Shadcn UI Skill。

做营销页、产品官网，要酷炫效果，选Aceternity Skill。

想参考大厂的设计风格找灵感，选Awesome-design-md。