design-mirror

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Mirror

设计镜像

Capture the visual design language of any website and apply it to your existing codebase — colors, typography, spacing, layout rhythm, component shapes, and overall aesthetic — all extracted live via Bright Data's Web Unlocker.

捕获任意网站的视觉设计语言并应用到你的现有代码库中——包括颜色、排版、间距、布局节奏、组件形状及整体美学——所有内容均通过Bright Data's Web Unlocker实时提取。

What This Skill Does

该技能的功能

Capture — Screenshot + HTML scrape the inspiration site via Bright Data
Extract — Identify the full design system: colors, fonts, spacing scale, border radii, shadows, component patterns
Analyze — Study the screenshot visually and the CSS structurally to understand the design language
Apply — Translate that design system into the user's existing codebase (their framework, their components)

You are not copying content or functionality. You're understanding the design language — the palette, the type scale, the card shapes, the hover states, the overall aesthetic feel.

Important: This skill is for design inspiration and learning — extracting publicly visible design tokens (colors, fonts, spacing) to inform your own UI work. Always use it respectfully and in accordance with the terms of service of the sites you reference.

捕获 — 通过Bright Data对灵感网站进行截图+HTML抓取
提取 — 识别完整的设计系统：颜色、字体、间距比例、边框圆角、阴影、组件样式
分析 — 从视觉上分析截图，从结构上分析CSS，以理解其设计语言
应用 — 将该设计系统转化为用户现有代码库的样式（适配其框架与组件）

你并非复制内容或功能，而是理解设计语言——即调色板、字体层级、卡片形状、悬停状态及整体美学质感。

重要提示： 本技能仅用于设计灵感与学习——提取公开可见的设计令牌（颜色、字体、间距）以指导你自己的UI工作。请始终合规使用，并遵守参考网站的服务条款。

Setup

配置要求

Requires:

```
BRIGHTDATA_API_KEY
```
— from brightdata.com/cp → Account Settings
```
BRIGHTDATA_UNLOCKER_ZONE
```
— create an Unlocker zone at brightdata.com/cp

bash

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

需要：

```
BRIGHTDATA_API_KEY
```
— 从 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"

Step-by-Step Process

分步流程

Step 1: Capture the Inspiration Site

步骤1：捕获灵感网站

Run both captures in parallel — screenshot (for visual analysis) and HTML scrape (for CSS extraction):

bash

undefined

并行运行两种捕获操作——截图（用于视觉分析）和HTML抓取（用于CSS提取）：

bash

undefined

Screenshot (save as PNG)

截图（保存为PNG）

bash scripts/screenshot.sh "https://inspiration-site.com" "/tmp/target_screenshot.png"

HTML + CSS scrape

HTML + CSS抓取

bash scripts/scrape_html.sh "https://inspiration-site.com" "/tmp/target_page.html"


Read `references/capture-guide.md` for how to extract CSS from the raw HTML and handle common issues.

bash scripts/scrape_html.sh "https://inspiration-site.com" "/tmp/target_page.html"


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

Step 2: Analyze the Design System

步骤2：分析设计系统

After capturing, analyze both in parallel:

Visual analysis (screenshot): Read the PNG image and identify:

Primary, secondary, accent colors
Background colors (page bg, card bg, surface hierarchy)
Typography: font families visible, size hierarchy (h1 → body → caption)
Layout: is it centered/constrained-width? Grid? Sidebar?
Card/container shapes: border radius size, shadow style (hard, soft, none, colored)
Button styles: pill, rectangle, ghost, gradient?
Navigation: sticky? Glass/blur effect? Dark or light?
Overall mood: dark, light, minimal, brutalist, glassmorphism, corporate, startup?

CSS analysis (HTML): Extract from

<style>

tags and inline styles:

CSS custom properties (
```
:root { --color-... }
```
) — publicly declared design tokens
Font imports (
```
@import
```
from Google Fonts, etc.)
Tailwind config if present
Repeated class patterns that reveal the spacing scale

Read

references/css-extraction.md

for the extraction playbook.

捕获完成后，并行分析两种结果：

视觉分析（截图）： 查看PNG图片并识别：

主色、辅助色、强调色
背景色（页面背景、卡片背景、层级背景）
排版：可见的字体族、尺寸层级（h1 → 正文 → 说明文字）
布局：居中/固定宽度？网格布局？侧边栏？
卡片/容器形状：边框圆角大小、阴影样式（硬阴影、柔化阴影、无阴影、彩色阴影）
按钮样式：胶囊型、矩形、幽灵按钮、渐变按钮？
导航栏：粘性定位？玻璃模糊效果？深色或浅色？
整体风格：深色、浅色、极简、粗野主义、玻璃态、企业风、创业风？

CSS分析（HTML）： 从

<style>

标签和内联样式中提取：

CSS自定义属性（
```
:root { --color-... }
```
）——公开声明的设计令牌
字体导入（
```
@import
```
自Google Fonts等）
若存在Tailwind配置
重复出现的类样式，以揭示间距比例

阅读

references/css-extraction.md

获取提取指南。

Step 3: Build the Design Token Map

步骤3：构建设计令牌映射表

Produce a structured design token map before touching any code:

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)

Show this token map to the user before proceeding. It's the foundation — if it's wrong, the output will be wrong.

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

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)

在继续操作前，向用户展示此令牌映射表。这是工作基础——如果映射错误，最终输出也会出错。

Step 4: Understand the User's Codebase

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

Before writing any code, read the relevant parts of their codebase:

What framework? (React, Vue, Next.js, plain HTML?)
What styling approach? (Tailwind, CSS modules, styled-components, plain CSS?)
Where are global styles defined? (globals.css, theme.ts, tailwind.config.js?)
What components need restyling? (ask the user if unclear)

Do not rewrite everything — surgical precision. Apply the design tokens to the existing structure.

在编写任何代码前，先阅读用户代码库的相关部分：

使用的框架？（React, Vue, Next.js, 纯HTML？）
样式方案？（Tailwind, CSS Modules, styled-components, 纯CSS？）
全局样式定义位置？（globals.css, theme.ts, tailwind.config.js？）
需要重新样式化的组件？（若不明确请询问用户）

不要全盘重写——需精准操作。将设计令牌应用到现有结构中。

Step 5: Apply the Design

步骤5：应用设计样式

The application strategy depends on their stack:

If Tailwind: Update

tailwind.config.js

with the new color palette, font family, border radius scale. Add custom CSS variables for anything Tailwind can't handle natively.

If CSS/CSS Modules: Create or update a

:root

variables block in globals.css. Update component stylesheets to use the new variables.

If styled-components/Emotion: Update the theme object. Replace hardcoded color/spacing values with theme tokens.

In all cases:

Apply colors, typography, and spacing globally first
Then tackle component-level details (buttons, cards, nav) one at a time
Preserve all existing functionality and layout structure — only visual properties change
Add any special effects (glass blur, gradients, animations) that define the inspiration site's character

Read

references/apply-guide.md

for framework-specific implementation patterns.

应用策略取决于用户的技术栈：

若使用Tailwind： 更新

tailwind.config.js

，添加新的调色板、字体族、边框圆角比例。为Tailwind原生不支持的内容添加自定义CSS变量。

若使用CSS/CSS Modules： 在globals.css中创建或更新

:root

变量块。更新组件样式表以使用新变量。

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

在所有情况下：

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

阅读

references/apply-guide.md

获取框架特定的实现模式。

Step 6: Show the Before/After

步骤6：展示前后对比

After applying changes, clearly present:

Which files were modified
The design token mapping (source → what you set it to)
Any special effects added
What the user should check visually (hover states, dark/light mode, mobile)

If the user has a dev server running, remind them to check it. Offer to iterate on specific components.

应用更改后，清晰展示：

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

如果用户的开发服务器正在运行，提醒他们进行检查。主动提出可针对特定组件进行迭代优化。

Key Principles

核心原则

Design language, not markup. The inspiration site's HTML structure and content are theirs. You're extracting the design language — how colors relate, how spacing flows, what gives the site its character — to apply as your own creative foundation.

Design tokens first, code second. Rushing to apply colors before understanding the full system leads to inconsistent results. Always build the token map first.

Ask about scope. "Apply the design everywhere" vs "just make the homepage feel like it" vs "only restyle the navbar" are very different jobs. Clarify before proceeding.

Don't break what works. The user's components work. Only change visual properties. If you're uncertain whether a change might break layout, err on the side of caution and flag it.

Iterative is fine. It's often better to get the foundation right (colors, type, spacing) and let the user review before tackling component-level details.

设计语言而非标记。 灵感网站的HTML结构和内容属于原网站。你提取的是设计语言——颜色的搭配方式、间距的布局逻辑、赋予网站特色的元素——以此作为自己创意工作的基础。

先设计令牌，再编写代码。 在理解完整系统前就急于应用颜色会导致结果不一致。始终先构建令牌映射表。

询问范围。 “全局应用设计样式” vs “仅让首页风格匹配” vs “仅重新样式化导航栏”是截然不同的任务。开始前请明确需求。

不要破坏现有功能。 用户的组件原本可正常工作。仅修改视觉属性。若不确定某更改是否会破坏布局，请谨慎操作并标记说明。

迭代优化即可。 通常先确保基础部分（颜色、字体、间距）正确，让用户审核后再处理组件级细节会更好。

What to Do When...

特殊场景处理

The site uses a design system (Material, shadcn, etc.): Identify it, tell the user, and ask if they want to adopt the same system or just extract the visual tokens.

The CSS is minified/obfuscated: Fall back to the screenshot + visual analysis. You can still extract colors, spacing, and shapes from visual inspection.

The inspiration site is JS-rendered and the HTML scrape comes back mostly empty: Note this to the user — the screenshot will still work for visual analysis, but CSS extraction will be limited. You can still infer most tokens visually.

The user's codebase uses a component library (shadcn, Chakra, MUI): Apply the design by customizing the library's theme/config rather than overriding individual components.

Multiple pages need to match: Use the homepage for overall design tokens, but offer to check inner pages (e.g.,

/pricing

/docs

) if the user wants to match a specific page's look.

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

CSS被压缩/混淆： 退回到截图+视觉分析。你仍可通过视觉检查提取颜色、间距和形状。

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

用户代码库使用组件库（shadcn, Chakra, MUI）： 通过自定义库的主题/配置来应用设计样式，而非覆盖单个组件。

多个页面需要匹配： 使用首页的整体设计令牌，但如果用户希望匹配特定页面（如

/pricing

、

/docs

）的样式，可主动提出检查这些内页。