Skill · em Dados, IA e pesquisa

design-mirror

Replicate the visual style of any website and apply it to your existing codebase. Use this skill whenever the user wants to match a site's design, mirror a UI aesthetic, make their app look like another site, or replicate a specific visual style from a URL. Trigger on phrases like 'make it look…

Procedência

Origem: davila7/claude-code-templates
Caminho: cli-tool/components/skills/web-data/design-mirror
Versão fixada: 57f899e5394bb8ca166f38eacae8f0853cbfe033
Licença: MIT
Espelhado em 25/09/2026
3 downloads no Claude Code Templates (lido em 25/09/2026)

Antes de instalar

6 arquivos · 24 KB · inclui 2 scripts que executam: scripts/scrape_html.sh, scripts/screenshot.sh

Instalar na sua CLI

O comando baixa a versão fixada (commit 57f899e) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.

Claude Code

Neste projeto: instala em .claude/skills/design-mirror/.

d=".claude/skills/design-mirror"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/web-data/design-mirror"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/apply-guide.md" "$u/references/apply-guide.md" \
  -o "$d/references/capture-guide.md" "$u/references/capture-guide.md" \
  -o "$d/references/css-extraction.md" "$u/references/css-extraction.md" \
  -o "$d/scripts/scrape_html.sh" "$u/scripts/scrape_html.sh" \
  -o "$d/scripts/screenshot.sh" "$u/scripts/screenshot.sh" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.claude/skills/design-mirror/.

d="$HOME/.claude/skills/design-mirror"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/web-data/design-mirror"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/apply-guide.md" "$u/references/apply-guide.md" \
  -o "$d/references/capture-guide.md" "$u/references/capture-guide.md" \
  -o "$d/references/css-extraction.md" "$u/references/css-extraction.md" \
  -o "$d/scripts/scrape_html.sh" "$u/scripts/scrape_html.sh" \
  -o "$d/scripts/screenshot.sh" "$u/scripts/screenshot.sh" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Codex

Neste projeto: instala em .agents/skills/design-mirror/.

d=".agents/skills/design-mirror"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/web-data/design-mirror"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/apply-guide.md" "$u/references/apply-guide.md" \
  -o "$d/references/capture-guide.md" "$u/references/capture-guide.md" \
  -o "$d/references/css-extraction.md" "$u/references/css-extraction.md" \
  -o "$d/scripts/scrape_html.sh" "$u/scripts/scrape_html.sh" \
  -o "$d/scripts/screenshot.sh" "$u/scripts/screenshot.sh" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.agents/skills/design-mirror/.

d="$HOME/.agents/skills/design-mirror"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/web-data/design-mirror"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/apply-guide.md" "$u/references/apply-guide.md" \
  -o "$d/references/capture-guide.md" "$u/references/capture-guide.md" \
  -o "$d/references/css-extraction.md" "$u/references/css-extraction.md" \
  -o "$d/scripts/scrape_html.sh" "$u/scripts/scrape_html.sh" \
  -o "$d/scripts/screenshot.sh" "$u/scripts/screenshot.sh" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Antigravity

Neste projeto: instala em .agents/skills/design-mirror/.

d=".agents/skills/design-mirror"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/web-data/design-mirror"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/apply-guide.md" "$u/references/apply-guide.md" \
  -o "$d/references/capture-guide.md" "$u/references/capture-guide.md" \
  -o "$d/references/css-extraction.md" "$u/references/css-extraction.md" \
  -o "$d/scripts/scrape_html.sh" "$u/scripts/scrape_html.sh" \
  -o "$d/scripts/screenshot.sh" "$u/scripts/screenshot.sh" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.gemini/antigravity-cli/skills/design-mirror/.

d="$HOME/.gemini/antigravity-cli/skills/design-mirror"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/web-data/design-mirror"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/apply-guide.md" "$u/references/apply-guide.md" \
  -o "$d/references/capture-guide.md" "$u/references/capture-guide.md" \
  -o "$d/references/css-extraction.md" "$u/references/css-extraction.md" \
  -o "$d/scripts/scrape_html.sh" "$u/scripts/scrape_html.sh" \
  -o "$d/scripts/screenshot.sh" "$u/scripts/screenshot.sh" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Peça ao Rook

Já usa o Rook Labs? Cole no chat do Rook: instale a skill https://rooklabs.sh/marketplace/cct.design-mirror

Prévia do SKILL.md

---
name: design-mirror
description: "Replicate the visual style of any website and apply it to your existing codebase. Use this skill whenever the user wants to match a site's design, mirror a UI aesthetic, make their app look like another site, or replicate a specific visual style from a URL. Trigger on phrases like 'make it look like', 'ma…
---

# 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.

## What This Skill Does

1. **Capture** — Screenshot + HTML scrape the inspiration site via Bright Data
2. **Extract** — Identify the full design system: colors, fonts, spacing scale, border radii, shadows, component patterns
3. **Analyze** — Study the screenshot visually and the CSS structurally to understand the design language
4. **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.

## Setup

Requires:
- `BRIGHTDATA_API_KEY` — from [brightdata.com/cp](https://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"
```

## Step-by-Step Process

### Step 1: Capture the Inspiration Site

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

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

Ver todo o marketplace