Categoria Design · Inteligência Apache-2.0 · Feito na Terra
Estrela · 62.5KBaixar
PT-BR
Open Source Claude Design

Templates.

Artefatos construídos por agentes que você pode fazer fork e deployar — protótipos, apresentações, templates de imagem e vídeo. Execute-os com suas próprias chaves usando o agente local; os prompts, cartazes e HTML de exemplo estão todos sob Apache-2.0.

Total · 254
Tipo de artefato
Pré-visualização de Portfólio de criador 3D — Jack prototipo
@open-design Open Design
Ler prompt completo →

Portfólio de criador 3D — Jack

Landing page escura e premium para um portfólio de criador 3D: um hero em tela cheia com título em gradiente e um retrato 3D magnético que segue o mouse, um marquee horizontal de imagens controlado pela rolagem, uma seção About com decorações 3D nos cantos e texto revelado caractere a caractere ao rolar, uma lista de serviços em fundo branco e cards de projeto que se empilham encolhendo conforme a rolagem.
Usar este template
Pré-visualização de AeroCore — Landing page cinematográfica de motores aeroespaciais prototipo
@eli Open Design
Ler prompt completo →

AeroCore — Landing page cinematográfica de motores aeroespaciais

Site de marketing premium, cinematográfico e movido por rolagem para propulsão aeroespacial: um hero com gradiente de azul a branco quente com wordmark em parallax e still do motor, uma miniatura de missão que cresce em um vídeo sticky em tela cheia, uma vitrine com abas fixada, uma grade de capacidades bento com cards de vídeo em loop e um marquee de ferramentas, um gráfico de estatísticas escuro animado, um trilho horizontal de histórias em vídeo e um rodapé de campo de estrelas.
Usar este template
Pré-visualização de Evergreen Finance — Landing page fintech Kova prototipo
@eli Open Design
Ler prompt completo →

Evergreen Finance — Landing page fintech Kova

Landing page fintech Kova premium: hero em tela cheia com fundo de vídeo boomerang em avanço/retrocesso, revelações com desfoque FadeUp, cards de dashboard flutuantes (gráfico de linha de poupança + gráfico de barras de gastos), um depoimento em duas colunas com um vídeo quadrado em reprodução automática e uma grade de quatro recursos com cards de imagem e um gráfico de rosca de gastos.
Usar este template
Pré-visualização de Captura de tela de jogo - ARPG Três Reinos: Tiro de arco de Lü Bu em Yuanmen imagem
@open-design-contributors Open Design
Ler prompt completo →

Captura de tela de jogo - ARPG Três Reinos: Tiro de arco de Lü Bu em Yuanmen

Captura de tela de action-RPG da famosa cena de Three Kingdoms onde Lü Bu atira em uma alabarda distante no portão do acampamento. Estilo fotorrealista cinematográfico de Black Myth: Wukong com Unreal Engine 5, visão em terceira pessoa e HUD completo (barras de HP e qi, minimapa, barra de habilidades, marcador de alvo com distância). Otimizado para gpt-image-2 no formato 16:9.
Usar este template
Pré-visualização de Game UI - HUD MMO mundo aberto China antiga imagem
@open-design-contributors Open Design
Ler prompt completo →

Game UI - HUD MMO mundo aberto China antiga

Gera um mockup de screenshot de HUD in-game para um MMO de mundo aberto AAA ambientado na China antiga, com estilo fotorrealista cinematográfico de Black Myth: Wukong. Inclui elementos completos de HUD MMO: retrato de personagem, barras de HP/MP, hotbar de habilidades com ícones de caligrafia chinesa, minimapa, rastreador de missões, janela de chat e placas de NPC, em formato 16:9.
Usar este template
Pré-visualização de Html Ppt Navegação Setas Minimal apresentacao
@open-design Open Design
Ler prompt completo →

Html Ppt Navegação Setas Minimal

Keynote minimalista de 8 páginas com navegação por setas — cada página com fundo monocromático (índigo / creme / carmesim / turquesa / cinza / roxo / branco / carvão), título display 160px + linha de destaque grossa 4px, lista Mono com prefixo →, indicação de teclas ← → canto inferior esquerdo + número de página canto inferior direito, amplos espaços em branco. Ideal para keynotes, lançamentos e apresentações onde há muito a dizer mas pouco a mostrar.
Usar este template
Pré-visualização de Html Ppt Hermes Terminal Cibernético apresentacao
@open-design Open Design
Ler prompt completo →

Html Ppt Hermes Terminal Cibernético

Template de apresentação estilo terminal escuro com fundo preto #0a0c10, grid cibernético 56px, vinheta CRT, linhas de varredura, chrome de semáforo de janela, títulos `$ prompt` de linha de comando, texto verde-menta #7ed3a4, JetBrains Mono, gráficos de barras outline, cursor piscante, tags âmbar/verde/vermelho e blocos de código escuros. Ideal para reviews de CLI/agentes/ferramentas dev (trace, diff, benchmark).
Usar este template
Pré-visualização de Planta de arquitetura de conhecimento Html Ppt apresentacao
@open-design Open Design
Ler prompt completo →

Planta de arquitetura de conhecimento Html Ppt

Deck de arquitetura blueprint creme — base papel creme #F0EAE0 + destaque vermelho ferrugem único #B5392A, máscara de grade blueprint 48px, cartões duros com borda preta 2px, caixas de etapas de pipeline (uma elevada), callout de insight vermelho ferrugem à direita, fonte serifada grande Playfair, loop de feedback SVG tracejado. Sem gradientes, sem sombras suaves, sério e amigável para impressão.
Usar este template
Pré-visualização de Html Ppt Obsidian Claude Gradient apresentacao
@open-design Open Design
Ler prompt completo →

Html Ppt Obsidian Claude Gradient

Tema de deck com gradiente roxo escuro do GitHub com fundo GitHub-dark #0d1117, luz ambiente radial azul-roxo, máscara de grade 60px, layout centralizado, tags pill roxas, títulos com gradiente tricolor (#a855f7→#60a5fa→#34d399), paleta de código estilo GitHub e blocos destacados com borda esquerda roxa. Ideal para workflows de desenvolvedores, MCP, Agent e tutoriais de ferramentas de dev.
Usar este template
Pré-visualização de Html Ppt Zhangzara Biennale Yellow apresentacao
@open-design Open Design
Ler prompt completo →

Html Ppt Zhangzara Biennale Yellow

Biennale Yellow — Amarelo solar sobre pergaminho quente com serif índigo profundo e gradientes atmosféricos de brilho solar. Ideal para cartazes de bienais de arte, programas anuais de museus, apresentações de exposições, anúncios de instituições artísticas, brochuras de conferências de design, propostas curatoriais, publicações literárias e retrospectivas de estúdios.
Usar este template
Pré-visualização de Html Ppt Zhangzara Long Table apresentacao
@open-design Open Design
Ler prompt completo →

Html Ppt Zhangzara Long Table

Long Table — Estética de clube de jantar em creme quente e vermelho ferrugem com títulos grotesk em caixa alta e negrito, Fraunces em itálico e botões contornados em formato de pílula. Ideal para marcas calorosas, íntimas e modernas de hospitalidade e comunidade: clubes de jantar, séries de jantares, pequenos restaurantes, eventos de estúdios criativos, propostas de associação, marcas de lifestyle e vinho.
Usar este template
Pré-visualização de Html Ppt Zhangzara Sakura Chroma apresentacao
@open-design Open Design
Ler prompt completo →

Html Ppt Zhangzara Sakura Chroma

Sakura Chroma — Estética vintage de embalagem de fita cassete japonesa: papel creme, fitas de arco-íris diagonais, tipografia condensada em negrito, checkboxes estilo JIS. Ideal para apresentações de marcas de hardware indie, cronogramas de lançamentos musicais, retrospectivas de estúdios analógicos, propostas de revistas, lançamentos de produtos kawaii-tech e relatórios anuais de estúdios criativos.
Usar este template
Pré-visualização de Hyperframes video
@open-design Open Design
Ler prompt completo →

Hyperframes

Crie composições de vídeo, animações, cartões de título, sobreposições, legendas, narrações, visuais reativos ao áudio e transições de cena em HyperFrames HTML. Suporta conteúdo de vídeo HTML, legendas sincronizadas com áudio, narração texto-para-fala, animações reativas ao áudio (sincronia de batida, brilho, pulso), realce de texto animado (varreduras de marcador, círculos desenhados, linhas de explosão, rabiscos, esboços) e transições de cena (crossfades, wipes, revelações, transições shader).
Usar este template
Pré-visualização de Infográfico - Detalhamento de coreografia de dança otaku (Gokuraku Jodo, 16 painéis) imagem
@open-design-contributors Open Design
Ler prompt completo →

Infográfico - Detalhamento de coreografia de dança otaku (Gokuraku Jodo, 16 painéis)

Um pôster vertical 2:3 composto por uma grade 4×4 de 16 painéis quadrados, mostrando o detalhamento coreográfico completo da famosa música de dança otaku japonesa 極楽浄土 (Gokuraku Jodo). Cada painel mostra a mesma ídol de anime semi-realista em poses de dança características, projetado como referência de poses para geração de vídeo IA com gpt-image-2, formato 2:3.
Usar este template
Pré-visualização de Layered Depth — Estúdio de arquitetura Qelora prototipo
@eli Open Design
Ler prompt completo →

Layered Depth — Estúdio de arquitetura Qelora

Landing parallax em camadas e cinematográfica para um estúdio de arquitetura: vídeo de fundo em tela cheia, um enorme logotipo de marca centralizado atrás de uma laje escultórica em parallax, uma máquina de estados de vídeos de pássaros animados, pílulas de navegação e painéis de informação em vidro fosco, e uma segunda seção de vídeo em tela cheia com um título editorial centralizado.
Usar este template
Pré-visualização de Nimbus Grid — Armazenamento em nuvem seguro prototipo
@eli Open Design
Ler prompt completo →

Nimbus Grid — Armazenamento em nuvem seguro

Site de marketing de página única em tons escuros e dourado quente para um produto de armazenamento em nuvem seguro: um hero com shader com console ao vivo e efeito de máquina de escrever, um acordeão de plataforma fixo guiado por rolagem, um campo de barras de preços que se transforma ao rolar, cartões de segurança, uma vitrine de console com inclinação 3D e um cubo de operações que explode ao clicar.
Usar este template
Pré-visualização de Open Design Landing Deck apresentacao
@open-design Open Design
Ler prompt completo →

Open Design Landing Deck

Produz um deck de slides em arquivo único na linguagem visual Atelier Zero (fundo papel quente, ênfases serifadas itálicas, pontos terminais coral, placas colagem surrealista). Com paginação horizontal estilo revista (←/→, roda, deslizar), faixa chrome com marca e contador de slides, grade de visão geral ESC, barra de progresso coral, e herda a folha de estilos canônica + biblioteca de imagens de 16 slots da skill irmã open-design-landing.
Usar este template
Pré-visualização de Orbit Notion prototipo
@open-design Open Design
Ler prompt completo →

Orbit Notion

Habilidade de briefing do Open Orbit — selecionada pelo pipeline do Orbit quando o Notion é o único conector conectado do usuário ou quando o usuário limita explicitamente seu resumo diário ao Notion. Extrai as edições de documentos, comentários, menções e alterações de linhas de banco de dados das últimas 24 horas da conexão autenticada do Notion do usuário e renderiza o resumo como uma página nativa do Notion (elementos callout/toggle/tabela de banco de dados). Esta habilidade não deve ser acionada manualmente — ela é invocada pelo agendador de resumo diário do Orbit com dados do Notion em tempo real.
Usar este template
Pré-visualização de Replit Deck apresentacao
@open-design Open Design
Ler prompt completo →

Replit Deck

Deck HTML de arquivo único com deslize horizontal no estilo da galeria de templates de landing page do Replit Slides. Oito temas distintos (helix, holm, vance, bevel, world-dark, world-mint, atlas, bluehouse) – cada um um sistema visual completo (paleta + tipografia + acento) capturado de replit.com/slides. Escolha um tema, não misture. Para pitch decks, relatórios de diretoria, memos de marca, revelações de campanha – quando o usuário quer explicitamente o estilo Replit Slides.
Usar este template
Pré-visualização de Carrossel Social prototipo
@open-design Open Design
Ler prompt completo →

Carrossel Social

Um carrossel de três cartões para mídias sociais em formato 1080×1080 – três painéis cinematográficos alinhados à marca com títulos que se conectam ao longo da série ('em frente.' → 'para o próximo.' → 'olhando adiante.'). Cada cartão inclui marca, número/total, legenda e affordance de 'loop'. Use para solicitações de 'post em carrossel', 'carrossel social', 'carrossel do Instagram', 'série do LinkedIn', 'cartões de thread do X' ou '三连发'.
Usar este template
Pré-visualização de Post para Redes Sociais - Storyboard de Dança Sensacional (8 Takes) imagem
@open-design-contributors Open Design
Ler prompt completo →

Post para Redes Sociais - Storyboard de Dança Sensacional (8 Takes)

Conjunto completo de prompts de storyboard com 8 takes para gerar sequência de dança coerente. Otimizado para modelos gpt-image-2 com tokens de estilo globais, prompt negativo reutilizável e oito prompts por take (pose de abertura, groove de quadril, onda corporal, torção de cintura, balanço lateral, movimento de cabelo, postura de poder, pose final).
Usar este template
Pré-visualização de Stellar Launch — Launchex Awards prototipo
@eli Open Design
Ler prompt completo →

Stellar Launch — Launchex Awards

Landing page premium para prêmios / premiações de venture: um invólucro de cartão branco embutido com cantos arredondados, um hero de vídeo em tela cheia com CTA em clip-path chanfrado, uma seção de inscrições em três colunas com cartões de indicação angulares ao redor de um vídeo quadrado e uma grade de estatísticas sobre os fundadores usando cartões de imagem plus-darker e números em texto com gradiente.
Usar este template
Pré-visualização de Velar. — Imóveis de luxo prototipo
@open-design Open Design
Ler prompt completo →

Velar. — Imóveis de luxo

Landing page imobiliária de luxo de página única com estética cinematográfica: um pré-carregador estilo máquina de escrever que sobe e some, uma imagem de prédio orientada pelo scroll que surge de baixo e amplia enquanto se fixa a uma seção escura de declaração, uma faixa de estatísticas escura sticky com números em contagem crescente e uma galeria de vídeo que se expande ao passar o cursor e desliza por cima da seção escura.
Usar este template
video
@open-design-contributors Open Design
Ler prompt completo →

Video - Desk Hologram AR on Real Workspace (Seedance 2.0)

A two-phase Seedance 2.0 workflow for the viral desk-hologram format: first lock a photoreal keyframe on a real developer desk (Open Design UI on the monitor, a cobalt-blue extraterrestrial hunter standing on the keyboard), then animate that still into a ~15s 9:16 image-to-video clip. Tuned for believable AR passthrough — medium-strength VFX, real desk clutter, monitor glow spill on the character, and light physical interactions (open mug, keyboard step, bow draw). Inspired by the desk-hologram Seedance 2.0 trend; no copyrighted character names in the prompt.
Usar este template
video
@open-design-contributors Open Design
Ler prompt completo →

Vídeo - Three Kingdoms ARPG - Lyu Bu arco e flecha Yuanmen (Seedance 2.0)

Sequência de ação cinemática de ~10 segundos: Lyu Bu estica um arco laqueado vermelho e dispara uma flecha de qi dourada em direção a uma alabarda distante. Otimizado para Seedance 2.0 com controle rigoroso de câmera, física de arco e flecha, animação de vento, poeira e bandeiras, e gradação de cor estilo screenshot. Complementa o template de imagem correspondente.
Usar este template
Pré-visualização de Vídeo curto video
@open-design Open Design
Ler prompt completo →

Vídeo curto

Geração de vídeos curtos — clipes de 3-10 segundos para revelação de produtos, teasers em movimento e loops ambientes. Padrão Seedance 2, mas funciona igualmente com Kling 3 / 4, Veo 3 ou Sora 2. Saída em arquivo MP4 único salvo na pasta do projeto. Quando o workspace também oferece habilidade de vídeo interativo/hiperframes, prefira compor vários planos curtos em uma única linha do tempo ao invés de um clipe longo monolítico.
Usar este template

Perguntas Frequentes

O que são os templates Open Design?

Templates com plugin integrado que vêm com Open Design — a alternativa open source para Claude Design. Cada um é um artefato executável: um protótipo, deck de apresentação, gerador de imagem, composição de vídeo ou uma peça de motion HyperFrames. Seu agente local executa o plugin contra seu prompt e um HTML de exemplo opcional, gerando um ativo pronto para compartilhar na sua máquina.

Como os templates são licenciados?

Apache-2.0 em tudo. Faça fork do prompt, adapte o example.html, altere os tokens de marca — o único pedido é manter o aviso de LICENSE quando você redistribuir.

Posso executá-los com minhas próprias chaves de API?

Sim. Open Design é BYOK em todas as camadas — suas credenciais Claude / OpenAI / modelo local nunca saem da sua máquina. O site de marketing não faz proxy de nenhuma inferência; as visualizações ao vivo que você vê nas linhas do catálogo vêm de cartazes e URLs do Cloudflare Stream que os templates incluem, não de um runtime hospedado.

Como contribuo com um template?

Abra um PR contra nexu-io/open-design/plugins/_official com uma nova pasta contendo open-design.json, SKILL.md e um example.html executável. O guia de contribuidor no CONTRIBUTING.md do repositório detalha os campos do manifesto. Contribuições aprovadas aparecem no catálogo público e são exibidas aqui automaticamente no próximo deploy.

Como isso difere do Claude Design Studio?

Claude Design Studio é o produto hospedado da Anthropic. Open Design é a alternativa open source para Claude Design — cada template, prompt e design system neste catálogo reside em um repositório público, executa localmente contra as chaves que você escolhe e pode ser estendido através de plugins que qualquer pessoa pode criar. Espelhamos a mesma taxonomia de artefatos (protótipos, apresentações, imagens, vídeo) para que o modelo mental seja transferível, mas tudo, até o runtime do agente, fica na sua máquina.

De onde vêm as visualizações?

O manifesto de cada template carrega uma URL de cartaz (CDN Cloudflare) e, para templates de vídeo, um MP4 do Cloudflare Stream. A grade renderiza o cartaz como miniatura estática e alterna para o vídeo em loop ao passar o mouse. Templates de imagem e protótipo mostram seu cartaz diretamente; clicar abre o example.html executável na página de detalhes.