菜单
Workflow completo para usar Open Design — quando usar, como estruturar, prompts prontos, integração com conteúdo textual
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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!