---
name: "figma-imgbb-upload"
description: "Pega imagens de um design do Figma e sobe no imgbb, devolvendo links diretos para usar no HTML (troca placeholders COLE-O-LINK-IMGUR-*)."
---

# Figma -> imgbb

Use quando o Vinicius pedir para "subir as imagens no imgbb/imgur", "colocar as fotos do Figma no código" ou quando um HTML tiver placeholders `COLE-O-LINK-IMGUR-NOME`.

## Regras
- Responder em PT-BR, direto e informal.
- A chave da API do imgbb NUNCA fica escrita nesta skill nem em arquivos entregues sem o usuário saber. Pegue de `IMGBB_API_KEY` (variável de ambiente) ou peça ao usuário. Se ele colar a chave no chat, use e lembre no fim que vale gerar outra.
- Endpoint: `POST https://api.imgbb.com/1/upload` com `key`, `image` (base64 ou URL) e `name`. O link final é `response.data.url` (link direto da imagem).

## Passo a passo
1. **Listar as imagens do design.** Chame `get_design_context` (carregue antes a skill figma-design-to-code) em cada seção. O código vem com constantes `const imgNome = "https://www.figma.com/api/mcp/asset/<uuid>.png"`. Separe:
   - **Raster (png/jpg/gif/webp)** -> vão para o imgbb.
   - **SVG** (ícones, logos, setas) -> NÃO sobem. Ficam inline no HTML. Para exportar o SVG use `use_figma` (carregue a skill figma-use) com `node.exportAsync({format:'SVG_STRING'})`; o retorno de cada chamada é limitado a ~20 KB, então divida em várias chamadas.
   - Dê um nome curto a cada raster (pilha, dispositivos, depoimento, selo...). Os placeholders no HTML seguem `COLE-O-LINK-IMGUR-<NOME EM MAIUSCULAS>`.
2. **Tentar o upload daqui.** Teste `curl -sS -m 15 -o /dev/null -w "%{http_code}" https://api.imgbb.com/1/upload`. No ambiente cloud normalmente dá 403 (imgbb e figma.com estão fora da lista liberada) e `use_figma` não tem `fetch`. Se der 403, não insista com outros comandos.
3. **Se o computador do usuário estiver vinculado** (ferramentas `mcp__remote-devices__device_bash` presentes e respondendo), rode o upload nele: baixe cada URL do Figma e envie ao imgbb com o script abaixo, e troque os placeholders nos HTMLs da pasta dele.
4. **Se não estiver vinculado**, entregue o script (`subir-imagens-imgbb.py`) pronto, com as URLs do Figma e os tokens já preenchidos (sem a chave dentro: ele lê `IMGBB_API_KEY` ou pergunta), e explique: coloque na pasta dos HTMLs e rode `python subir-imagens-imgbb.py`. Avise que os links do Figma valem 7 dias; se falhar, exportar a imagem e salvar em `imagens/<nome>.png` ao lado dos HTMLs (o script usa o arquivo local primeiro).
5. Quando os links existirem, substitua os placeholders e confirme com `grep -c COLE-O-LINK`.

## Script modelo (Python 3, sem dependências)
```python
import base64, glob, json, os, urllib.parse, urllib.request
API_KEY = os.environ.get('IMGBB_API_KEY') or input('Chave imgbb: ').strip()
PASTA = os.path.dirname(os.path.abspath(__file__))
IMAGENS = {  # token: (arquivo local, url do Figma)
  'COLE-O-LINK-IMGUR-PILHA': ('pilha.png', 'https://www.figma.com/api/mcp/asset/<uuid>.png'),
}
def obter(arquivo, url):
    local = os.path.join(PASTA, 'imagens', arquivo)
    if os.path.exists(local): return open(local, 'rb').read()
    return urllib.request.urlopen(urllib.request.Request(url, headers={'User-Agent': 'Mozilla/5.0'}), timeout=60).read()
def subir(nome, dados):
    corpo = urllib.parse.urlencode({'key': API_KEY, 'name': nome, 'image': base64.b64encode(dados).decode()}).encode()
    r = json.load(urllib.request.urlopen('https://api.imgbb.com/1/upload', corpo, timeout=120))
    assert r.get('success'), r
    return r['data']['url']
links = {}
for token, (arq, url) in IMAGENS.items():
    try: links[token] = subir(arq, obter(arq, url)); print('ok', token, links[token])
    except Exception as e: print('FALHOU', token, e)
for html in glob.glob(os.path.join(PASTA, '*.html')):
    t = open(html, encoding='utf-8').read(); n = t
    for k, v in links.items(): n = n.replace(k, v)
    if n != t: open(html, 'w', encoding='utf-8').write(n); print('atualizado', os.path.basename(html))
```

## Entrega
Diga quais imagens subiram, os links, quais HTMLs foram atualizados e o que falhou. Se nada rodou (sem rede), diga claramente que NÃO subiu e entregue o script.