# Design Social Vivilo

> Creates rich Instagram art for Vivilo 3D — feed, stories, reels, carousels. Warm organic brand (Baloo 2 + Poppins, coral/olive/yellow). Use when designing social media posts, reels, stories, or marketing art for vivilo3d or similar custom 3D gift businesses.

- Skill: `valentierro/design-social-vivilo` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add valentierro/design-social-vivilo`
- Raw SKILL.md: https://api.skillmd.com/api/skills/valentierro/design-social-vivilo/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: valentierro (https://skillmd.com/u/valentierro)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/valentierro/design-social-vivilo

---


# Design & Social — Vivilo 3D

Marca: **Vivilo 3D** — "A sua imaginação ganha forma". Transforma desenhos infantis em estatuetas, chaveiros e objetos 3D sob encomenda. Repo: `valentierro/vivilo3d`.

## Identidade visual

### Paleta

| Token | Hex | Uso |
|-------|-----|-----|
| Red (coral) | `#E8543A` | Títulos accent, CTAs, @handle |
| Red light | `#FDE8E4` | Fundos suaves, ícones |
| Olive | `#8A8B4E` | Ribbons, feature bars, badges |
| Olive light | `#F0F0E4` | Blobs decorativos |
| Yellow | `#F5A623` | Estrelas, orbs, destaques |
| Yellow light | `#FEF3D9` | Blobs |
| Background | `#FAF8F4` | Canvas base (feed e pad reels) |
| Text primary | `#5C3A28` | Headlines |
| Text secondary | `#7A7368` | Subcopy |

Gradientes: radial blobs nas 3 cores sobre `#FAF8F4`. Stories emocionais: `story-dark` (azul/roxo → coral).

### Tipografia

- **Display:** Baloo 2 ExtraBold (800) — headlines 3D com text-shadow
- **Body:** Poppins 400–700 — subcopy, badges, CTAs
- **Script (opcional):** Patrick Hand — notas manuscritas

Fontes locais: `public/fonts/Baloo2-*.ttf`, `Poppins-*.ttf`

### Elementos recorrentes

- Logo: `public/brand/vivilo-logo-horizontal.png`
- Blobs, estrelas ★, corações ♥, confetti colorido
- Painéis arredondados (border-radius 28–42px) com sombra suave
- **Before/after:** desenho 2D → objeto 3D com orb ✨ central
- Badges pill (campanha, data)
- Footer: chip + CTA pill `vivilo3d.com.br/...` + handle `@vivilo3d`

## Formatos Instagram

| Formato | Dimensão | Classe CSS |
|---------|----------|------------|
| Feed / carrossel | 1080×1080 | `.canvas-feed` |
| Stories / Reels frame | 1080×1920 | `.canvas-story` |

Reels: sequência PNG 1080×1920 → ffmpeg (`scripts/gerar-reel-*.ts`), 30fps, pad `#FAF8F4`, zoompan sutil, xfade transitions.

## Pipeline de produção (repo)

1. **Templates HTML** — `public/instagram/templates/<campanha>/` + `base.css`
2. **Compositing Python** — `scripts/composite-*.py` + `instagram_fonts.py` (Pillow)
3. **Reels TS** — `scripts/gerar-reel-<tema>.ts` (ffmpeg-static)
4. **Legendas** — `public/instagram/<campanha>/LEGENDA.md` ou `LEGENDA-REEL.md`
5. **Output** — PNGs/MP4 em `public/instagram/`

Naming: `instagram-feed-*`, `instagram-story-*-NN-*.png`, `instagram-reel-*-NN-*.png`, `instagram-reel-*-XXs.mp4`

## Estrutura de campanha típica

**Reels (6 slides):** hook → benefício 1 → benefício 2 → comparativo → prova social → CTA

**Stories (3–4 telas):** gancho → conteúdo → detalhe → CTA link

**Feed:** capa forte + before/after ou grid de benefícios + feature bar + footer

## Tom de copy (pt-BR)

- Emocional, familiar, presente com significado
- Destaques: prévia 3D antes de imprimir, envio Brasil, sob encomenda
- Emojis moderados (🎨 🎁 ✨ 👉)
- Hashtags: `#vivilo3d #impressao3d #artesobencomenda #desenhoinfantil #3dbrasil #personalizado`
- CTA: `vivilo3d.com.br/sob-encomenda` ou campanha específica

## Regras de design

1. **Sempre usar paleta Vivilo** — nunca cores frias/genéricas fora do sistema.
2. **Canvas exato** — 1080×1080 ou 1080×1920, sem crop inesperado.
3. **Logo visível** no topo; `@vivilo3d` no footer de feed/stories.
4. **Hierarquia:** headline Baloo grande → ribbon olive/coral → subcopy Poppins → hero visual → CTA pill coral.
5. **Hero = transformação** — mostrar desenho → peça 3D quando possível (assets em `public/gallery/`, `public/instagram/projeto-*`).
6. **Decorativo com moderação** — blobs + 2–3 ícones; não poluir.
7. **CTA claro** — pill gradient coral, texto branco, URL legível.
8. **Campanhas datadas** — badge com data/evento (ex.: "DIA DOS PAIS · 09 AGO").
9. **Reels:** 18–25s, 5–6 cenas, transições xfade, zoompan ≤1.08.
10. **Consistência cross-format** — mesma campanha em feed + stories + reel; legendas em LEGENDA.md.

## Assets de referência

```
public/brand/vivilo-logo-horizontal.png
public/instagram/templates/dia-dos-pais/feed-campanha.html
public/instagram/templates/dia-dos-pais/base.css
public/instagram/cores/LEGENDA.md
public/gallery/mimi-*.png
scripts/instagram_fonts.py
scripts/gerar-reel-cores.ts
```

## Novo conteúdo — checklist

```
- [ ] Campanha e objetivo definidos
- [ ] Template HTML ou script composite escolhido
- [ ] Imagens source em public/instagram/<campanha>/
- [ ] PNGs exportados nos tamanhos corretos
- [ ] Reel gerado (se aplicável)
- [ ] LEGENDA.md com copy + hashtags + ordem stories
- [ ] Preview visual antes de publicar
```

Para specs detalhadas de componentes CSS, ver [reference.md](reference.md).