open-design-landing
Faz seu agente criar um site de página única com um visual editorial e de colagem. É útil para apresentar uma marca ou produto de forma única e atraente. Cria um site visualmente impactante.
O que ela faz
Cria um site de página única com um visual editorial elegante, inspirado em revistas. Ele usa um design específico chamado 'Atelier Zero' com elementos como fundo de papel, fontes distintas e imagens em colagem.
Quando usar
- ✓Lançar um novo produto ou serviço.
- ✓Apresentar um portfólio de trabalhos.
- ✓Criar uma página de marketing para uma marca.
Exemplo do que pedir para a IA
“Quero criar uma página de destino para minha marca de café artesanal, com o nome 'Grão Dourado'. Preciso de um visual editorial que transmita sofisticação e qualidade.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
Você me fornece as informações sobre sua marca e o que deseja destacar. A IA então usa essas informações para montar o conteúdo e, opcionalmente, cria imagens únicas no estilo de colagem para deixar o site ainda mais especial.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add nexu-io/open-design --skill open-design-landingOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/design-templates/open-design-landing/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
open-design-landing
Crie um site editorial de página única (ou um slide deck — veja a
habilidade irmã open-design-landing-deck)
no sistema de design Atelier Zero: fundo em papel aquecido, Inter
Tight + Playfair Display, spans de ênfase em serifas itálicas, linhas
pontilhadas finas, pontos de terminação em coral, movimento de revelação
ao rolar e 16 colagens surreais.
Esta é a receita canônica de marketing OpenDesign — o resultado de exemplo é a própria página que você vê em open-design.
A habilidade é totalmente parametrizada. O agente preenche um
inputs.json tipado a partir do briefing do usuário; o compositor
transforma esse JSON + o styles.css canônico em um
artefato implantável.
inputs.json + styles.css 16 image slots
│ │
└──────────► scripts/compose.ts ◄────────────┘
│
▼
<out>/index.html (self-contained)
<out>/assets/ (PNG or SVG)
O que você recebe
Um único arquivo HTML com tudo de:
- Barra superior editorial (faixa de volume / edição / idioma), navegação fixa estilo Headroom com contagem de estrelas do GitHub em tempo real.
- 8 seções numeradas com algarismos romanos e fundo texturizado de papel: hero (com 3 anéis de estatísticas + índice de 4 etapas), sobre, capacidades (4 cards), labs (5 cards + filtros + barra de progresso), método (4 etapas com miniaturas), trabalho selecionado (bloco escuro + 2 cards inclinados), depoimento (citação em destaque + 5 glifos de parceiros), CTA (fita + pílula de e-mail).
- Rodapé com 4 colunas de links + palavra de destaque em itálico e serifa.
- Movimento de revelação ao rolar em cada seção (IntersectionObserver,
respeita
prefers-reduced-motion). - Totalmente responsivo em breakpoints de 1280 / 1080 / 880 / 560.
Contrato de fluxo de trabalho
Execute estas quatro etapas em ordem. O agente deve completar cada etapa antes de prosseguir, e preferir fazer uma pergunta focada ao usuário em vez de inventar texto.
1. Coletar inputs da marca
Use AskQuestion (ou o equivalente em sua UI) para coletar o briefing da
marca em partes; não despeje o schema.ts inteiro para o usuário.
Mapeie as respostas para inputs.json que correspondam à forma tipada.
Os oito grupos de perguntas, em ordem:
| Grupo | Campos do Schema | Respostas mínimas | Notas |
|---|---|---|---|
| 1 | brand.{name,mark,tagline,description,location} |
5 | Mark = glifo único (Ø, ▲, ★…) |
| 2 | brand.{license,version,year,primary_url,contact_email} |
4 | URL é obrigatório; licença padrão Apache-2.0 |
| 3 | nav[] (até 5) |
3 | Contadores de contagem opcionais |
| 4 | hero.{label,headline,lead,primary,secondary,stats} |
Todos | Título como MixedText (sem serifa + em + ponto) |
| 5 | about + capabilities.cards[4] |
Todos | 4 cards × {número,tag,título,corpo} |
| 6 | labs.cards[5] + method.steps[4] |
Todos | Ambos os grids com aridade fixa |
| 7 | work.cards[2] + testimonial |
Todos | 5 glifos de parceiros como dados de caminho SVG inline |
| 8 | cta + footer.{columns[4],mega} |
Todos | Mega kicker é um MixedText como os títulos |
Abra inputs.example.json para um exemplo completo
trabalhado (o próprio OpenDesign).
2. Decidir a estratégia de imagem
| Estratégia | Quando escolher | Custo / latência |
|---|---|---|
placeholder |
Primeira passagem. Demo. Slide interno. Sem orçamento de imagem ainda. | $0, <1s |
generate |
Entrega final. A marca quer colagens originais. | ~$0.40, ~6 min |
bring-your-own |
O usuário tem PNGs de direção de arte. Solte-os em assets_path. |
$0, 0s |
Defina inputs.imagery.strategy de acordo.
placeholder — modo de moldura
npx tsx scripts/placeholder.ts <out>/assets/
Escreve 16 arquivos .svg (com aliases .png para compatibilidade) em
<out>/assets/. Cada placeholder mostra o ID do slot, a proporção, os pixels
…
Perguntas frequentes
O que é o 'Atelier Zero'?
É um estilo de design visual que usa um fundo que parece papel, fontes específicas (Inter Tight e Playfair Display), ênfase em texto itálico, linhas pontilhadas e pontos finais em coral, além de animações sutis e colagens surreais.
Preciso ter as imagens prontas?
Não necessariamente. Você pode pedir para a IA gerar 16 imagens de colagem únicas para você, ou usar imagens que já tenha, ou ainda usar imagens de exemplo enquanto decide.
O site é responsivo?
Sim, o site é totalmente responsivo, o que significa que ele se adapta bem a diferentes tamanhos de tela, como computadores, tablets e celulares.
Detalhes
Descrição original do autor
Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic OpenDesign uses for its own marketing surface. The agent fills a typed `inputs.json` from a brand brief, optionally generates 16 collage assets via gpt-image-2, then runs a pure-function composer that emits a self-contained HTML file.
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #486
- Licença
- Apache-2.0
- Atualizada em
- 16/10/2026
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC