59 Prototype.
Interactive product mockups — dashboards, apps, landing pages, internal tools. Anything you’d hand a stakeholder and click through.
Tipo de artefato
Cena
- 001
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'. - 002
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. - 003
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. - 004
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. - 005
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'. - 006
Relatório de Visualização de Dados Transforma dados CSV, Excel ou JSON em uma página de relatório visual refinada. - 007
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. - 008
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. - 009
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. - 010
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 '电子指南'. - 011
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'. - 012
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. - 013
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 运维手册. - 014
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 '财报'. - 015
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. - 016
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. - 017
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. - 018
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 '入职'. - 019
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). - 020
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`. - 021
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 '发票'. - 022
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. - 023
Documento pergaminho Kami Tela de pergaminho quente (#f5f4ed), destaque monocromático azul-tinta (#1B365D), uma família serifada e tipografia de nível editorial. - 024
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 '看板'. - 025
Ú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. - 026
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. - 027
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. - 028
Pôster de Marketing Pôster vertical ou imagem de compartilhamento estilo Stories com forte impacto visual. - 029
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 '会议纪要'. - 030
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'. - 031
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 '移动端引导'. - 032
Currículo Moderno Currículo moderno e minimalista, página A4 única, pronto para impressão ou exportação em PDF. - 033
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. - 034
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. - 035
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. - 036
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. - 037
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. - 038
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. - 039
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. - 040
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. - 041
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'. - 042
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. - 043
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". - 044
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 '三连发'. - 045
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. - 046
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. - 047
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. - 048
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 目标. - 049
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. - 050
Card de compartilhamento do Twitter Card de citação ou dados do Twitter projetado para acompanhar uma postagem. - 051
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. - 052
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. - 053
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). - 054
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. - 055
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. - 056
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. - 057
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. - 058
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. - 059
Cartão Xiaohongshu Cartões de conhecimento no estilo Xiaohongshu, organizados como um carrossel deslizável de múltiplos cartões.