120 lines
5.0 KiB
Markdown
120 lines
5.0 KiB
Markdown
---
|
|
name: clone-style
|
|
description: Clona o estilo visual de um site ou apresentação extraindo design tokens (cores, tipografia, espaçamento, raios, sombras) e gerando JSON compatível com Stitch, design-engine e pptx-generator. Usar quando "clonar estilo", "clone style", "extrair design", "copiar visual", "tokens design", "clone web", "clone slides", "design tokens".
|
|
layer: wiki
|
|
---
|
|
|
|
# /clone-style — Extrair Design Tokens de Sites e Slides
|
|
|
|
## Princípio fundamental
|
|
|
|
**Não tentes recriar visualmente — extrai o sistema.** Captura os tokens (cores, fontes, espaçamentos, raios) e alimenta uma ferramenta generativa. A fidelidade vem do sistema, não da imitação pixel a pixel.
|
|
|
|
## Modos
|
|
|
|
| Comando | Fonte | Output |
|
|
|---|---|---|
|
|
| `/clone-style web <url>` | Site live (browser real, CSS computado) | `tokens.json` + screenshots componentes |
|
|
| `/clone-style slides <pptx_path>` | Ficheiro PPTX local | `tokens.json` (theme1.xml + slideMasters) |
|
|
| `/clone-style apply <tokens.json>` | Design tokens já extraídos | Aplicação no Stitch / design-engine / pptx-generator |
|
|
|
|
---
|
|
|
|
## Modo 1 — Web
|
|
|
|
### Workflow
|
|
|
|
1. **Abrir URL no Chrome real** via `mcp__claude-in-chrome__navigate` (preferido — captura sessões logged-in se necessário) ou `mcp__chrome-devtools__navigate_page`.
|
|
|
|
2. **Aguardar render completo** (`wait_for` "load" + 2s extra para JS).
|
|
|
|
3. **Injectar script de extracção** via `mcp__claude-in-chrome__javascript_tool` ou `mcp__chrome-devtools__evaluate_script`. O script está em `references/extract-web-tokens.js`. Cola-o dentro do tool call.
|
|
|
|
4. **O script devolve JSON estruturado** com:
|
|
- `colors`: paleta deduplicada + ranking por frequência (top 12)
|
|
- `fonts`: famílias únicas + tamanhos + pesos + line-heights
|
|
- `spacing`: gaps/paddings/margins agrupados (encontra grid base 4px/8px)
|
|
- `borderRadius`: pequeno/médio/grande/full (clusters)
|
|
- `shadows`: box-shadows únicas
|
|
- `componentes`: HTML+CSS de buttons, cards, nav, hero (capturados como referência)
|
|
|
|
5. **Capturar screenshots** dos componentes detectados via `mcp__chrome-devtools__take_screenshot` ou `mcp__claude-in-chrome__computer` (full + por componente).
|
|
|
|
6. **Mapear para Stitch** (ver secção "Mapeamento Stitch" abaixo) — cores → primary seed, fonte mais usada → enum match, raio dominante → ROUND_*.
|
|
|
|
7. **Guardar** em `~/.claude-work/clone-style/<dominio>-<timestamp>/tokens.json` + `screenshots/`.
|
|
|
|
### Comando exemplo
|
|
|
|
```
|
|
/clone-style web https://linear.app
|
|
```
|
|
|
|
Output esperado:
|
|
- `~/.claude-work/clone-style/linear-app-20260407/tokens.json`
|
|
- `~/.claude-work/clone-style/linear-app-20260407/screenshots/full.png`
|
|
- `~/.claude-work/clone-style/linear-app-20260407/screenshots/hero.png`
|
|
- `~/.claude-work/clone-style/linear-app-20260407/screenshots/buttons.png`
|
|
- Resumo no terminal: paleta + fontes + sugestão de aplicação
|
|
|
|
---
|
|
|
|
## Modo 2 — Slides (PPTX)
|
|
|
|
PPTX é um ZIP de XML. Toda a informação de tema está em `ppt/theme/theme1.xml` e `ppt/slideMasters/slideMaster1.xml`.
|
|
|
|
### Workflow
|
|
|
|
1. **Verificar input** existe e é PPTX válido (`unzip -l <file>` para listar entradas).
|
|
|
|
2. **Extrair em tmp**: `unzip -o <file> -d /tmp/clone-style-pptx-<ts>/`.
|
|
|
|
3. **Parsear `theme1.xml`** (Python ou xmllint):
|
|
```python
|
|
import xml.etree.ElementTree as ET
|
|
ns = {'a': 'http://schemas.openxmlformats.org/drawingml/2006/main'}
|
|
tree = ET.parse('ppt/theme/theme1.xml')
|
|
root = tree.getroot()
|
|
|
|
# Cores tema (accent1-6, dark1, dark2, light1, light2, hyperlink, followedHyperlink)
|
|
colors = {}
|
|
for child in root.iter('{http://schemas.openxmlformats.org/drawingml/2006/main}clrScheme'):
|
|
for color_node in child:
|
|
name = color_node.tag.split('}')[1]
|
|
srgb = color_node.find('a:srgbClr', ns)
|
|
sysclr = color_node.find('a:sysClr', ns)
|
|
if srgb is not None:
|
|
colors[name] = '#' + srgb.get('val')
|
|
elif sysclr is not None:
|
|
colors[name] = '#' + sysclr.get('lastClr', '000000')
|
|
|
|
# Fontes (major = headlines, minor = body)
|
|
fonts = {}
|
|
for fs in root.iter('{http://schemas.openxmlformats.org/drawingml/2006/main}fontScheme'):
|
|
major = fs.find('a:majorFont/a:latin', ns)
|
|
minor = fs.find('a:minorFont/a:latin', ns)
|
|
if major is not None: fonts['headline'] = major.get('typeface')
|
|
if minor is not None: fonts['body'] = minor.get('typeface')
|
|
```
|
|
|
|
4. **Parsear `slideMaster1.xml`** para layouts dominantes (background, posições, sizes default).
|
|
|
|
5. **Output `tokens.json`** no mesmo formato do Modo 1 (para que `apply` seja unificado).
|
|
|
|
### Comando exemplo
|
|
|
|
```
|
|
/clone-style slides /home/ealmeida/Downloads/template-cliente.pptx
|
|
```
|
|
|
|
---
|
|
|
|
## Modo 3 — Apply
|
|
|
|
Recebe `tokens.json` e aplica numa das 3 ferramentas:
|
|
|
|
### A) Stitch (web/UI)
|
|
|
|
**Limitação importante:** Stitch só aceita um conjunto restrito de tokens (ver schema `mcp__stitch__create_design_system`):
|
|
- 1 `customColor` (seed) + opcionais `overridePrimaryColor`/`overrideSecondaryColor`/`overrideTertiaryColor`/`overrideNeutralColor`
|
|
- |