一个解决 AI 写代码"丑"问题的开源项目
项目地址
为什么做这个？
兄弟们，不知道你们有没有这种感觉：用 AI 写代码很爽，但是让 AI 写出好看的前端界面真的太难了！
每次让 AI 生成 UI，结果都是：
- 风格不一致，这次生成一个样，下次又变样了
- 缺乏设计感，一看就是"AI 味"很重
- 想参考 Stripe、Vercel 这些优秀网站的设计？只能手动复制粘贴，累死
所以我就想：能不能把优秀网站的设计"喂"给 AI，让它照着写？
于是就有了 Design-Learn 这个项目。
生成的效果
Chrome插件
VSCode插件
MCP截图
点击展开/折叠
 配置到 rules 也行，然后生成的网页对比
集成了ui/ux pro
也可以 MCP 直接调用了
核心功能
一键提取页面设计
看到好看的网站？直接点一下插件图标，2-5 秒就能提取：
- 完整快照：HTML + CSS + 图片 + 字体，一个不落
- 设计元素：颜色、字体、间距、阴影、圆角，自动识别
- 组件识别：按钮、卡片、导航、表单，统统给你标出来
比如你看到 Stripe 的配色很好看，点一下，它的颜色系统、字体规范、间距体系就都存下来了。
AI 智能分析
提取完还不够，我还加了 AI 分析功能：
- 自动生成设计规范文档（Style Guide）
- 分析色彩系统：主色、辅助色、语义色、渐变
- 分析字体排版：字体族、字号层级、行高、字重
- 分析间距系统：基础单位、常用间距值
- 分析组件规范：按钮样式、卡片阴影、输入框状态
这样 AI 就能理解这套设计语言了。
MCP 集成 Claude Code
这是我觉得最酷的功能！配置好之后，Claude Code 可以直接查询你收集的设计库：
# 在 Claude Code 里直接说：
> 用 stripe.com 的设计风格写一个定价页面
# AI 会自动查询你提取的 Stripe 设计规范，生成风格一致的代码
支持的 MCP 工具：
list_designs- 列出所有已提取的设计search_designs- 按关键词/URL 搜索get_design- 获取完整设计详情get_rules- 获取设计规则（颜色/字体/间距）get_styleguide- 获取 AI 生成的设计规范文档
多端协同
整个系统由三个组件组成：
Chrome Extension ──┐
├──> Design-Learn Server (port 3100)
VSCode Extension ──┤ - REST API
│ - MCP (SSE/stdio)
Claude Code ───────┘ - SQLite + 文件存储
- Chrome 插件：提取页面、AI 分析、本地存储
- VSCode 插件：查看快照、管理设计库、启停服务
- 本地服务：数据持久化、MCP 工具、多端同步
快速开始
安装 Chrome 插件
chrome://extensions/ → 开发者模式 → 加载已解压的扩展程序 → 选择 chrome-extension/
提取页面
- 访问目标网站（比如 https://stripe.com）
- 点击工具栏插件图标
- 点击"提取页面风格"
- 等待 2-5 秒，完成！
配置 MCP 集成（可选）
# 安装服务端依赖
cd design-learn-server && npm install
# 添加到 Claude Code
claude mcp add -s user design-learn -- node /YOUR/PATH/Design-Learn/design-learn-server/src/stdio.js
# 验证
claude mcp list
技术栈
- Chrome 插件：Manifest V3，纯 JS，零依赖
- 本地服务：Node.js + SQLite (better-sqlite3) + MCP SSE
- VSCode 插件：TypeScript + Webview
- 集成 ui-uxpro
- 把 ui-uxpro 项目整合进来，增强设计分析能力
- 支持更智能的组件识别和分类
-
设计库管理优化
- 支持标签、分类、收藏
- 支持批量导入导出
- 支持设计库分享
-
AI 分析增强
- 支持更多分析维度（无障碍、响应式、性能）
- 支持自定义分析模板
- 支持批量分析
-
参考 lovable 实现选择主题直接生成可预览的 UI/UX 参考界面
这个项目我一个人在搞，有时候会有点慢，但我会持续更新。你们的支持就是我最大的动力！
