Categoria Design · Inteligência Apache-2.0 · Feito na Terra
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
Pré-visualização de AeroCore — Cinematic Aerospace Engine Landing prototipo
@eli Open Design
Ler prompt completo →

AeroCore — Cinematic Aerospace Engine Landing

Premium scroll-cinematic aerospace propulsion marketing site: a blue-to-warm-white gradient hero with parallax wordmark and engine still, a mission thumbnail that grows into a fullscreen sticky video, a pinned tabbed showcase, a bento capabilities grid with looping video cards and a tool marquee, an animated dark stats chart, a horizontal video-story rail, and a starfield footer.

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.

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.

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.

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).

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.

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.

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.

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.

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.

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).

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.

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.

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.

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.

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 '三连发'.

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).

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.

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.

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.

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.