哈喽，我是大鹏，这里是第二灵感库。

最近很多设计师开始用AI做落地页、作品集和产品原型。

但最让人崩溃的不是它不会写代码，而是你明明说了“高级一点、简洁一点、动效自然一点”，它改完以后却还是熟悉的渐变大标题、三张圆角卡片，再配一个到处乱飞的光球。

问题不一定是AI没有审美，而是我们的要求对它来说太模糊。

“高级”不是设计参数，“有感觉”也不是组件名称。想让AI做出真正像设计过的页面，至少要给它四样东西：**准确的术语、明确的设计规范、可参考的视觉机制，以及能落地的细节组件。**

这一期整理的6个网站，刚好能把这四个缺口补上。

---

01 NameThatUI：先把“那个东西”叫对名字

网址：https://namethatui.com/

你有没有遇到过这种情况：

想让AI做一个弹窗背后的半透明黑层，却不知道它叫Backdrop还是Overlay；想要“文字太长时后面变成三个点”，只会描述成“别让它超出去”；想做轮播图下面那排圆点，也不知道该用什么词。

NameThatUI像一本可视化的UI词典。你可以直接用很口语、甚至不太准确的英文描述一个界面元素，它会返回更标准的名称、相关的API或语义标记，并给出可以继续交给编码助手的描述。

它真正解决的不是“查单词”，而是设计与开发之间的翻译问题。

比如，不要只对AI说：

> 弹窗出来时，后面加一层半透明的黑色。

可以改成：

> 为Modal Dialog添加Scrim（Backdrop）。背景层覆盖整个视口，降低底层内容对比度，但保留页面层级感；弹窗关闭时同步淡出。

后一种说法包含了组件名称、作用范围、视觉目标和状态变化，AI生成结果通常会稳定很多。

目前网站同时覆盖Web和macOS界面元素，也整理了不少容易混淆的概念，例如Modal、Drawer与Sheet，Popover、Dropdown与Tooltip，以及Skeleton与Spinner的区别。

适合谁：经常要和AI、前端沟通，但脑中有画面、嘴上说不出专业名称的人。

不适合谁：想直接下载完整组件或生成整套页面的人；它首先是一部词典，不是组件库。

大鹏说：以后向AI提需求，先检查句子里有没有“那个、类似、感觉、高级”这类词。出现得越多，AI自由发挥的空间越大。

---

 02 Arlan's Vault：把“有冲击力”拆成具体视觉机制

网址：https://www.arlan.me/vault

会说组件名称以后，还要解决第二个问题：你想要的视觉感觉，到底是怎么形成的？

Arlan's Vault收集的不是常规网页截图，而是一组可以直接观察和体验的视觉实验。例如Liquid UI、Kinetic Typography、Chromatic Glow、Realistic Emboss、Gradient、Hover Button等。

这些案例的价值，在于它们把抽象风格拆成了具体机制：

• 两张卡片靠近时，连接处如何向内弯曲；
• 字形怎样被切成网格，再沿不同波形错位；
• 光晕是单纯模糊，还是同时包含色彩扩散和亮度变化；
• Hover反馈究竟改变位置、形状、颜色，还是改变元素之间的关系。

当你只说“做得更有冲击力”，AI往往会加大字号、提高饱和度、塞进更多动画。但如果你能指出“使用Kinetic Typography，让字形网格沿波形产生分段位移”，结果就会具体得多。

网站底部标注MIT许可并写明可自由复制，但实际使用时仍建议保留许可声明，同时不要把别人的完整作品包装成自己的原创设计。

适合谁： 做品牌站、活动页、作品集首页，希望找到一个明确视觉记忆点的人。

不适合谁：只需要成熟后台组件，或者项目对动效性能极其敏感的人。

大鹏说：灵感不是“看到一个好看的页面”，而是能说清楚它为什么好看，以及哪一部分可以迁移到自己的项目。

---

 03 DesignMD：把参考网站提炼成AI能读取的设计规范

网址：https://designmd.cc/

很多人给AI参考网站时，只会说一句：

> 参考一下Linear的感觉。

这句话的问题是，AI并不知道你参考的是它的配色、字体、留白、圆角、响应式规则，还是整个品牌。

DesignMD可以分析公开网页的DOM与CSSOM，把颜色变量、字体层级、间距、断点、交互状态和组件规律整理成一份结构化的`DESIGN.md`。这份文件可以继续交给Cursor、Claude Code、GitHub Copilot等编码助手，作为项目的设计上下文。

它适合解决AI页面最常见的“设计漂移”：

• 首页按钮是8像素圆角，内页突然变成16像素；
• 同一级标题在不同页面出现三种字号；
• 灰色、阴影和间距每生成一次就换一套；
• 桌面端看着正常，到了移动端才发现没有统一断点。

正确用法不是让AI复制某个品牌，而是借它看清一套成熟页面是如何保持一致的，再把其中适合自己的结构性规则重新整理。

DesignMD官网说明，它读取的是公开页面提供的HTML和CSS；同时也明确提醒，不要复制Logo、商标和品牌专属图片，并应尊重来源网站的使用条款。

它提供每日免费分析额度且无需注册。不过目前官网不同位置显示的免费次数并不完全一致，因此不要把固定次数写进工作流程，以当天页面实际提示为准。

适合谁：正在用AI生成多页面网站、产品原型或设计系统，希望统一视觉语言的人。

不适合谁：只想根据一张截图还原设计的人；它依赖公开网页的真实前端结构，不是截图识别工具。

大鹏说：参考一个网站最有价值的不是抄它的颜色，而是理解它如何把设计决策变成一套重复执行的规则。

---

 04 Originkit：别让AI从零发明复杂动效

网址：https://www.originkit.dev/

AI很擅长生成按钮、卡片和导航栏，但一旦让它从零写复杂动效，经常会出现两个结果：

要么效果很普通，要么代码看起来很热闹，实际运行却卡顿、错位，移动端更是一团糟。

Originkit是一套面向现代网站的动画组件库，提供文字动画、交互元素、图片画廊、背景动画和按钮等类型。它支持面向React和Framer的使用方式，也提供MCP入口，让编码助手能够查找和获取组件。

它的优势不是“动得多”，而是你可以先看到一个完整、可运行的交互，再决定要不要放进项目，而不是让AI凭一句话猜。

例如你想让作品集首屏更有记忆点，可以先选择文字形变或图片画廊中的一个主效果，再明确告诉AI：

> 只在首屏主视觉使用一个Originkit动效；其他区域保持静态。移动端降低粒子数量，并为“减少动态效果”偏好的用户提供静态替代。

这比“给整个页面加点酷炫动效”安全得多。

需要注意的是，Originkit目前仍处于Beta阶段。开放范围、组件数量、账号要求和调用额度都可能变化，正式项目使用前应以官网当日说明为准。

适合谁：想快速验证品牌页、作品集和活动页动效方向的设计师及前端。

不适合谁：对长期维护、无障碍和极致性能有严格要求，却不准备检查生成代码的人。

大鹏说：动效组件可以拿来加速，但不能替你做取舍。一个页面有一个记忆点叫设计，六个区域一起抢注意力叫失控。

---

05 AnimateIcons：用微交互补上“像成品”的最后10%

网址：https://animateicons.in/

很多AI页面结构没有大问题，却总有一股“半成品感”。

原因可能很小：收藏按钮点下去没有反馈、上传图标没有过程感、成功状态只是突然换了一个图标，所有细节都像静态线框图。

AnimateIcons是一套面向React的开源动态SVG图标库。官网当前展示326个图标，包含Lucide和Huge两种视觉体系，支持Hover、Focus和程序触发，也能调整尺寸、颜色与持续时间。

真正实用的地方，是它不只提供一段自动循环的GIF。图标可以和真实状态绑定：

• 点击收藏后，图标播放一次确认动画；
• 上传过程中切换为进度或等待状态；
• 操作成功时播放一次完成反馈；
• Hover只给轻微提示，不抢夺主要内容。

项目支持npm安装，也提供面向shadcn工作流和AI助手的使用方式。代码采用MIT许可，商业项目仍应按许可要求保留相应版权和许可信息。

适合谁：使用React开发产品界面，希望用克制的微交互提升完成度的人。

不适合谁： 纯Figma演示，或者完全不使用React的项目；这不是下载GIF图标的网站。

大鹏说：好的微交互不是让用户注意“图标动了”，而是让用户不需要猜“刚才的操作到底成功没有”。

---

06 Dither Kit：当AI只会画“标准数据看板”时

网址：https://www.tripwire.sh/dither-kit

让AI做数据页面，最容易得到什么？

深色背景、蓝紫渐变、四张指标卡片，再来一张和所有SaaS后台都差不多的折线图。

Dither Kit提供了一套带有抖动像素质感的图表与UI组件，包括面积图、柱状图、折线图、饼图、雷达图，以及生成式头像、按钮和渐变背景。它基于轻量Canvas引擎，不依赖Recharts，主要面向Tailwind与shadcn项目。

它特别适合两类场景：

第一类是游戏、音乐、开发者工具、实验性产品，需要摆脱传统企业看板气质；第二类是作品集概念项目，希望用一套一致的像素语言把图表、头像和按钮串起来。

不过，风格强也意味着限制强。

金融、医疗、政务等强调严谨阅读的场景，不能为了“特别”牺牲数据辨识度。像素填充、光晕和入场动画都应该接受对比度、移动端尺寸和数据密度测试。

另外，Dither Kit主页面目前没有清楚展示完整商业授权说明。正式商用前，应继续确认仓库或组件文件中的许可，而不是因为代码能复制就默认可以无限制使用。

适合谁：想为数据产品、开发者工具或概念项目建立鲜明视觉气质的人。

不适合谁：需要高密度、严肃、通用型商业报表的人。

大鹏说：风格组件的正确用法不是把页面全部“套皮”，而是找到它最能增强品牌性格的那一层。

---

6个网站怎么选？

你的问题	优先选择	上手门槛
不知道界面元素叫什么	NameThatUI	低
说不清想要的视觉机制	Arlan's Vault	低
多页面风格总是不统一	DesignMD	低—中
需要复杂的首屏或展示型动效	Originkit	中
产品操作缺少状态反馈	AnimateIcons	中
数据页面太像默认模板	Dither Kit	中—高

如果你是第一次用AI做网页，我建议按这个顺序：

先用NameThatUI把需求说准确，

再用DesignMD固定设计规则；页面结构稳定以后，

最后才从Originkit、AnimateIcons或Dither Kit里选择一种细节语言。

不要反过来。

一上来就塞满特效，只会得到一个更精致的模板。

---

AI不会自动理解你脑中的“高级感”。

但当你能告诉它组件叫什么、页面遵守什么规范、视觉效果由什么机制组成、交互发生在哪个状态，它就不再需要靠猜。

真正拉开差距的，也许不是谁用了更贵的模型，而是谁能把模糊感觉变成清晰的设计决策。

你平时最难向AI描述的是哪一种界面效果？可以把那句话留在评论区，我看看能不能帮你翻译成一段更准确的设计提示词。