Véu de aurora
A self-contained WebGL2 hero: layered aurora light curtains warped over a night sky scattered with stars; move the cursor to sway the veil.
Protótipo.
Mockups de produtos interativos — dashboards, aplicativos, landing pages, ferramentas internas. Qualquer coisa que você entregaria a um stakeholder e clicaria.
Tipo de artefato
Cena
Post de blog
Artigo longo / post de blog — com cabeçalho, placeholder de imagem hero, corpo do artigo com figuras e citações destacadas, assinatura do autor, posts relacionados. Use quando o briefing pedir 'blog', 'artigo', 'post', 'ensaio' ou 'estudo de caso'.
Piscina de cáusticas
A self-contained WebGL2 hero: animated water caustics woven from domain-warped ripples; click the water to drop a ripple. No meshes, no textures.
Relatório de caso clínico
Apresentação estruturada de casos médicos para rounds, conferências e documentação. Gera relatórios em formato SOAP ou narrativo com sinais vitais fisiologicamente precisos, exames laboratoriais e planos baseados em evidências.
Mapa de capacidades interativo Codex
Transforme um artigo longo, thread, memorando ou narrativa de produto em um mapa de capacidades clicável estilo Codex com loop de workflow, matriz de casos de uso e painel de detalhes responsivo.
Critique
Executa uma revisão de design especializada em 5 dimensões para qualquer artefato HTML do projeto — Filosofia/Hierarquia visual/Detalhes/Funcionalidade/Inovação, cada uma pontuada de 0 a 10. Gera um relatório HTML autocontido com gráfico de radar, pontuações fundamentadas e três listas: Manter/Corrigir/Vitórias rápidas.
Painel
Painel administrativo e analítico em um único arquivo HTML. Barra lateral esquerda fixa, barra superior com usuário/busca, grade principal de cartões KPI e gráficos. Use para telas de 'painel', 'admin', 'analytics' ou 'painel de controle'.
Relatório de Visualização de Dados
Transforma dados CSV, Excel ou JSON em uma página de relatório visual refinada.
Dating Web
Painel de namoro/matchmaking com visual de consumidor, incluindo navegação lateral esquerda, barra de sinais da comunidade, KPIs principais, gráfico de barras de matches mútuos de 30 dias e bloco de tendência de taxa de match. Tipografia editorial com destaque contido. Ideal para sites de namoro, matchmaking, painéis de comunidade ou redes sociais.
prototipo Ler prompt completo → Valuation DCF
Avaliação por fluxo de caixa descontado e análise de valor intrínseco para empresas de capital aberto. Para DCF, valor justo, valor intrínseco, preço-alvo e análise de sobre/subvalorização.
Galeria de profundidade
A scroll-reactive 3D image gallery in Three.js: Z-stacked images crossfade over per-image mood backgrounds with velocity breath, a glowing cursor trail and an editorial CMYK/RGB/HEX/PMS color card.
Showcase 3D de dispositivos
Showcase estático em 3D de iPhone e MacBook com HTML real incorporado nas telas, refração de lente de vidro e composição giratória de 360 graus.
Guia digital
Prévia de guia digital de duas páginas — página 1 é capa (título, autor, estatísticas 'O que tem dentro', prévia do sumário); página 2 é spread (corpo da lição com citação destacada e lista de passos). Tom lifestyle / marca de criador. Use quando o briefing pedir 'e-guide', 'guia digital', 'lookbook', 'lead magnet', 'guia de criador', 'playbook', 'guia PDF' ou '电子指南'.
Distorção e grão
A vertical gallery (Three.js) where planes bend with scroll velocity, ripple under the cursor via simplex noise, and carry a film grain.
Página de documentação
Uma página de documentação com navegação lateral, corpo de artigo rolável e sumário. Use quando o briefing mencionar 'documentação', 'guia', 'referência de API' ou 'tutorial'.
Marketing por e-mail
Template de e-mail para lançamento de produto com cabeçalho, imagem hero, título em itálico, corpo de texto, CTA principal e grade de especificações em layout HTML de coluna única centralizada.
Runbook de engenharia
Um runbook de engenharia — visão geral do serviço, tabela de alertas, links para dashboards, procedimentos comuns com comandos copiáveis, rotação de plantão e checklist de resposta a incidentes. Use para runbooks, docs de ops, guias de plantão, docs SRE ou 运维手册.
Relatório financeiro
Relatório financeiro trimestral/mensal com cabeçalho de KPIs, gráficos de receita e consumo, tabela resumo P&L, destaques principais e parágrafo de perspectivas. Use quando o briefing mencionar 'relatório financeiro', 'relatório Q3', 'revisão MRR', 'P&L' ou '财报'.
Template de painel ao vivo Flowai
Painel de gerenciamento de equipe na estética FlowAI com três abas (Membros da equipe, Detalhes da equipe, Registro de atividades), linha de estatísticas KPI, tabela de membros, gráfico de barras de distribuição de funções, sparklines de presença online e atividade, e painel de principais contribuidores. Suporta tema claro/escuro, tooltips, zoom e exportação CSV.
App gamificado
Protótipo de aplicativo móvel gamificado em três telas: capa, missões diárias com fitas de XP e barra de nível, detalhes da missão. Ideal para aplicativos gamificados, rastreadores de hábitos, aplicativos de vida RPG, aplicativos de level-up, missões diárias e aplicativos de XP/sequências.
Painel do GitHub
Painel de análise de repositório GitHub — estrelas, forks, colaboradores, issues, pull requests, atividade recente e principais colaboradores. Use para painel de repositório GitHub, relatório de crescimento open-source, página de saúde do repositório ou visualização de análise do GitHub.
Deriva de meio-tom
A self-contained WebGL2 hero: a flowing field screened through a rotated halftone dot grid into a duotone print aesthetic; move the cursor to bend the drift.
Folha holográfica
A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
Galeria de paralaxe horizontal
A horizontal-scroll WebGL gallery (Three.js): frames glide sideways with lerp smoothing and each image parallaxes its texture (UV shift) by its position in the viewport.
Onboarding de RH
Plano de integração de novos funcionários em uma única página — cronograma da primeira semana, apresentação do buddy + gerente, trilha de aprendizado, checklist de equipamentos e resultados 'você está pronto quando…'. Use quando o briefing mencionar 'onboarding', 'novo funcionário', 'plano primeira semana' ou '入职'.
Html Ppt Taste Brutalist
Apresentação HTML 16:9 no estilo tactical-telemetry / terminal CRT. Slides carvão de CRT desativado, monoespaçado fósforo branco, destaque vermelho perigo, sobreposição scanline, sintaxe ASCII, densidade sobre decoração. Destilado de Leonxlnx/taste-skill `brutalist-skill` (modo Tactical Telemetry).
Html Ppt Taste Editorial
Apresentação HTML 16:9 em estilo editorial minimalista. Slides em creme quente, serifada para títulos + grotesca para corpo, linhas finas, metadados monoespaçados, espaço em branco generoso, um acento. Destilado de Leonxlnx/taste-skill `minimalist-skill`.
Fatura
Página de fatura imprimível — bloco de remetente + destinatário, tabela de itens, detalhamento de impostos, totais e instruções de pagamento. Use quando o briefing mencionar 'invoice', 'bill', 'billing statement' ou '发票'.
Kami Landing
Produz um documento de uma página com qualidade de impressão — tela de pergaminho quente, destaque azul tinta, serifa em um peso, sem itálico, sem cinzas frios. O resultado parece um white paper profissional ou um one-pager de estúdio, não uma UI de aplicativo. Multilíngue por design (EN · zh-CN · ja). Um único arquivo HTML autocontido, zero dependências.
Documento pergaminho Kami
Tela de pergaminho quente (#f5f4ed), destaque monocromático azul-tinta (#1B365D), uma família serifada e tipografia de nível editorial.
Quadro Kanban
Quadro kanban / de tarefas com colunas (To do / In progress / In review / Done), cartões arrastáveis, avatares de responsáveis, swimlanes e barra de filtros superior. Use quando o brief mencionar 'kanban', 'task board', 'sprint board', 'trello' ou '看板'.
prototipo Ler prompt completo → Últimos 30 dias
Pesquisa de tendências comunitárias e sociais dos últimos 30 dias. Use para saber o que as pessoas estão dizendo agora, sentimento recente, reações da comunidade, prova social, reação ao lançamento, varredura de tendências ou contexto dos últimos 30 dias.
Iridescência líquida
A self-contained WebGL2 hero: a living oil-on-water field brightened into iridescent caustic filaments; move the cursor to bend the flow.
Metal líquido
Crie um shader de metal líquido em tela cheia — ondulações de cromo fundido com um brilho especular deslizante sobre uma paleta iridescente de película fina — renderizado a 60fps como um único index.html autossuficiente.
Artigo de revista
Layout de artigo de revista inspirado em Huashu / huashu-md-html para transformar Markdown ou notas em um ensaio HTML longo e refinado.
Pôster de Revista
Pôster editorial estilo jornal com papel jornal, linha de data, título serifado grande com palavra riscada e itálico, bloco de texto em 2 colunas e 6 seções numeradas com citações anotadas. Ideal para pôsteres de revista, layouts editoriais, estilo jornal ou manifestos.
Pôster de Marketing
Pôster vertical ou imagem de compartilhamento estilo Stories com forte impacto visual.
Atas de reunião
Página de atas de reunião — barra de título com participantes, checklist de pauta, bloco de decisões, tabela de ações com responsáveis e datas, e rodapé para a próxima reunião. Use quando mencionar 'atas de reunião', 'minutes', 'notas 1:1', 'resumo all-hands' ou '会议纪要'.
Aplicativo mobile
Uma tela de aplicativo mobile renderizada dentro de um frame iPhone 15 Pro com precisão pixel a pixel na página. Criado copiando o arquivo semente assets/template.html e colando um arquétipo de tela de references/layouts.md. Use quando o briefing pedir 'aplicativo mobile', 'aplicativo iOS', 'aplicativo Android', 'tela de celular' ou 'UI de aplicativo'.
Onboarding mobile
Fluxo de onboarding mobile com múltiplas telas representadas como três molduras de celular lado a lado — splash, proposta de valor, login. Barra de status, pontos de swipe, CTA principal. Use quando mencionar 'onboarding mobile', 'onboarding iOS', 'cadastro no celular' ou '移动端引导'.
Currículo Moderno
Currículo moderno e minimalista, página A4 única, pronto para impressão ou exportação em PDF.
Motion Frames
Composição de motion design de quadro único com animações CSS em loop — anel de texto rotativo, globo animado, timer, labels parallax. Renderiza como poster de vídeo hero para HyperFrames ou qualquer exportador baseado em keyframes. Ideal para motion design, hero animado, loops, posters de vídeo e cartões de título.
Grade de neon
Crie uma cena synthwave de grade de neon — uma grade de chão em perspectiva rolando em direção a um sol retrô listrado, sob um campo de estrelas de neon — renderizada a 60fps como um único index.html autossuficiente.
prototipo Ler prompt completo → Página inicial Open Design
A pixel-faithful mirror of the live open-design.ai homepage — an interactive WebGL/Three.js (React Three Fiber) hero built on Next.js. Features a real-time 3D "Open Design" wordmark (Draco-compressed geometry), a scattered sticker collage, custom variable fonts, cursor-reactive parallax, and scroll-driven motion. This is a first-party showcase of the visual ceiling Open Design targets for interactive marketing surfaces on the web — with all assets bundled locally (only the Draco decoder loads from a CDN, like the other WebGL examples), rendering in the sandboxed preview. Use as a reference for high-craft 3D landing pages, agent-native product sites, and motion-rich hero sections.
Landing Page Open Design
Produz uma landing page editorial de página única na linguagem visual Atelier Zero (colagem editorial Monocle / Apartamento / Études). Preenche inputs.json a partir de um briefing de marca, opcionalmente gera 16 assets de colagem via gpt-image-2 e emite um arquivo HTML autônomo com animações de scroll e navegação fixa.
Orbit Geral
Acionado automaticamente pelo Orbit quando dois ou mais conectores estão conectados. Coleta atividades das últimas 24 horas de todos os conectores autenticados (GitHub, Linear, Notion, Slack, 飞书, Calendário, Gmail, Drive, Sentry, Vercel, etc.) e gera um painel adaptativo em grade bento no topo de "我的设计". Executado automaticamente pelo agendador de resumo diário do Orbit.
Orbit Github
Habilidade Orbit para gerar automaticamente resumos diários baseados em conexões GitHub. Recupera PRs, solicitações de revisão, issues, execuções de CI e merges das últimas 24 horas e os exibe no estilo de notificações nativo do GitHub. Invocado automaticamente pelo agendador de resumo diário do Orbit.
Orbit Gmail
Extrai a atividade da caixa de entrada das últimas 24 horas e gera um resumo diário quando o Gmail é o único serviço conectado ou explicitamente selecionado. Acionado automaticamente pelo agendador do Orbit, não deve ser executado manualmente.
Orbit Linear
Acionado automaticamente pelo pipeline do Orbit quando o Linear é o único conector conectado do usuário ou quando o usuário limita explicitamente seu resumo diário ao Linear. Extrai as últimas 24 horas de movimentação de issues, mudanças de status, atribuições e progresso de ciclo, renderizando o resumo na linguagem visual nativa da caixa de entrada do Linear.
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.
Galáxia de partículas
Crie uma galáxia de partículas em espiral — dezenas de milhares de pontos de GPU com mistura aditiva girando ao redor de um núcleo brilhante, com suas órbitas resolvidas no vertex shader — renderizada ao vivo a 60fps como um único index.html autossuficiente.
Galeria de revelação em pixels
A scroll-reactive masonry gallery (Three.js + GSAP) where each image develops from a pixel/grid dissolve on viewport entry, with a split-text heading and click-to-fullscreen Flip.
Especificação de produto
Especificação de produto/PRD em página única — problema, métricas de sucesso, escopo, histórias de usuário, notas de design, plano de lançamento, questões em aberto. Para specs de produto e briefs de funcionalidades.
Página de preços
Uma página de preços autônoma — cabeçalho, níveis de planos, tabela de comparação de recursos e perguntas frequentes. Use quando o briefing solicitar 'preços', 'planos', 'níveis de assinatura' ou uma página de 'comparar planos'.
Hero com raymarching
Crie um hero 3D com raymarching — metaballs que se transformam com sombras suaves e uma luz de contorno fresnel, orbitando lentamente e traçadas por esferas pixel a pixel em um fragment shader — renderizado em tela cheia a 60fps como um único index.html autossuficiente.
Card de Post do Reddit
Card de post do Reddit realista com barra de votos e contagem de comentários, ideal para sobreposições de vídeo ou compartilhamento de stories.
Landing SaaS
Landing page SaaS de página única com hero, recursos, prova social, preços e CTA. Respeita os tokens ativos de cor/tipografia/layout do DESIGN.md. Palavras-chave de ativação: "saas landing", "marketing page", "product landing".
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 '三连发'.
Painel de mídias sociais
Painel de análise de mídias sociais para criadores em um único arquivo HTML. Com seletor de plataforma (X / LinkedIn / YouTube / Instagram), cartões KPI (seguidores, taxa de engajamento, curtidas, reposts), gráfico de crescimento de seguidores, prévia do post em destaque da semana e painel lateral de tópicos em alta/principais comentários.
Card Spotify Tocando Agora
Card estilo Spotify com capa do álbum, barra de progresso e controles de reprodução, adequado para overlays de vídeo ou páginas pessoais.
Animação Sprite
Slide explicativo animado em estilo pixel art com fundo creme, ano em negrito, mascote em pixel art (carta Hanafuda, cogumelo ou console 8-bit), tipografia japonesa cinética e faixa de linha do tempo. Animação CSS pura, pronta para gravação em vídeo vertical.
OKRs da equipe
Página de rastreamento de OKR com banner trimestral, três objetivos com seus resultados-chave como barras de progresso, avatares de responsáveis, pílulas de status e barra lateral 'visão geral do trimestre'. Use quando o briefing mencionar OKR, resultados-chave, objetivos ou 目标.
Tweaks
Adiciona um painel de controles ao vivo a qualquer elemento HTML para ajustar cor de destaque, escala tipográfica, densidade, movimento e tema. As alterações são aplicadas instantaneamente às propriedades personalizadas de CSS e salvas no localStorage.
Card de compartilhamento do Twitter
Card de citação ou dados do Twitter projetado para acompanhar uma postagem.
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.
Células de Voronoi
A self-contained WebGL2 hero: a living Voronoi network with drifting feature points, palette-keyed cells and glowing boundaries; move the cursor to push the cells.
Página de lista de espera
Landing page minimalista de pré-lançamento com captura de e-mail, logo da marca e camada decorativa opcional. Lê cores, tipografia e regras de layout do DESIGN.md. Ideal para lançamentos de produtos, inscrições beta, programas de acesso antecipado e projetos independentes.
prototipo Ler prompt completo → Web effect extractor
Extract visual effects, Canvas/WebGL/Shader behavior, and interaction details from a reference website, then rebuild them as an editable Open Design artifact.
Protótipo Web
Protótipo web desktop de uso geral. Arquivo HTML autocontido criado copiando `assets/template.html` e colando layouts de `references/layouts.md`. Padrão para landing pages, marketing, documentação ou páginas SaaS.
Web Prototype Taste Brutalist
Protótipo web de impressão industrial suíça. Tela papel jornal, grotesca preta monolítica, numerais sangrados no viewport, divisores de grade finos, destaque vermelho perigo, decoração sintaxe ASCII. Destilado de Leonxlnx/taste-skill `brutalist-skill` (modo impressão industrial suíça).
Web Prototype Taste Editorial
Protótipo web editorial-minimalista. Canvas monocromático quente, título serifado + corpo grotesco, bordas de 1px, chips pastéis suaves, espaços em branco generosos, micro-movimento ambiente.
Web Prototype Taste Soft
Protótipo web suave nível Apple. Canvas prata/creme, cards com moldura dupla, CTAs com botões aninhados, raios squircle generosos, animação elástica e malha ambiente. Baseado em soft-skill do Leonxlnx/taste-skill e seções 4–8.
Experiência WebGL
Crie uma experiência WebGL/WebGL2 em tela cheia e em tempo real — shaders animados, cenas 3D, visuais generativos, campos de partículas — executada ao vivo na GPU. Acionado em pedidos de WebGL, shader, 3D, generativo, GPU ou visual em tempo real.
prototipo Ler prompt completo → Website Clone
Clone or visually recreate a website using source-first reconnaissance, route crawling, interaction probes, asset capture, and post-clone audit notes.
Wireframe Anotado
Um wireframe lo-fi anotado/redline de uma página de destino desktop — blocos greybox dentro de um quadro de navegador, pins de anotação numerados (①–⑤) e um painel de especificações à direita que associa cada pin a uma breve nota de engenharia/UX. Ideal para solicitações de wireframe anotado, redline, especificação de wireframe, landing lo-fi ou baixa fidelidade.
Wireframe Greybox
Um wireframe greybox / blueprint lo-fi nítido de um dashboard SaaS desktop — blocos cinza neutros, placeholders de imagem com um X diagonal, texto em barras lorem, um painel de gráfico esquemático e anotações redline monoespaçadas em uma grade de 12 colunas. Ideal para solicitações de greybox, wireframe blueprint, dashboard lo-fi ou baixa fidelidade.
Wireframe de Fluxo Mobile
Wireframe lo-fi do fluxo de um app mobile — três a quatro molduras de telefone em fila (onboarding → feed inicial → detalhe → confirmação), conteúdo greybox dentro de cada dispositivo, setas conectoras pontilhadas com rótulos de passo numerados e notas adesivas. Ideal para solicitações de wireframe mobile, app flow, user flow ou lo-fi mobile.
Wireframe Esboço
Wireframe desenhado à mão com fundo de papel quadriculado, tom de marcador/lápis, abas múltiplas, notas adesivas e placeholders de gráficos. Ideal para solicitações de wireframe, sketch, lo-fi ou quadro branco.
Visualizador Worker
Crie um visualizador em tempo real cujo cálculo pesado roda em um Web Worker — sistemas de partículas, física, fractais, visualização de dados/áudio — compartilhando memória opcionalmente via SharedArrayBuffer, renderizado em canvas a 60fps. Acionado em pedidos de web worker, simulação, partículas, física, fractal, cálculo fora da thread principal ou visualizador em tempo real.
Card de postagem X / Twitter
Card realista de postagem X com métricas de engajamento (curtidas, reposts, visualizações), ideal para sobreposições de vídeo ou cards de imagem compartilháveis.
prototipo Ler prompt completo → X Research
Pesquisa de sentimento público no X/Twitter sobre mercados, empresas, produtos ou comunidades. Use para entender a opinião pública, posts de especialistas ou reações sociais sobre ações, setores, empresas, produtos ou eventos de mercado.
Cartão Xiaohongshu
Cartões de conhecimento no estilo Xiaohongshu, organizados como um carrossel deslizável de múltiplos cartões.