AI 写前端一股塑料味，这 10 个 GitHub 仓库在改它

AI 生成界面最容易暴露的地方，是页面一打开就有股塑料味。代码能跑，布局也齐，但每个标题上都挂一个小眉题，每个按钮都弹一下，配色像同一个模板换皮。

AmirMušić 在推文里列了 10 个 GitHub 仓库，给 AI 设计/动效工作室用，合计 140K+ stars。这些仓库大多是给 AI 编程助手用的 skill 包，不是传统前端库。装进 Claude Code、Cursor、Codex 后，助手在生成页面和动效时会先读一套规则。下面按它们解决的问题拆。

Hallmark：先给 AI 设计划一条下限

Hallmark 有 48.5K stars，由 Together AI 制作。它盯的不是让页面更花，是让页面别像 AI 生成。

做法很具体。仓库里有 50 个主题，每个主题是一套材料：纸、字体、颜色、表面、组件、纹理。构建时发三个主题，页面按访客要完成的任务搭。预订页能订，商店能卖，newsletter 能订阅。主题不规定页面里放什么，也不规定顺序，所以同一个主题配两个提示词会得到两个不同页面。

最后还有一道 sloplint。它在真实浏览器里按 8 个宽度检查机器味痕迹：每个标题上方的小眉题、字距拉开的全大写标签、标题里一个彩色词、一页空框或全是照片、hero 超出屏幕、每页底部都放邮箱订阅、表单没发送却显示感谢。Hallmark 把检查分成三层。Floor 从不放行对比度、焦点、减少动效、编造事实、手机布局坏掉。Reflex 是模型默认会掉进去的坑，有理由可以在记录里推翻。Finish 是工艺细节，不阻塞发布。最后还有一个新上下文 reviewer 审。

安装：npx skills add nutlope/hallmark -g。需要 Node 18 以上。浏览器检查和截图还要 npm i -g puppeteer-core 和 Chrome。它也支持 /hallmark redesign <path> 和 /hallmark audit <path>。

emilkowalski/skills：动效品味拆成规则

emilkowalski/skills 有 53.7K stars。作者 Emil Kowalski 在 Vercel 和 Linear 做过设计工程。仓库里写得很直白：agents don’t have great taste。AI 不替代领域知识，它放大领域知识。

它列的坑很小，但会累积。进入动画该用 ease-out，代理会选 ease-in。UI 里该用半透明阴影，代理会选实线边框。这些选择单看都不致命，堆在一个界面里就决定成品是顺手还是粗糙。

这个仓库把动效工作拆成多个 skill：animate 从零搭动画并选曲线、时长、属性；review-animations 按严格规则审动画；improve-animations 扫描代码库并给出按优先级排的计划；find-animation-opportunities 找真正需要动效的位置，也告诉你什么不该动；remove-animations 删掉不需要的动效；choreograph 管多个元素谁先谁后；animation-performance 修掉帧；还有 apple-design、mobile-native、break-ui、pick-ui-library、prototype 等。

安装：npx skills@latest add emilkowalski/skills。

GSAP skills：别让代理编时间线

GSAP skills 有 17.9K stars，是 GreenSock 官方仓库。它解决一个很常见的问题：代理会写 GSAP，但容易编出坏掉的时间线。官方 skill 教它正确的 core API、timeline、ScrollTrigger、plugins、React/Vue/Svelte 用法和性能处理。

GSAP 现在 100% 免费，包括所有插件。Webflow 收购 GSAP 后，原先 Club GSAP 的 SplitText、MorphSVG 等也对所有人免费，商业使用一样。装公共 gsap npm 包即可，不需要会员、.npmrc、auth token 或私有 registry。

安装：npx skills add https://github.com/greensock/gsap-skills。

清单里还有 7 个

• Remotion skills，6.4K stars，官方 agent skills，用 React 生成 MP4。
• Pixel Plays，400 stars，推文作者自己的项目，纯 JS 写等距像素游戏。
• Stageshow，2.1K stars，做假产品 UI 静帧、光标演示、bento 网格。
• threejs-skills，4K stars，Claude skills，锁定 three.js r186 和 R3F。
• LottieFiles motion-design-skill，2.8K stars，管 timing、easing、choreography。
• awesome-gamedev-agent-skills，6.9K stars，77 个游戏开发 skill，带一个路由，覆盖 Godot、Unity、Unreal、three.js。
• claude-motion，840 stars，把品味规则写成数字，还给 coding agent 做 contact-sheet 帧审计。

星数不能代表适配度，但能看出痛点有多普遍。想先解决页面塑料味，装 Hallmark。动效总是差半拍，加 emilkowalski/skills。项目用 GSAP，装官方 skills。别一次全塞，按项目需要来。