design-mirror

# Design Mirror 捕获任何网站的视觉设计语言并将其应用到您现有的代码库中——颜色、排版、间距、布局节奏、组件形状和整体美学——所有这些都通过 Bright Data 的 Web Unlocker 实时提取。 ## 此技能的功能 1. **捕获** — 通过 Bright Data 对灵感网站进行截图 + HTML 抓取 2. **提取** — 识别完整的设计系统：颜色、字体、间距比例、边框半径、阴影、组件模式 3. **分析** — 从视觉上研究截图，从结构上研究 CSS，以理解设计语言 4. **应用** — 将该设计系统转换为用户现有的代码库（他们的框架、他们的组件） 您不是在复制内容或功能。您是在理解*设计语言*——调色板、字体比例、卡片形状、悬停状态、整体审美感受。 > **重要：** 此技能用于设计灵感和学习——提取公开可见的设计标记（颜色、字体、间距）以指导您自己的 UI 工作。请始终尊重并遵守您所引用网站的服务条款。 ## 设置 需要： - `BRIGHTDATA_API_KEY` — 从 [brightdata.com/cp](https://brightdata.com/cp) → 账户设置获取 - `BRIGHTDATA_UNLOCKER_ZONE` — 在 brightdata.com/cp 创建一个 Unlocker 区域 bash export BRIGHTDATA_API_KEY="your-api-key" export BRIGHTDATA_UNLOCKER_ZONE="your-zone-name" ## 分步流程 ### 第 1 步：捕获灵感网站 并行运行两次捕获——截图（用于视觉分析）和 HTML 抓取（用于 CSS 提取）： bash # 截图 (保存为 PNG) bash scripts/screenshot.sh "https://inspiration-site.com" "/tmp/target_screenshot.png" # HTML + CSS 抓取 bash scripts/scrape_html.sh "https://inspiration-site.com" "/tmp/target_page.html" 阅读 `references/capture-guide.md` 了解如何从原始 HTML 中提取 CSS 并处理常见问题。 ### 第 2 步：分析设计系统 捕获后，并行分析两者： **视觉分析 (截图)：** 读取 PNG 图像并识别： - 主色、辅色、强调色 - 背景颜色（页面背景、卡片背景、表面层级） - 排版：可见的字体系列、大小层级 (h1 → 正文 → 说明) - 布局：是居中/限制宽度吗？网格？侧边栏？ - 卡片/容器形状：边框半径大小、阴影样式（硬、软、无、彩色） - 按钮样式：药丸形、矩形、幽灵按钮、渐变？ - 导航：粘性？玻璃/模糊效果？