design-mirror

设计镜像

捕捉任意网站的视觉设计语言，并将其应用到现有代码库中——包括颜色、字体排印、间距、布局节奏、组件形状和整体美感，所有内容均通过 Bright Data 的 Web Unlocker 实时提取。

此技能的作用

1. 捕捉 — 通过 Bright Data 对灵感网站截图并抓取 HTML
2. 提取 — 识别完整的设计系统：颜色、字体、间距比例、边框圆角、阴影和组件模式
3. 分析 — 从视觉上研究截图，并从结构上分析 CSS，以理解设计语言
4. 应用 — 将该设计系统转化并应用到用户现有的代码库中（包括其框架和组件）

你不是在复制内容或功能，而是在理解设计语言——调色板、字体比例、卡片形状、悬停状态和整体美感。

重要提示： 此技能用于设计灵感和学习——提取公开可见的设计令牌（颜色、字体、间距），为你自己的 UI 工作提供参考。请始终以尊重的方式使用，并遵守所参考网站的服务条款。

设置

需要：

• BRIGHTDATA_API_KEY — 从 brightdata.com/cp → 账户设置获取
• BRIGHTDATA_UNLOCKER_ZONE — 在 brightdata.com/cp 创建一个 Unlocker 区域

export BRIGHTDATA_API_KEY="your-api-key"
export BRIGHTDATA_UNLOCKER_ZONE="your-zone-name"

分步流程

第 1 步：捕捉灵感网站

并行执行两种捕捉——截图（用于视觉分析）和 HTML 抓取（用于提取 CSS）：

# Screenshot (save as PNG)
bash scripts/screenshot.sh "https://inspiration-site.com" "/tmp/target_screenshot.png"

# HTML + CSS scrape
bash scripts/scrape_html.sh "https://inspiration-site.com" "/tmp/target_page.html"

阅读 references/capture-guide.md，了解如何从原始 HTML 中提取 CSS，以及如何处理常见问题。

第 2 步：分析设计系统

捕捉完成后，并行分析以下两项：

视觉分析（截图）： 阅读 PNG 图片并识别：

• 主色、次要色和强调色
• 背景颜色（页面背景、卡片背景、表面层级）
• 字体排印：可见的字体系列、字号层级（h1 → 正文 → 说明文字）
• 布局：是否居中或限制宽度？是否使用网格？是否有侧边栏？
• 卡片/容器形状：边框圆角大小、阴影样式（明显、柔和、无阴影、彩色）
• 按钮样式：药丸形、矩形、幽灵按钮、渐变？
• 导航：是否固定？是否有玻璃/模糊效果？深色还是浅色？
• 整体氛围：深色、浅色、极简、野兽派、玻璃拟态、企业风、初创风？

CSS 分析（HTML）： 从 <style> 标签和内联样式中提取：

• CSS 自定义属性（:root { --color-... }）——公开声明的设计令牌
• 字体导入（通过 Google Fonts 等导入的 @import）
• 如果存在，提取 Tailwind 配置
• 揭示间距比例的重复类模式

阅读 references/css-extraction.md，了解 CSS 提取指南。

第 3 步：构建设计令牌映射

在修改任何代码之前，先生成结构化的设计令牌映射：

DESIGN TOKENS FROM [site]
==========================
Colors:
  --bg-primary: #0a0a0f      (page background)
  --bg-surface: #13131a      (card/panel background)
  --text-primary: #ffffff
  --text-muted: #8888aa
  --accent: #7c3aed          (primary CTA color)
  --accent-hover: #6d28d9
  --border: rgba(255,255,255,0.08)

Typography:
  --font-heading: 'Inter', sans-serif
  --font-body: 'Inter', sans-serif
  font-scale: 12/14/16/20/24/32/48px
  heading-weight: 700
  body-weight: 400

Spacing:
  base-unit: 8px
  scale: 4/8/12/16/24/32/48/64px

Borders & Shadows:
  --radius-sm: 6px
  --radius-md: 12px
  --radius-lg: 20px
  --shadow: 0 4px 24px rgba(0,0,0,0.4)

Special effects:
  glass-blur: backdrop-filter: blur(16px)
  gradient: linear-gradient(135deg, #7c3aed, #2563eb)

继续操作前，先向用户展示此令牌映射。它是整个工作的基础——如果映射有误，最终结果也会出错。

第 4 步：了解用户的代码库

编写任何代码之前，先阅读代码库中的相关部分：

• 使用什么框架？（React、Vue、Next.js、纯 HTML？）
• 使用什么样式方案？（Tailwind、CSS 模块、styled-components、纯 CSS？）
• 全局样式定义在哪里？（globals.css、theme.ts、tailwind.config.js？）
• 哪些组件需要重新设置样式？（如果不清楚，请询问用户）

不要全部重写——精准修改即可。将设计令牌应用到现有结构中。

第 5 步：应用设计

应用策略取决于项目技术栈：

如果使用 Tailwind： 更新 tailwind.config.js，设置新的调色板、字体系列和圆角比例。对于 Tailwind 无法原生处理的内容，添加自定义 CSS 变量。

如果使用 CSS/CSS Modules： 在 globals.css 中创建或更新 :root 变量块。更新组件样式表，使其使用新变量。

如果使用 styled-components/Emotion： 更新主题对象。将硬编码的颜色和间距值替换为主题令牌。

所有情况下：

• 先全局应用颜色、排版和间距
• 然后逐个处理组件细节（按钮、卡片、导航栏）
• 保留所有现有功能和布局结构——只更改视觉属性
• 添加定义灵感网站风格的特殊效果（玻璃模糊、渐变、动画）

阅读 references/apply-guide.md，了解特定框架的实现模式。

第 6 步：展示修改前后的效果

应用更改后，清楚地说明：

• 修改了哪些文件
• 设计令牌映射（来源 → 设置值）
• 添加了哪些特殊效果
• 用户应检查哪些视觉效果（悬停状态、深色/浅色模式、移动端）

如果用户正在运行开发服务器，提醒他们查看效果。并提出可以继续针对特定组件迭代。

核心原则

借鉴设计语言，而非标记。 灵感网站的 HTML 结构和内容属于它自己。你要提取的是它的设计语言——颜色如何搭配、间距如何编排、什么赋予网站独特风格——并将其作为自己的创意基础。

先设计令牌，再编写代码。 未充分了解完整系统就急于应用颜色，会导致结果不一致。务必先构建设计令牌映射。

询问范围。 “将设计应用到所有地方”“只让首页有这种感觉”以及“只重新设计导航栏”是截然不同的任务。开始前先确认范围。

不要破坏现有功能。 用户的组件运行正常。只更改视觉属性。如果不确定某项更改是否会破坏布局，应谨慎处理并明确指出。

允许迭代。 通常最好先完善基础部分（颜色、字体、间距），让用户审核后再处理组件细节。

遇到以下情况时……

网站使用设计系统（Material、shadcn 等）： 识别该系统，告知用户，并询问他们想采用相同的系统，还是只提取视觉令牌。

CSS 已压缩或混淆： 改用截图和视觉分析。通过目视检查仍可提取颜色、间距和形状。

灵感网站由 JS 渲染，抓取到的 HTML 几乎为空： 告知用户——截图仍可用于视觉分析，但 CSS 提取会受到限制。仍可通过视觉观察推断出大部分令牌。

用户的代码库使用组件库（shadcn、Chakra、MUI）： 通过自定义组件库主题或配置来应用设计，而不是单独覆盖各个组件。

需要让多个页面保持一致： 使用首页确定整体设计令牌；如果用户想匹配特定页面的风格，可提出检查内页（如 /pricing、/docs）。