Design-Learn

一键提取网页设计风格，AI 智能分析，零依赖开箱即用

🎯 项目简介

这是一个完全零依赖的 Chrome 浏览器插件，用户无需安装任何额外软件（Node.js、Playwright 等），只需安装插件即可一键提取任意网页的完整设计风格，包括 HTML、CSS、图片、字体等所有资源。

核心特性

✅ 零依赖: 无需 Node.js、Playwright 等任何依赖
✅ 一键提取: 点击插件图标即可提取当前页面
✅ 完整快照: HTML + CSS + 图片 + 字体 + 元数据
✅ AI 分析: 集成 AI 模型，自动生成设计分析报告
✅ 提示词模板: 可编辑、多版本管理的 AI 提示词系统
✅ 本地存储: 使用 Chrome Storage 本地保存，无需后端
✅ 即时预览: 在新标签页预览提取的页面
✅ 一键下载: 导出为完整的 HTML 文件
✅ 历史记录: 按域名分组，批量分析

🚀 快速开始

安装插件（1 分钟）

打开 Chrome 浏览器，访问 chrome://extensions/
开启右上角的“开发者模式”
点击“加载已解压的扩展程序”
在弹出的目录选择器中，选择项目内的 chrome-extension 文件夹（确保其中存在 manifest.json）
安装成功后，扩展页会出现“Design-Learn”，浏览器工具栏显示插件图标

提示：

选择子目录（如 chrome-extension/popup）会导致安装失败，请务必选择 chrome-extension 根目录
Edge 使用 edge://extensions/，Brave 使用 brave://extensions/，其余步骤一致

选择哪个文件夹？

克隆或下载本仓库后，必须选择仓库中的 chrome-extension/ 目录作为“已解压的扩展程序”目录
快速自检：选中的目录内应包含文件 manifest.json

路径示例（macOS）：

~/.../Design-Learn/chrome-extension

常见错误目录（不要选择）

仓库根目录：~/.../Design-Learn/（错误）
子模块目录：~/.../Design-Learn/chrome-extension/popup（错误）
子模块目录：~/.../Design-Learn/chrome-extension/background（错误）
单个文件或压缩包：Design-Learn-3.0.0.zip（错误，开发模式需选择文件夹）

使用插件（5 秒）

访问任意网页（如 https://stripe.com）
点击浏览器工具栏的插件图标
点击"提取页面风格"按钮
等待 2-5 秒，提取完成
可以预览、下载或查看历史记录

🧩 本地安装详细指南

前提条件

Chrome 115+，支持 Manifest V3
可选：Microsoft Edge（Chromium）或 Brave（同样支持加载已解压扩展）

安装步骤（详细）

进入扩展管理页面：chrome://extensions/
打开右上角“开发者模式”
点击“加载已解压的扩展程序”
选择项目中的 chrome-extension 目录（包含 manifest.json）
安装完成后，看到 Design-Learn 条目与工具栏图标

安装验证

在扩展页面确认名称与版本号：应显示 Design-Learn v3.0.0
点击工具栏图标应弹出插件 Popup 窗口
扩展详情 → 背景页/Service Worker 应显示为“活动”状态

首次使用配置

打开插件的设置页（Options）
在“AI 模型”中配置 API Key、Base URL、Model Id 等
在“生成配置”中设置语言与分析偏好
返回网页，点击提取并触发 AI 分析生成 Markdown 报告

更新与重载

修改源码后，可在 chrome://extensions/ 点击“重新加载”，Service Worker 将重启
内容脚本更新后，需刷新目标页面以重新注入
若遇到旧状态，可在扩展详情中停止/启动后台页以刷新

权限说明

activeTab：读取当前活动标签页内容用于提取
storage：使用 Chrome Storage 保存本地配置与快照
downloads：支持将提取结果导出为 HTML 文件

常见问题与排错

未显示图标或安装失败：确认选择的是 chrome-extension 根目录并已开启开发者模式
Manifest 报错：检查 chrome-extension/manifest.json 是否存在且为 manifest_version: 3
内容脚本不生效：刷新目标页面；特殊页面（如 chrome://、扩展商店页面）不支持注入
AI 调用失败：在设置页正确配置 API Key、Base URL、Model Id；检查网络与配额
后台未运行：在扩展详情查看 Service Worker 状态或点击“重新加载”

其他浏览器

Edge：地址栏输入 edge://extensions/，步骤同 Chrome
Brave：地址栏输入 brave://extensions/，步骤同 Chrome

📦 项目结构

Design-Learn/
├── chrome-extension/              # Chrome 插件
│   ├── manifest.json             # 插件配置
│   ├── popup/                    # 弹出窗口 UI
│   ├── content/                  # 页面提取器
│   ├── background/               # 后台服务
│   ├── lib/                      # AI 分析器
│   ├── options/                  # 设置页面
│   └── icons/                    # 图标文件
│
└── docs/                         # 项目文档

🎨 功能展示

1. AI 提示词模板管理 ⭐️ 新功能

提示词模板系统支持：
✅ 可编辑提示词内容
✅ 多版本模板保存
✅ 模板快速切换
✅ 模板复制和删除
✅ 内置默认模板
✅ 自定义模板描述

核心功能：

模板管理: 创建、编辑、删除、复制多个提示词模板
在线编辑: 直接在界面上编辑和保存提示词
版本控制: 保存多个版本，随时切换使用
模板分类: 支持内置模板和自定义模板
实时预览: 编辑时实时预览提示词效果

2. 页面提取

// 提取结果示例
{
  id: "snapshot_1700000000000_abc123",
  url: "https://stripe.com",
  title: "Stripe | Payment Processing Platform",
  html: "<!DOCTYPE html>...",      // 完整 HTML
  css: "/* 内联的 CSS */",          // 所有样式
  assets: {
    images: [...],                 // 图片列表
    fonts: [...]                   // 字体列表
  },
  metadata: {
    viewport: { width: 1920, height: 1080 },
    performance: { loadTime: 2500 },
    stats: { totalElements: 1523 }
  },
  extractedAt: "2025-11-23T11:56:00.000Z",
  extractionTime: 2345  // ms
}

3. UI 界面

弹出窗口：

┌─────────────────────────────────┐
│  🎨 Design-Learn                │
│  一键提取页面设计风格            │
├─────────────────────────────────┤
│  📄 当前页面                     │
│  Stripe                         │
│  stripe.com                     │
├─────────────────────────────────┤
│  ⚙️ 提取选项                     │
│  ☑ 内联 CSS 样式                │
│  ☑ 收集图片资源                 │
│  ☑ 收集字体文件                 │
├─────────────────────────────────┤
│  [🎨 提取页面风格]              │
├─────────────────────────────────┤
│  📊 最近任务 (3)                │
│  • stripe.com - 进行中          │
│  • linear.app - 已完成          │
└─────────────────────────────────┘

设置页面：

┌─────────────────────────────────────────┐
│  侧边栏                                  │
│  • AI 模型                              │
│  • 生成配置                    ⭐️       │
│  • 历史与数据                            │
└─────────────────────────────────────────┘

生成配置页面包含：
1. 提取选项（内联CSS、图片、字体）
2. 分析内容（色彩、字体、布局、组件等）
3. 提示词模板管理 ⭐️
   - 模板列表（支持使用/编辑/复制/删除）
   - 当前使用标识
4. AI 提示词预览/编辑 ⭐️
   - 预览模式（查看当前提示词）
   - 编辑模式（直接修改提示词）
   - 另存为新模板

🔧 技术栈

Chrome 插件

Manifest V3: Chrome 扩展最新标准
纯 JavaScript: 无需构建工具
IndexedDB: 本地数据库
Content Script: 页面内容提取
Service Worker: 后台任务处理

未来计划（Next.js 后台）

Next.js 15 + TypeScript 5
Drizzle ORM + PostgreSQL
Shadcn UI + Tailwind CSS
Vercel AI SDK（风格分析）

📊 性能指标

提取速度: 2-5 秒（普通页面）
内存占用: < 50MB
存储大小: 每个快照 500KB - 2MB
支持页面: 95% 的常见网站

📝 开发进度

✅ Phase 1: Chrome 插件核心功能（已完成）

✅ Phase 2: AI 分析功能（已完成）

🔄 Phase 3: 优化与完善（进行中）

📅 Phase 4: Next.js 后台（计划中）

🎯 使用场景

适用场景

✅ 收集设计灵感
✅ 学习优秀网站设计
✅ AI 驱动的设计分析（⭐️ 新增）
✅ 自定义分析模板（⭐️ 新增）
✅ 保存页面快照
✅ 离线查看网页
✅ 批量分析网站（⭐️ 新增）
✅ 生成设计分析报告

典型工作流程 ⭐️

配置 AI 模型：在设置页面添加你的 AI API 密钥
创建提示词模板：根据需求创建专用分析模板
- 例如：电商网站分析模板、SaaS 产品分析模板
提取页面：访问目标网站，点击提取按钮
自动分析：AI 自动生成详细的设计分析报告
查看报告：在历史记录中查看 Markdown 格式报告
批量处理：对同一域名下的多个页面批量分析

不适用场景

❌ 需要 JavaScript 交互的页面
❌ 需要登录的私密内容
❌ 实时更新的数据
❌ 视频/音频流媒体

🐛 已知限制

跨域资源: 某些跨域的 CSS/图片可能无法提取
动态内容: JavaScript 动态生成的内容可能不完整
大型页面: 超过 10MB 的页面可能较慢
特殊页面: chrome:// 等特殊页面无法提取

📖 文档

安装与使用：见本文档"安装插件"与"本地安装详细指南"章节
更多文档：见 docs/ 目录

🤝 贡献

欢迎提交 Issue 和 Pull Request！

可以改进的方向

添加更多 AI 模型支持（Claude、Gemini 等）
优化提取算法（更好的 CSS 提取）
改进 UI/UX（更现代化的界面）
添加更多分析维度
支持导出为多种格式（PDF、JSON 等）
添加提示词模板市场
完善文档和教程

📄 许可证

MIT License

👨‍💻 作者

GalaxyXieyu

版本: 3.0.0
更新日期: 2025-11-27

🎉 立即开始

# 1. 进入插件目录
cd chrome-extension

# 2. 在 Chrome 中加载插件
# chrome://extensions/ → 开发者模式 → 加载已解压的扩展程序

# 3. 开始使用！
# 访问任意网页，点击插件图标，提取页面风格

完全零依赖，开箱即用！ 🚀

Name		Name	Last commit message	Last commit date
Latest commit History 15 Commits
chrome-extension		chrome-extension
docs		docs
vscode-extension		vscode-extension
.DS_Store		.DS_Store
Design-Learn-3.0.0.zip		Design-Learn-3.0.0.zip
README.md		README.md
Readme.html		Readme.html

Folders and files

Latest commit

History

Repository files navigation

Design-Learn

🎯 项目简介

核心特性

🚀 快速开始

安装插件（1 分钟）

选择哪个文件夹？

使用插件（5 秒）

🧩 本地安装详细指南

前提条件

安装步骤（详细）

安装验证

首次使用配置

更新与重载

权限说明

常见问题与排错

其他浏览器

📦 项目结构

🎨 功能展示

1. AI 提示词模板管理 ⭐️ 新功能

2. 页面提取

3. UI 界面

🔧 技术栈

Chrome 插件

未来计划（Next.js 后台）

📊 性能指标

📝 开发进度

✅ Phase 1: Chrome 插件核心功能（已完成）

✅ Phase 2: AI 分析功能（已完成）

🔄 Phase 3: 优化与完善（进行中）

📅 Phase 4: Next.js 后台（计划中）

🎯 使用场景

适用场景

典型工作流程 ⭐️

不适用场景

🐛 已知限制

📖 文档

🤝 贡献

最新更新 ⭐️

可以改进的方向

📄 许可证

👨‍💻 作者

🎉 立即开始

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages