--- 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". --- # /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 ` | Site live (browser real, CSS computado) | `tokens.json` + screenshots componentes | | `/clone-style slides ` | Ficheiro PPTX local | `tokens.json` (theme1.xml + slideMasters) | | `/clone-style apply ` | 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/-/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 ` para listar entradas). 2. **Extrair em tmp**: `unzip -o -d /tmp/clone-style-pptx-/`. 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` - `headlineFont` / `bodyFont` / `labelFont` de **enum fixo** (29 Google Fonts: INTER, ROBOTO, MANROPE, GEIST, etc.) - `roundness`: ROUND_4 / ROUND_8 / ROUND_12 / ROUND_FULL - `colorMode`: LIGHT / DARK - `designMd`: markdown livre para tudo o que não cabe nos campos acima **Mapeamento Stitch:** ``` tokens.colors.dominant → customColor (seed) tokens.colors.top[1..3] → overridePrimary/Secondary/Tertiary tokens.colors.neutral → overrideNeutralColor tokens.fonts.headline.family → match com enum Stitch (fuzzy: "Helvetica" → INTER, "Söhne" → INTER, etc.) → headlineFont tokens.fonts.body.family → match enum → bodyFont tokens.borderRadius.dominant → 4px → ROUND_4 → 8-10px → ROUND_8 → 12-14px → ROUND_12 → ≥16px ou full → ROUND_FULL tokens.background.dark? → colorMode: DARK, else LIGHT # Tudo o resto vai para designMd: designMd: | ## Estilo extraído de ### Tipografia adicional - Display: - Caption: ### Espaçamento Grid base: Escala: 4, 8, 16, 24, 32, 48, 64 ### Sombras - sm: - md: - lg: ### Tom visual ``` Depois chama `mcp__stitch__create_design_system` com este payload. ### B) design-engine (brand pack) Cria um JSON brand pack em `/media/ealmeida/Dados/Hub/04-Recursos/Design/brands/.json` com formato: ```json { "name": "", "source": "cloned from ", "extracted_at": "2026-04-07", "colors": { "primary": "#...", "secondary": "#...", "neutral": "#...", "accent": "#..." }, "fonts": { "headline": "Inter", "body": "Inter" }, "borderRadius": "8px", "tone": "minimalista, profissional, denso" } ``` Depois `mcp__design-engine__brand_load()` para usar em `generate_image`. ### C) pptx-generator (slides) Aplica os tokens via XML manipulation no template Descomplicar (ver `/pptx-generator`). Substitui: - Cores accent1-6 do `theme1.xml` pelos extraídos - Fontes major/minor pelas extraídas - Mantém layouts/positioning do template Descomplicar (não copia layouts da fonte original — só estilo) --- ## Mapeamento de fontes (fuzzy → Stitch enum) Quando `tokens.fonts.headline.family` não está no enum Stitch, mapear: | Família detectada | Stitch enum | |---|---| | Helvetica, Helvetica Neue, Arial, sans-serif genérico | INTER | | Söhne, Inter, system-ui | INTER | | Roboto, Roboto Flex | (não existe — usar INTER) | | SF Pro, -apple-system | INTER | | GT Walsheim, Geist, Mona Sans | GEIST | | Manrope | MANROPE | | Plus Jakarta, Jakarta | PLUS_JAKARTA_SANS | | DM Sans | DM_SANS | | IBM Plex Sans | IBM_PLEX_SANS | | Sora | SORA | | Times, serif genérico | NEWSREADER | | Garamond, EB Garamond | EB_GARAMOND | | Playfair, Domine | DOMINE | Se nenhum match óbvio, **default INTER** (mais neutro). Adicionar nota em `designMd` com a fonte original detectada. --- ## Anti-patterns | Não fazer | Razão | |---|---| | Tentar reproduzir layout pixel a pixel | Impossível e gera "AI slop" | | Usar `cssstats.com` ou scrapers HTML estáticos | Falham em sites JS-rendered (Next.js, React, etc.) | | Importar HTML inteiro como Stitch screen | Stitch não importa HTML; gera de prompt+tokens | | Aplicar Stitch design-system sem `customColor` válido | Validation error — `customColor` é obrigatório | | Esquecer de usar `designMd` para tokens fora do enum | Perde-se 50% da informação extraída | --- ## Validação (critérios para "OK") Antes de declarar a clonagem completa: 1. ✅ `tokens.json` existe e tem `colors`, `fonts`, `borderRadius` no mínimo 2. ✅ Pelo menos 1 screenshot guardado 3. ✅ Mapeamento Stitch produz `customColor` válido (hex format) 4. ✅ Pelo menos 1 fonte mapeada para enum Stitch 5. ✅ `designMd` tem ≥3 secções (tipografia, espaçamento, tom) 6. ✅ Se modo `apply`: validação visual pelo utilizador antes de marcar "concluído" --- ## Exemplos práticos ### Clonar Linear ``` /clone-style web https://linear.app ``` Esperado: paleta dominante azul/roxo, fontes Inter ou similar, raios 6-8px, dark mode default. ### Clonar template cliente ``` /clone-style slides ~/Downloads/cliente-deck.pptx ``` Esperado: cores accent do tema PPTX, fontes major/minor, proposta de paleta unificada. ### Aplicar a novo projecto Stitch ``` /clone-style apply ~/.claude-work/clone-style/linear-app-20260407/tokens.json ``` Cria design system Stitch + brand pack design-engine. --- ## Referências internas - `references/extract-web-tokens.js` — script JS de extracção CSS computado - `references/extract-pptx-theme.py` — script Python para parsear theme1.xml - `~/.claude-work/clone-style/` — cache de extracções (timestamped) --- **Versão:** 1.0.0 | **Data:** 2026-04-07 | **Autor:** Descomplicar (sessão 5) **Origem:** Necessidade real — clonagem de estilos em propostas comerciais. Substitui tentativas falhadas com Penpot, scrapers HTML, screenshots+AI, Figma import.