网页设计提取器｜DesignMD Extractor

About

网页设计提取器 - DesignMD 可以在你主动点击插件后，分析当前活动标签页中可见页面的设计与样式信息，并生成一份 AI 可读的 DESIGN.md。

它适合前端开发者、独立开发者、设计师和 AI 编程工具用户，用来把参考网页的视觉规则沉淀成可审查、可复用、可放进项目上下文的设计文档。

主要功能：

- 提取页面颜色、字体、字号、间距、圆角、阴影和边框风格
- 识别按钮、卡片、导航、Hero、表单等常见组件的视觉特征
- 提取与设计相关的 CSS variables 和 computed styles
- 生成结构化 DESIGN.md，方便放入项目中供 AI 编程工具参考
- 支持复制或下载 DESIGN.md 到本地
- 支持云端生成，也支持 BYOK 自定义 OpenAI-compatible 模型接口

使用方式：

1. 打开你想参考的网页
2. 点击插件中的“分析当前网页”
3. 预览提取出的设计系统信息
4. 点击“生成 DESIGN.md”
5. 复制或下载结果，并放入你的项目上下文中

DesignMD 不是截图工具，也不是网页克隆工具。它的目标是把网页中的视觉规则转成一份清晰的设计上下文，让 AI 写页面时有明确依据，而不是凭印象模仿。

隐私说明：

插件只在用户主动点击后分析当前活动标签页。它不会后台扫描网页，不会自动分析所有标签页，不会读取浏览历史、Cookie、密码、LocalStorage 或完整网页源码。

在云端生成模式下，设计摘要和一张压缩的可视区域截图会发送到官方 API，仅用于生成 DESIGN.md，不用于广告或追踪。BYOK 模式下，用户的 API Key 保存在本机浏览器扩展存储中，不会上传到我们的服务器。

---

DesignMD helps you extract visible design and style information from the current webpage and turn it into an AI-readable DESIGN.md file.

It is built for frontend developers, indie hackers, designers, and users of AI coding tools who want to convert a reference webpage into a reusable design context.

Key features:

- Extract colors, typography, spacing, border radius, shadows, and borders
- Identify visual patterns from common components such as buttons, cards, navigation bars, hero sections, and forms
- Extract design-related CSS variables and computed styles
- Generate a structured DESIGN.md file for AI coding workflows
- Copy or download the generated DESIGN.md
- Support both cloud generation and BYOK OpenAI-compatible model endpoints

How it works:

1. Open a webpage you want to reference
2. Click “Analyze current page”
3. Review the extracted design system preview
4. Click “Generate DESIGN.md”
5. Copy or download the result and add it to your project context

DesignMD is not a screenshot tool or a website cloning tool. Its purpose is to convert visible design rules into a clear, reviewable design context so AI coding tools can produce more consistent UI output.

Privacy:

The extension analyzes the current active tab only after explicit user action. It does not scan webpages in the background, automatically analyze all tabs, read browsing history, cookies, passwords, local storage, or full page source code.

In cloud generation mode, the extracted design summary and a compressed visible-area screenshot are sent to the official API only to generate DESIGN.md. They are not used for advertising or tracking. In BYOK mode, the user's API key is stored locally in browser extension storage and is not uploaded to our server.