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.

apresentacao
@lewislulu Open Design
Ler prompt completo →

Academic Paper

LaTeX-paper deck theme: paper-white #fdfcf8 ground, all-serif type (Latin Modern Roman with Playfair Display fallback), ink-black body, link-blue #1a3a7a underlined citation anchors, italic kickers, zero radius and near-zero shadow, double-rule title page, numbered Figure/Table captions and booktabs three-line tables. Single-file HTML deck with keyboard navigation and hash deep links — for conference talks, thesis defenses, research reviews and journal clubs. Based on lewislulu/html-ppt-skill academic-paper.

apresentacao
@alchaincyf Open Design
Ler prompt completo →

Annual Letter

Stripe-annual-letter style single-file HTML decks: cream #FBFAF8 paper with a single Stripe-purple #635BFF accent, serif prose paragraphs at a 65ch publication measure, inline data cards embedded in the running text, and oversized tabular display-number anchor pages — the 'editorial longform' letter genre, prose flow instead of bullets. Based on alchaincyf/huashu-design editorial-longform (design-styles.md 安静派 · Editorial Longform).

apresentacao
@alchaincyf Open Design
Ler prompt completo →

Bento Insight Grid

Apple Keynote / QBR-school bento decks: light-grey #F5F5F7 and cream pages, unequal-height rounded cards with 1px hairlines and micro shadows, one insight per card (giant Geist Mono tabular numeral, linear inline-SVG icon, or SVG sparkline), oversized display headlines with hard weight contrast, Inter/Geist typography on a fixed 1920×1080 canvas. Based on https://github.com/alchaincyf/huashu-design design-styles.md bento-grid spec (Bento便当格模块网格, neutral school, 95% fidelity), generated from the spec into a full multi-section deck.

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.

apresentacao
@alchaincyf Open Design
Ler prompt completo →

Golden Circle Diagram

Sinek/TED-school diagrammatic minimalism decks: warm-white paper, ink, and exactly one gold accent (#E8860C) with its tints; a single geometric master figure — nested concentric WHY/HOW/WHAT circles built from pure border-radius divs — carries every page of the deck through fill, highlight, grey, and outline modes; uppercase Jost labels embedded in the figure, Manrope display headlines, inside-out arrows, zero charts and zero images. Based on https://github.com/alchaincyf/huashu-design design-styles.md diagrammatic-minimalism (单图母图概念图解), generated from the spec into a full multi-section deck.

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

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.

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.

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.

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.

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.

apresentacao
@alchaincyf Open Design
Ler prompt completo →

Keynote Black

Jobs-2007 / Lei-Jun-launch-event keynote decks: pure black #000000 stage, pure white type, one word or one giant tabular-nums numeral per screen, exactly one brand accent (Mi orange #FF6900 / Spotify green #1ED760 / Apple blue #2997FF) per deck, massive negative space, faint center spotlight, accent-vs-grey spec-comparison bars, and a price-reveal climax page on a fixed 1920×1080 canvas. Based on https://github.com/alchaincyf/huashu-design black-big-number-stage (design-styles.md 大胆派「黑底巨型数字剧场」, generated from spec and wrapped in a full multi-section deck shell).

apresentacao
@alchaincyf Open Design
Ler prompt completo →

Luxe Whitespace

Quiet-luxury decks with 70%+ whitespace: a warm off-white #FAFAF8 canvas, Inter 200-600 ultra-thin hierarchy, 120px weight-200 floating numerals with gold decimal points, one warm gold (#D4A574) spent only on hairlines and winning comparison bars, and gradient hairline separators (#E0DCD6) on a fixed 1920×1080 canvas. Based on https://github.com/alchaincyf/huashu-design ppt-build, expanded from a single showcase page into a full multi-section deck.

apresentacao
@lewislulu Open Design
Ler prompt completo →

Memphis Pop

80s Memphis pop deck — warm cream canvas tiled edge-to-edge with a pink/teal/yellow confetti-dot pattern, 2.5px black-outlined cards with 5–9px hard offset shadows, hot-pink #ff3d8b lead accent, Archivo Black display type. Single-file HTML, keyboard navigation, zero dependencies. Based on lewislulu/html-ppt-skill memphis-pop. Use for playful product launches, creative pitches, community talks, or any deck that wants loud 1980s Memphis-design energy.

apresentacao
@nicobailon Open Design
Ler prompt completo →

Midnight Editorial

Cinematic editorial dark deck theme: deep navy #0f1729 pages with warm gold #d4a73a accents, Instrument Serif 120px dramatic display dropping straight to 14px JetBrains Mono labels, a gold radial accent glow per slide, gold SVG corner marks and ghost section numerals, staggered cinematic reveal transitions, and a locked cream/gold light mode toggled by the SlideEngine (T key). Pure CSS/SVG diagrams and charts, keyboard-first single-file HTML, zero external JS. Based on https://github.com/nicobailon/visual-explainer midnight-editorial (templates/slide-deck.html), locked as a single-aesthetic deck plugin. Use for engineering reviews, product keynotes and editorial launches that should feel like a midnight issue of a serious journal.

apresentacao
@alchaincyf Open Design
Ler prompt completo →

Narrative Sparkline

Duarte-style narrative sparkline decks: one oscillating SVG bézier waveform spanning the full 1920×1080 canvas, brand-orange (#FF6B2C) turning-point annotations, greyed ghost comparison lines, stroke-dashoffset progressive reveal, mono hairline chrome, Inter + Geist Mono. Built for change narratives, before/after contrasts, and data story arcs. Based on https://github.com/alchaincyf/huashu-design narrative-sparkline (references/design-styles.md · 中性派 · Sparkline叙事波形), generated from spec into a full multi-section 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.

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.

apresentacao
@alchaincyf Open Design
Ler prompt completo →

Pentagram Info-Architecture

Rational Swiss-grid data decks: black-and-white restraint, Helvetica Neue hierarchy, one red (#E63946), 64px black chrome bars, 5%-opacity grid hairlines, and 260px giant numerals anchoring red/dark/grey comparison bar charts on a fixed 1920×1080 canvas. Based on https://github.com/alchaincyf/huashu-design ppt-pentagram, expanded from a single showcase page into a full multi-section deck.

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.

apresentacao
@lewislulu Open Design
Ler prompt completo →

Retro TV

80s/90s picture-tube deck — warm cream canvas with CRT scanlines on every slide (::before repeating-gradient) over a curved-glass tube vignette, amber #e67e14 / brick-red #c73a1f accents, Playfair Display headlines with heavy offset shadows, test-card color bars and antenna/dial inline-SVG decor. Single-file HTML, keyboard navigation, zero dependencies. Based on lewislulu/html-ppt-skill retro-tv. Use for nostalgic product launches, media or entertainment pitches, retrospectives, or any deck that wants warm broadcast-era television energy.

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

apresentacao
@alchaincyf Open Design
Ler prompt completo →

Takram Soft Tech

Soft Eastern-philosophy tech decks: warm rice-paper canvas (#F5F0EB), sage green #6B8F71 + one gold #D4A574 + warm grays, Noto Serif SC display headings mixed with Inter labels, rounded translucent data cards, and SVG data visualization treated as an art piece — three-series overlaid radar charts on hand-drawn dashed grids with Fig. NN plate annotations, on a fixed 1920×1080 canvas. Based on https://github.com/alchaincyf/huashu-design ppt-takram, expanded from a single showcase page into a full multi-section deck.

apresentacao
@nicobailon Open Design
Ler prompt completo →

Terminal Mono

Developer-native dark deck theme: near-black #0a0e14 ground, Geist Mono everywhere with large weight-400 titles (never bold display), Dracula-green #50fa7b accent, faint dot-grid texture, and low-opacity green hairlines. Zero skeuomorphism, zero effects - pure typographic discipline. Scroll-snap single-file HTML with SlideEngine navigation, hash routing, and automatic light mode (#f4f6f8 / #0d7a3e) via prefers-color-scheme. Based on nicobailon/visual-explainer terminal-mono.

apresentacao
@lewislulu Open Design
Ler prompt completo →

True Blueprint

True-blueprint deck theme: a blueprint-blue #0b3a6f full-bleed field under a 40px white drafting grid, dashed-border translucent cards, white and ice-blue #aee1ff ink lines with amber #ffd27a annotations, every glyph in JetBrains Mono, 2px corners, zero shadows. Drawing-sheet chrome (title block, sheet index, construction-line section numbers, hatched CSS bars, inline-SVG schematics) makes it the natural skin for system-architecture and engineering-design decks. Single self-contained HTML file, zero external JS. Based on lewislulu/html-ppt-skill blueprint theme.

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.

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.

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.

apresentacao
@lewislulu Open Design
Ler prompt completo →

Y2K Chrome

Y2K chrome deck — full-bleed 5-stop silver-metal gradient canvas, white→steel→gunmetal chrome-clipped H1 headlines, 72% white frosted-glass cards with inset top highlights, 26–36px mega-radius corners, candy purple #8a5cff / aqua #3ccfd8 / pink #ff84c4 accents, glossy orb and sparkle decor, Space Grotesk type. Single-file HTML, keyboard navigation, zero dependencies. Based on lewislulu/html-ppt-skill y2k-chrome. Use for product launches, consumer-app pitches, music/fashion/creator decks, or anything that wants millennium-bug-era metallic shine.

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.