Pular para o conteúdo
Skillpedia
Escrita101 mil · #463

html-ppt-zhangzara-scatterbrain

Ajuda seu agente a apresentar um projeto de graduação de design sobre um sistema de orientação em um terminal de transporte. Ele detalha o problema, o processo e o resultado.

O que ela faz

Esta ferramenta cria apresentações em formato HTML que parecem rascunhos de designer, como se fossem feitos em post-its. É ideal para quem quer mostrar ideias em andamento, não conclusões finais.

Quando usar

  • ✓Para brainstorms e workshops criativos.
  • ✓Para apresentar ideias iniciais de projetos.
  • ✓Quando você quer um visual informal e em progresso.

Exemplo do que pedir para a IA

“Crie uma apresentação sobre o futuro do design usando o estilo Scatterbrain.”

Quer saber mais? Abra as seções abaixo.

Como usar

O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.

Link da skill

https://github.com/nexu-io/open-design/blob/main/design-templates/html-ppt-zhangzara-scatterbrain/SKILL.md

Mensagem pronta para colar

Use esta skill para me ajudar: https://github.com/nexu-io/open-design/blob/main/design-templates/html-ppt-zhangzara-scatterbrain/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
Como funciona

Você começa copiando um arquivo de exemplo e substituindo o conteúdo. É importante não mudar as fontes, cores ou o layout para manter o estilo de rascunho.

Instalação

Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.

No terminal (Claude Code, Codex, Cursor), na pasta do projeto:

npx skills add nexu-io/open-design --skill html-ppt-zhangzara-scatterbrain

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/design-templates/html-ppt-zhangzara-scatterbrain/SKILL.md -o SKILL.md
Conteúdo técnico (SKILL.md)

Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.

Scatterbrain

Inspirado em post-its: notas adesivas pastel, caligrafia Caveat, pilha de fontes Shrikhand e Zilla Slab.

Um único deck HTML autocontido — tipografia, paleta, sistema decorativo e vocabulário de slides estão todos sintonizados. Misturar layouts entre modelos quebra o sistema; fique dentro deste.

Em resumo

  • Esquema: claro
  • Formalidade: baixa
  • Densidade: alta
  • Slides na demonstração: 10

Ideal para

Qualquer coisa que deva parecer um quadro branco de designer: brainstorms, workshops, credenciais de agência criativa, sessões de design thinking, pitches de ideação, revisões de direção de arte. Igualmente divertido para qualquer deck — incluindo tecnologia, pesquisa ou negócios — que queira ser lido como pensamento em andamento em vez de conclusões polidas.

Evitar para

Contextos que exigem precisão e peso institucional — a estética de post-it adesivo é intencionalmente calorosa e inacabada.

Fluxo de trabalho

  1. Clone example.html para o espaço de trabalho do usuário como o arquivo de trabalho.
  2. Substitua o conteúdo do espaço reservado pelos títulos reais do usuário, texto principal, números, nomes, datas e rótulos de seção. Combine as dimensões existentes ao trocar os espaços reservados de imagem.
  3. Preserve o sistema de design. Nunca substitua fontes, altere as cores da paleta, reestruture a grade de layout ou remova elementos decorativos (colchetes de canto, grão de papel, formas geométricas, SVGs ilustrados). Eles fazem parte da identidade.
  4. Ajuste o comprimento do deck duplicando layouts. Se o usuário tiver mais conteúdo do que a demonstração contém, duplique um slide existente do layout mais apropriado. Se menos, remova slides de baixo. Atualize os rótulos dos números de página.
  5. Projetando layouts ausentes: se um slide precisar de um layout que o modelo não tenha, projete-o do zero usando as mesmas fontes, paleta, vocabulário decorativo, ritmo de espaçamento e gramática de componentes — nunca desista para um modelo diferente.
  6. Mantenha o tempo de execução da navegação como enviado. Se o deck enviar um assets/deck-stage.js ou um manipulador de teclado embutido, deixe-o intacto.

Contrato de saída

Emita entre as tags <artifact>:

<artifact identifier="zhangzara-scatterbrain" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>

Origem e licença

Fornecido do upstream licenciado sob MIT zarazhangrui/beautiful-html-templates.

O texto completo da licença MIT upstream — incluindo o aviso de copyright original — é enviado nesta habilidade em LICENSE e deve ser redistribuído juntamente com qualquer cópia de example.html, template.json, ou qualquer tempo de execução assets/ fornecido. Veja template.json para o instantâneo de metadados upstream.

Perguntas frequentes

Posso mudar as cores e fontes?

Não, o estilo de post-it e rascunho é mantido ao não alterar esses elementos.

O que significa 'design system'?

É o conjunto de regras de design (cores, fontes, formas) que definem a aparência única desta apresentação.

Como adiciono ou removo slides?

Você pode duplicar slides existentes para adicionar mais conteúdo ou remover slides do final se tiver menos conteúdo.

Detalhes

Descrição original do autor

A design-school graduation project: a civic wayfinding system for a transit hub — the brief, the process, and the outcome. Built as a decision-grade coursework defense deck for crit panel, faculty.

repo: nexu-io/open-design

Popularidade

Estrelas no GitHub
101 mil
Posição no ranking
#463
Licença
Apache-2.0
Atualizada em
16/10/2026

Essa skill é útil?

0

Entre para votar.

Comentários

  • …

Mais skills deste repositório

Skills parecidas