有了这个方法，你可以逆向一切设计。

大家好，我是美丫姐。

最近 GitHub 上有一个超级火的项目，叫做 REA（Reverse Engineer Anything），意思就是能逆向所有项目的代码。

目前它已经有 100k 的 Star，位居 GitHub 趋势榜榜首。

https://github.com/morluto/rea

NOTE

如果想了解 REA 的具体操作方式，可以直接把它的 GitHub 链接交给你的 Agent，它就能尝试逆向你电脑上已有的软件。但根据软件结构框架的不同，并不能做到 100% 还原软件本身。

今天主要是想借着大家对 REA 的注意力，分享另一种 AI Native 的设计制作思路。核心就是：通过市面上开源的素材，让 AI 在此基础上二次创作。

以前我们设计师的路径是：

找灵感，想创意 → 绘图 → 程序实现 → 校验审核 → 最终上线

其实每一步，都是对最终效果的一种磨损。

NOTE

我现在还记得，当年在某互联网大厂做设计的时候，我画了一个圆形的按钮，开发给我改成了方形的，还对我说：方形的不是也可以用吗？

现在有了 AI，我们完全可以避免这种痛苦的沟通，把所有制作环节都交给 AI 来实现。设计路径就变成了：

找灵感，想创意 → 找到开源素材 → 直接交给 AI → 获得最终成品

所以今天，我整理了自己日常会用到的 16 个设计网站。

有的非常 AI Native，自带 MCP，可以直接交付给 AI；有的提供原始代码或 Prompt，复制给 AI 就能产出最终结果。其中 11 个完全免费，另外 5 个也有免费额度。

这个网站 List 非常适用于：

▪ 经常拿 AI 做设计，但觉得 AI 味太重的

▪ 喜欢折腾设计，尝试各种设计风格的

▪ Vibe coding 重度爱好者，经常发项目的

每个网站都附上了网址、一句话介绍、使用方式和收费情况，按用途分成四类。

一、灵感与设计规范

这一类负责「找灵感」：先看真实产品是怎么设计的，再把喜欢的风格变成 AI 读得懂的提示词或 DESIGN.md。

01Kage

网址kage.design

收录真实产品落地页的设计灵感库，任意设计一键复制成提示词，交给 AI 直接复刻。

使用方式

浏览设计 → 点「Copy as prompt」→ 粘贴给 Claude Code 或 Cursor。也可以接入它的免费 MCP：

CODE

claude mcp add --transport http kage https://kage.design/mcp

收费

全部免费

02AppShot Gallery

网址appshot.gallery

821 款 iOS 应用的 App Store 宣传图合集，可按风格、配色、字体筛选找灵感。

使用方式

按类型、风格、配色、字体筛选 → 打开应用看整套宣传图 → 把喜欢的截图存下来，作为参考图交给 AI。做自己 App 的商店截图时特别好用。

收费

全部免费

03Refero Styles

网址styles.refero.design

把大厂网站拆成 DESIGN.md 和设计 token，复制给 AI 就能复刻同款风格。

使用方式

选一个网站风格 → 切到 DESIGN.md 或 Tailwind v4 标签 → 点 Copy 或下载 .md → 放进项目，让 AI 按这套风格写界面。

收费

浏览和复制免费；官方 MCP 需开通付费版：Pro 季付约 $40、年付约 $127、终身约 $267，Team 每人年付 $140

04DESIGNmd

网址designmd.ai

社区共享的 DESIGN.md 设计系统库，400 多套免费下载，AI 读了就能写出风格统一的界面。

使用方式

详情页点「Download .md」，放进项目根目录。也可以接入 MCP：

CODE

claude mcp add -s user designmd -e DESIGNMD_API_KEY=你的key -- npx designmd-mcp

（key 用 GitHub 登录免费领取）

收费

全部免费

05Component Gallery

网址component.gallery

汇集 95 套设计系统、2,671 个组件实例，一眼对比大厂如何设计同一个组件。

使用方式

按组件（比如 Button、Tabs）查看各大设计系统的做法 → 把喜欢的实现要点或链接写进给 AI 的提示词。

收费

全部免费

二、提示词与组件库

这一类负责「直接交给 AI」：要么给你现成的提示词，要么让 AI 一行命令把组件装进项目。

06jiro.build

网址jiro.build

1,272 个落地页模板和区块的提示词库，复制提示词即可让 AI 生成页面。

使用方式

选模板或区块 → 点「Copy Prompt」→ 粘贴进 Cursor、Lovable 或 Claude Code。付费用户还可以接 MCP：

CODE

claude mcp add --transport http jiro https://mcp.jiro.build

收费

免费账号每天限量；3 个月 $48、年付 $99、终身 $179（限时价），不退款

07VibePrompt

网址vibeprompts.dev

286 条免费 UI 区块提示词，覆盖仪表板、登录、定价等 15 类，附 Tailwind 代码。

使用方式

选类别 → 打开区块 → 在 Prompt 标签复制提示词给 AI，或在 Tailwind 标签直接复制代码。不用注册。

收费

全部免费

0821st.dev

网址21st.dev

12,000+ 个 React 组件、模板和主题的社区库，AI 可通过 MCP 直接搜索并安装组件。

使用方式

网页上复制组件代码或提示词；或在项目里运行

CODE

npx @21st-dev/cli@latest init --client claude

接入 MCP。

收费

免费版每天可取用 2 次；Builder 年付 $6/月起；100 额度充值包 $5

09shadcn/ui

网址ui.shadcn.com

React 组件生态的地基：组件源码直接复制进项目随意改，众多组件库都基于它构建。

使用方式

在项目里运行 npx shadcn@latest add button 添加组件；接入官方 MCP：

CODE

npx shadcn@latest mcp init --client claude

收费

全部免费（MIT 开源）

10Magic UI

网址magicui.design

开源动画组件与特效库（React + Tailwind），一行命令装进 shadcn 项目。

使用方式

运行 npx shadcn@latest add @magicui/globe 安装组件；接入官方 MCP：

CODE

npx @magicuidesign/cli@latest install claude

收费

开源组件免费；Pro 版终身 $199

11Aceternity UI

网址ui.aceternity.com

以炫酷视觉特效著称的 React 动画组件库，适合做吸睛的落地页。

使用方式

组件页点「Copy prompt」交给 AI，或运行

CODE

npx shadcn@latest add @aceternity/3d-card

安装。高级区块需要付费。

收费

免费组件可直接用；年付 $169、终身 $199

三、动效与特色组件

这一类负责「去 AI 味」：给页面加上有质感的动效、玻璃材质和地图，这些恰恰是 AI 自己最不擅长写的部分。

12Kinetics

网址kinetics.colorion.co

153 个弹簧物理微交互动效，每个都能复制 CSS、React 代码或 AI 提示词。

使用方式

在库里挑效果 → 按需调 stiffness / damping → 切到 CSS、React 或 Prompt 标签一键复制。

收费

免费

13Liquid Glass

网址glass.samasante.com

在网页上实现苹果「液态玻璃」折射效果的零依赖组件，主流浏览器都能用。

使用方式

运行 npm i @samasante/liquid-glass 安装，用 <Glass> 组件包裹内容。首页的 Playground 可以先调好参数。

收费

免费（MIT 开源）

14mapcn

网址mapcn.dev

基于 MapLibre 的 shadcn 风格地图组件，标记、路线、热力图开箱即用，免费开源。

使用方式

运行 npx shadcn@latest add @mapcn/map 安装；首页点「Copy prompt for your agent」，把用法直接交给 AI。

收费

免费（MIT 开源）

15Anime.js

网址animejs.com

轻量强大的 JavaScript 动画引擎，时间轴、SVG、滚动、文字动画都能做。

使用方式

运行 npm i animejs 安装，再 import { animate } from 'animejs' 使用。注意 v4 写法和旧版不同，记得让 AI 参考官方文档。

收费

免费（MIT 开源）

四、插画素材

最后一类负责「配图」：不用自己画，也不用担心版权。

16Kitbitz

网址kitbitz.art

2,000+ 张手绘插画，CC0 授权可免费商用，还提供 MCP 让 AI 直接搜图配图。

使用方式

网页上下载 SVG / PNG，或用 Figma 插件。也可以接入 MCP：

CODE

claude mcp add --transport http kitbitz https://mcp.kitbitz.art

（不需要 key）

收费

全部免费（CC0 授权）

写在最后

随着 AI 的发展，网上开源的资料和素材也是越来越多。不少传统的设计和素材的网站也在逐渐转型，让整个服务变得更加适用于各种 AI Agent 本身的工作流。

例如跳过图形设计的环节，直接给到代码。或者说直接提供 MCP 让 AI 去读取其中的关键信息。

并且大模型本身也在不断迭代自己的能力，例如 Opus 5.5 这次主打的就是视觉呈现的能力，让很多设计需求能够 one shot。

所以，我会认为在未来的阶段，每个人积累自己的数字资产的能力也非常的有必要。这种数字资产并不是说必须由自己从 0 到 1 去建立一套系统。而是说，我们能知道哪里可以获得有用的资源，并且怎么去调用 AI 去使用这些资源。

好了，今天的内容分享就到这里了。大家快点 Mark 一下吧，或者整篇文章扔给你的 AI Agent！让它学习学习吧！

我是美丫姐，我们下期见。

今日 AI 笑点

这么看，其实未来还挺值得期待的 🤔

谁不想当不用工作的狗狗呢！