Menu
Workflow completo para usar Open Design — quando usar, como estruturar, prompts prontos, integração com conteúdo textual
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Skill de brainstorming para projetos de marketing — explore ideias, valide escopo, refine objetivos antes de executar
Cria apresentações e pitch decks com storytelling visual — estrutura, conteúdo de slides, notas de orador
Cria conteúdo para redes sociais — LinkedIn, Instagram, Twitter/X, Facebook — com copy otimizada para cada plataforma
Skill de roteamento inteligente — decide qual agent/subagent/skill usar baseado na intenção do usuário
Skill de execução para projetos de marketing — delega tarefas para subagents, valida entregas, mantém ledger de progresso
Skill de finalização para projetos de marketing — apresenta pacote final, obtém aprovação, documenta aprendizados
| name | open-design-workflow |
| description | Workflow completo para usar Open Design — quando usar, como estruturar, prompts prontos, integração com conteúdo textual |
| triggers | ["use open design","crie no open design","protótipo visual","layout no open design","quando usar open design"] |
Objetivo: Guiar o uso do Open Design para materializar conteúdo textual em protótipos visuais profissionais, maximizando a entrega final.
Prototipagem de Landing Pages
Dashboards e Data Visualization
Apresentações Interativas
Email Templates
Social Media Templates
Documentos Visuais
Princípio: "Preencha todos os gaps no texto antes de materializar visualmente."
Antes de abrir o Open Design, valide:
Para Landing Pages:
Para Apresentações:
Para Dashboards:
Para Email Templates:
Para Documentos Visuais:
## Estrutura para Open Design
### Seção 1: Hero
- Componente: Hero Section
- Conteúdo: [headline + subtítulo + CTA]
- Layout: [centralizado / split / fullscreen]
### Seção 2: Benefícios
- Componente: Feature Grid
- Conteúdo: [3-5 benefícios com ícones]
- Layout: [3 colunas / 2 colunas / lista]
### Seção 3: Prova Social
- Componente: Testimonials
- Conteúdo: [3 depoimentos]
- Layout: [carousel / grid / lista]
[... continue para todas as seções]
Abra o Open Design
cd tools/open-design
npm start
Acesse: http://localhost:3333
Crie Novo Projeto
[nome-do-projeto]-[tipo]lancamento-produto-x-landing-pageEscolha Template Base
Use Prompts Prontos (veja biblioteca abaixo)
Exporte
Após exportar do Open Design:
Salve em output/
output/landing-pages/output/apresentacoes/output/dashboards/output/emails/templates/Documente no Relatório
## Entregas Visuais (Open Design)
- Landing page: `output/landing-pages/lancamento.html`
- Apresentação: `output/apresentacoes/pitch-deck.pdf`
- Dashboard: `output/dashboards/metricas.html`
Valide com Usuário
Crie uma hero section para [produto/serviço]:
- Headline: "[headline principal]"
- Subheadline: "[subtítulo explicativo]"
- CTA: "[texto do botão]"
- Layout: [centralizado com imagem de fundo / split com imagem à direita]
- Estilo: [moderno / minimalista / corporativo]
- Cores: [paleta do projeto]
Crie uma seção de benefícios com 3 colunas:
- Benefício 1: [título] + [descrição curta] + [ícone]
- Benefício 2: [título] + [descrição curta] + [ícone]
- Benefício 3: [título] + [descrição curta] + [ícone]
- Layout: grid 3 colunas responsivo
- Estilo: cards com hover effect
Crie uma seção de depoimentos:
- Depoimento 1: "[quote]" — [Nome, Cargo, Empresa]
- Depoimento 2: "[quote]" — [Nome, Cargo, Empresa]
- Depoimento 3: "[quote]" — [Nome, Cargo, Empresa]
- Layout: carousel ou grid 3 colunas
- Inclua: foto, nome, cargo, empresa, logo
Crie uma tabela de preços com 3 planos:
- Plano Básico: [preço] + [5 features]
- Plano Pro: [preço] + [7 features] + [badge "Mais Popular"]
- Plano Enterprise: [preço] + [features ilimitadas]
- Layout: 3 colunas com destaque no plano Pro
- CTA: botão em cada plano
Crie um slide de capa:
- Título: "[título da apresentação]"
- Subtítulo: "[subtítulo]"
- Data: [DD/MM/AAAA]
- Apresentador: [Nome]
- Layout: centralizado com logo
- Fundo: [cor sólida / gradiente / imagem]
Crie um slide de problema:
- Título: "O Problema"
- Conteúdo: [descrição do problema em 2-3 bullets]
- Dado impactante: "[estatística]"
- Visual: [ícone / imagem que representa a dor]
- Layout: split (texto esquerda, visual direita)
Crie um slide de solução:
- Título: "Nossa Solução"
- Conteúdo: [3 benefícios principais em bullets]
- Visual: [screenshot / diagrama / mockup]
- Layout: split (visual esquerda, texto direita)
Crie um slide de dados:
- Título: "[título do gráfico]"
- Tipo de gráfico: [barras / linhas / pizza / área]
- Dados: [inserir dados ou descrever]
- Insight: [1 linha com o principal takeaway]
- Fonte: [fonte dos dados]
Crie uma linha de KPI cards:
- KPI 1: [nome] = [valor] ([variação%])
- KPI 2: [nome] = [valor] ([variação%])
- KPI 3: [nome] = [valor] ([variação%])
- KPI 4: [nome] = [valor] ([variação%])
- Layout: 4 cards em linha
- Estilo: cards com ícone, valor grande, variação colorida
Crie um gráfico de linha temporal:
- Título: "[métrica ao longo do tempo]"
- Período: [últimos 30 dias / 6 meses / 1 ano]
- Dados: [descrever tendência]
- Estilo: linha suave com área preenchida
- Inclua: tooltip com valores, legenda
Crie uma tabela de dados:
- Título: "[título da tabela]"
- Colunas: [col1, col2, col3, col4]
- Linhas: [5-10 linhas de dados]
- Funcionalidades: ordenação, filtro, paginação
- Estilo: linhas alternadas, hover effect
Crie um header de email:
- Logo: [inserir logo]
- Título: "[título do email]"
- Subtítulo: "[subtítulo opcional]"
- Layout: centralizado
- Fundo: [cor da marca]
Crie o corpo de um email:
- Saudação: "Olá [Nome],"
- Parágrafo 1: [intro + contexto]
- Parágrafo 2: [conteúdo principal]
- CTA: botão "[texto do botão]"
- Assinatura: [nome + cargo + empresa]
- Layout: coluna única, max-width 600px
Crie um footer de email:
- Links sociais: [LinkedIn, Twitter, Instagram]
- Link de descadastro: "Cancelar inscrição"
- Endereço: [endereço da empresa]
- Layout: centralizado, texto pequeno
# Estrutura: Landing Page de Lançamento
## Seção 1: Hero
- Headline: "[Produto X] está aqui"
- Subheadline: "A solução que você esperava para [problema]"
- CTA: "Comece agora"
- Visual: [hero image ou vídeo]
## Seção 2: Prova Social (Logos)
- "Usado por empresas como:"
- 6 logos de clientes
## Seção 3: Problema
- Título: "O desafio que você enfrenta"
- 3 bullets descrevendo a dor
- Dado: "73% das empresas sofrem com isso"
## Seção 4: Solução
- Título: "Como [Produto X] resolve"
- 3 benefícios principais com ícones
- Screenshot do produto
## Seção 5: Features
- Título: "Recursos poderosos"
- Grid 2x3 com 6 features
- Cada feature: ícone + título + descrição
## Seção 6: Depoimentos
- 3 depoimentos com foto, quote, nome, cargo
## Seção 7: Preços
- 3 planos: Básico, Pro, Enterprise
- Tabela comparativa de features
## Seção 8: FAQ
- 5-7 perguntas frequentes
- Accordion (expansível)
## Seção 9: CTA Final
- Headline: "Pronto para começar?"
- Subheadline: "Junte-se a [X] empresas"
- CTA: "Comece grátis"
# Estrutura: Pitch Deck (10 slides)
## Slide 1: Capa
- Título: [Nome da Empresa]
- Subtítulo: [Tagline]
- Logo + Data
## Slide 2: Problema
- "O problema que resolvemos"
- 3 bullets + dado impactante
## Slide 3: Solução
- "Nossa solução"
- 3 benefícios + screenshot
## Slide 4: Mercado
- TAM, SAM, SOM
- Gráfico de mercado
## Slide 5: Produto
- Como funciona (3 passos)
- Screenshots
## Slide 6: Tração
- Métricas de crescimento
- Gráfico de usuários/receita
## Slide 7: Modelo de Negócio
- Como ganhamos dinheiro
- Preços + unit economics
## Slide 8: Competição
- Matriz comparativa
- Nossos diferenciais
## Slide 9: Time
- Fotos + bios dos fundadores
- Advisors
## Slide 10: Ask
- Quanto estamos levantando
- Uso dos recursos
- Contato
1. Crie layout no Open Design
2. Identifique onde precisa de imagens custom
3. Use FLUX para gerar imagens:
- Hero images
- Backgrounds
- Ícones customizados
4. Importe imagens no Open Design
5. Exporte HTML/PDF final
1. Crie template no Open Design
2. Exporte HTML
3. Use Pictify para gerar variações:
- Diferentes cores
- Diferentes textos
- A/B testing
4. Salve variações em output/
1. Crie layout no Open Design
2. Exporte PDF
3. Use document-generator para:
- Adicionar página de números
- Adicionar marca d'água
- Merge com outros documentos
4. Salve PDF final em output/documentos/
Antes de exportar do Open Design:
Nunca:
Sempre:
@marketing-orchestrator "Crie uma landing page para o Produto X"
output/
├── landing-pages/
│ ├── produto-x.html (Open Design)
│ └── produto-x.pdf (Open Design)
├── artigos/
│ └── copy-landing-page.md (Content Creator)
├── imagens/
│ ├── hero-image.png (FLUX)
│ └── screenshots/ (Visual Designer)
└── RELATORIO-FINAL.md
.opencode/templates/open-design-prompts.mdprojetos/_modelo/exemplos/open-design/Use Open Design para materializar conteúdo textual em protótipos visuais profissionais, sempre após maximizar o conteúdo!