AI驱动的设计参考库
一个智能网络爬虫，可以捕获带有动画的网站设计，并使用Claude AI生成GSAP娱乐代码。专为想要分析和重建Awwwards标准网站的设计师和开发人员而构建。
特性
- 🎬 GSAP代码生成 -从捕获的动画中提取人工智能驱动的GSAP娱乐代码
- 📸 多视口屏幕截图 -桌面、平板电脑和手机屏幕截图
- 🎯 交互式状态捕获 -悬停、聚焦和活动状态
- 🎞️ 滚动动画帧 -25帧捕捉视差和滚动效果
- 🌙 暗模式检测 -自动深色主题捕捉
- 📄 多页面爬行 -发现并截图所有页面
- 🔌 MCP服务器 -将设计库暴露给Claude CLI以进行网站娱乐
成本
每个网站约0.10美元 已爬网（仅用于GSAP代码生成的Claude API）
技术栈
- 后端： Node.js+Express
- 浏览器自动化： Playwright+Chrome DevTools协议（CDP）
- 人工智能： Claude Sonnet 4.5 API
- 前端： React+Vite
- MCP： Claude CLI的模型上下文协议服务器
安装
- 克隆存储库：
git clone
cd design-reference-library- 安装依赖项：
# Backend
cd backend
npm install
# Frontend
cd ../frontend
npm install
# MCP Server
cd ../mcp-server
npm install- 设置环境变量：
# Create backend/.env
echo "ANTHROPIC_API_KEY=your_api_key_here" > backend/.env- 启动应用程序：
# Terminal 1: Backend
cd backend
npm run dev
# Terminal 2: Frontend
cd frontend
npm run dev- 打开http://localhost:5173在浏览器中
用法
网络爬虫
- 引导到http://localhost:5173
- 输入网站URL（例如。，https://awwwards.com/sites/example)
- 点击“抓取网站”
- 等待爬网完成
- 访问中生成的文件
library//
输出文件
人工智能生成：
AI-GSAP-CODE.md-生产就绪的GSAP动画代码
原始数据（适用于MCP）：
screenshots/-所有视口和页面截图states/-交互式元素状态捕获animations/-来自CDP的动画元数据html/,css/,js/-提取的代码assets/-下载的图像、字体等。
MCP服务器
MCP服务器将您的设计库暴露给Claude CLI：
# Configure Claude CLI to use the MCP server
claude mcp add design-library
# Use in Claude CLI
claude chat
> Using the design library, recreate the homepage with all GSAP animations建筑
design-reference-library/
├── backend/
│ ├── src/
│ │ ├── server.js # Express server
│ │ ├── services/
│ │ │ └── ai-service.js # Claude API integration
│ │ └── extractors/
│ │ ├── enhanced-screenshots.js
│ │ ├── animation-extractor.js # CDP animation capture
│ │ ├── state-capture.js
│ │ └── ai-design-system-extractor.js
│ └── package.json
├── frontend/
│ ├── src/
│ │ ├── App.jsx # React UI
│ │ └── components/
│ └── package.json
├── mcp-server/
│ ├── index.js # MCP server
│ └── package.json
└── library/ # Crawled websites (gitignored)API终点
POST /api/sites/crawl-抓取网站GET /api/sites-列出所有已爬网的站点GET /api/sites/:domain-获取网站详细信息DELETE /api/sites/:domain-删除网站
成本优化
该爬虫针对最小的人工智能API成本进行了优化：
| 功能 | 状态 |
|---|---|
| 截图AI分析 | ❌ 禁用（改用MCP） |
| 组件AI分析 | ❌ 禁用（改用MCP） |
| 状态转换AI分析 | ❌ 禁用（改用MCP） |
| GSAP代码生成 | ✅ 启用 (~$0.10) |
所有原始数据都被捕获，并可通过MCP供Claude CLI按需分析。
发展
运行测试：
cd backend
node test-design-system.js调试日志：
在爬行过程中，后端日志会输出到控制台。
许可证
麻省理工学院
贡献
欢迎拉取请求！请先打开一个问题来讨论重大更改。