122 lines
6.5 KiB
Markdown
122 lines
6.5 KiB
Markdown
|
# Magazine Web PPT · Skill de PPT estilo revista eletrônica em web
|
|||
|
|
|
|||
|
|
> 🌏 **English version: [README.en.md](./README.en.md)**
|
|||
|
|
> 🌏 **中文版: [README.md](./README.md)**
|
|||
|
|
|
|||
|
|
Uma skill do [Claude Code / Claude Agent Skills](https://agentskills.io/) para gerar **PPTs HTML em arquivo único com swipe horizontal**. O tom visual é "**revista eletrônica × tinta digital**" — como se a *Monocle* tivesse colado código.
|
|||
|
|
|
|||
|
|
> Destilada por [歸藏](https://x.com/op7418) em palestras presenciais como "Empresa de uma pessoa só: a organização dobrada pela IA" e "Uma nova forma de trabalhar"; cada armadilha que ele já pisou virou linha em `checklist.md`.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Resultado
|
|||
|
|
|
|||
|
|
- 🖋 **Título grande em serifa + corpo sem serifa + metadados monoespaçados**, divisão tipográfica em três níveis
|
|||
|
|
- 🌊 **Background WebGL com fluido / dispersão**, presente na hero, contido nas páginas internas
|
|||
|
|
- 📐 **Swipe horizontal**: teclado ← → / scroll / swipe touch / dots inferiores / ESC para o índice
|
|||
|
|
- 🎨 **5 paletas predefinidas**: Tinta Clássica / Azul-Índigo Porcelana / Tinta Floresta / Papel Kraft / Duna
|
|||
|
|
- 🧩 **10 layouts de página**: capa de abertura, abertura de capítulo, manchete de dado, texto-à-esquerda imagem-à-direita, grade de imagens, pipeline, página de mistério/pergunta, citação grande, comparação Before/After, mistura texto+imagem
|
|||
|
|
- 📄 **HTML de arquivo único**: sem build, sem servidor, abre direto no navegador
|
|||
|
|
|
|||
|
|
## Quando encaixa / quando não encaixa
|
|||
|
|
|
|||
|
|
**✅ Boa escolha**: palestras presenciais / conversas internas de mercado / sessões privadas / lançamentos de produtos de IA / demo day / discursos com forte estilo pessoal
|
|||
|
|
|
|||
|
|
**❌ Má escolha**: tabelões de dados / material de treinamento (densidade de informação insuficiente) / edição colaborativa multi-usuário (HTML estático)
|
|||
|
|
|
|||
|
|
## Instalação
|
|||
|
|
|
|||
|
|
### Forma 1: mande o texto abaixo direto para a IA (recomendado)
|
|||
|
|
|
|||
|
|
> Me ajude a instalar a skill `guizang-ppt-skill` do Claude Code. Siga estes passos:
|
|||
|
|
>
|
|||
|
|
> 1. Garanta que o diretório `~/.claude/skills/` existe (crie se não existir)
|
|||
|
|
> 2. Rode `git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/magazine-web-ppt`
|
|||
|
|
> 3. Verifique: `ls ~/.claude/skills/magazine-web-ppt/` deve mostrar `SKILL.md`, `assets/` e `references/`
|
|||
|
|
> 4. Me avise quando estiver instalado; depois disso, quando eu disser "faça um PPT estilo revista" ou similar, essa skill é disparada
|
|||
|
|
|
|||
|
|
Cole esse texto no Claude Code / Cursor / qualquer agente de IA com permissão de shell, e ele faz a instalação automaticamente.
|
|||
|
|
|
|||
|
|
### Forma 2: linha de comando manual
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/magazine-web-ppt
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Como disparar
|
|||
|
|
|
|||
|
|
Depois de instalada, o Claude Code descobre e chama a skill automaticamente na conversa. Palavras-chave de gatilho:
|
|||
|
|
|
|||
|
|
- "me faça um PPT estilo revista"
|
|||
|
|
- "gere um horizontal swipe deck"
|
|||
|
|
- "editorial magazine style presentation"
|
|||
|
|
- "slides de palestra estilo electronic ink"
|
|||
|
|
|
|||
|
|
## Fluxo de uso
|
|||
|
|
|
|||
|
|
A skill é um workflow estruturado de 6 passos; o Claude conduz:
|
|||
|
|
|
|||
|
|
1. **Esclarecimento de requisitos** — checklist de 6 perguntas: audiência, duração, material, imagens, tema, restrições rígidas
|
|||
|
|
2. **Cópia do template** — `assets/template.html` → diretório do projeto, ajuste `<title>`, troque a paleta
|
|||
|
|
3. **Preenchimento de conteúdo** — escolha entre os 10 esqueletos de layout, cole, edite o copy (com pré-checagem de classes + planejamento de ritmo das paletas antes)
|
|||
|
|
4. **Autoavaliação** — confronto com `references/checklist.md`; questões P0 precisam passar todas
|
|||
|
|
5. **Preview** — abre direto no navegador
|
|||
|
|
6. **Iteração** — ajusta tamanho de fonte / altura / espaçamento via inline style
|
|||
|
|
|
|||
|
|
Detalhes em [`SKILL.md`](./SKILL.md).
|
|||
|
|
|
|||
|
|
## Estrutura de diretórios
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
magazine-web-ppt/
|
|||
|
|
├── SKILL.md ← Skill 主文件:工作流、原则、常见错误
|
|||
|
|
├── README.md ← 本文件
|
|||
|
|
├── assets/
|
|||
|
|
│ └── template.html ← 完整可运行的种子 HTML(CSS + WebGL + 翻页 JS 全配好)
|
|||
|
|
└── references/
|
|||
|
|
├── components.md ← 组件手册(字体、色、网格、图标、callout、stat、pipeline)
|
|||
|
|
├── layouts.md ← 10 种页面布局骨架(可直接粘贴)
|
|||
|
|
├── themes.md ← 5 套主题色预设(只能选不能自定义)
|
|||
|
|
└── checklist.md ← 质量检查清单(P0 / P1 / P2 / P3 分级)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Paletas predefinidas
|
|||
|
|
|
|||
|
|
Escolha uma em `references/themes.md` — **valores hex personalizados não são permitidos**; preservar a estética importa mais do que dar liberdade.
|
|||
|
|
|
|||
|
|
| Paleta | Cenário ideal |
|
|||
|
|
|--------|---------------|
|
|||
|
|
| 🖋 Tinta Clássica | Default genérico, lançamento comercial, quando estiver na dúvida |
|
|||
|
|
| 🌊 Azul-Índigo Porcelana | Tecnologia / pesquisa / IA / lançamentos técnicos |
|
|||
|
|
| 🌿 Tinta Floresta | Natureza / sustentabilidade / cultura / não-ficção |
|
|||
|
|
| 🍂 Papel Kraft | Nostálgico / humanidades / literatura / revistas independentes |
|
|||
|
|
| 🌙 Duna | Arte / design / criativo / galeria |
|
|||
|
|
|
|||
|
|
Para trocar a paleta basta substituir as 6 linhas de variáveis dentro do `:root{}` no início do `template.html`; todo o resto do CSS usa `var(--...)`.
|
|||
|
|
|
|||
|
|
## Princípios centrais de design
|
|||
|
|
|
|||
|
|
1. **Contenção acima de fogos** — o background WebGL só vaza na página hero
|
|||
|
|
2. **Estrutura acima de decoração** — informação nasce de tamanho de fonte + contraste tipográfico + grid e respiro, não de sombras nem cards flutuantes
|
|||
|
|
3. **Imagem é cidadã de primeira classe** — corte só pelo rodapé; topo e laterais ficam íntegros
|
|||
|
|
4. **O ritmo vem das hero** — alternar hero / não-hero é o que evita cansar a vista
|
|||
|
|
5. **Termos uniformes** — Skills permanece Skills, sem misturar tradução en-zh
|
|||
|
|
|
|||
|
|
## Referências visuais
|
|||
|
|
|
|||
|
|
- Diagramação da revista [*Monocle*](https://monocle.com)
|
|||
|
|
- "Thin Harness, Fat Skills" do Garry Tan (YC)
|
|||
|
|
- Série de PPTs de palestras presenciais do 歸藏
|
|||
|
|
|
|||
|
|
## Contribuindo
|
|||
|
|
|
|||
|
|
Bugs, problemas de tipografia, pedidos de novos layouts — abra Issue ou PR. Para mudanças, prefira:
|
|||
|
|
|
|||
|
|
- Adicionar classes em `template.html` para que `layouts.md` não use classes indefinidas
|
|||
|
|
- Registrar pegadinhas em `checklist.md` no nível P0 / P1 / P2 / P3 correspondente
|
|||
|
|
- Levar nova paleta para `themes.md` e indicar o cenário em que ela cabe
|
|||
|
|
|
|||
|
|
## Licença
|
|||
|
|
|
|||
|
|
MIT © 2026 [op7418](https://github.com/op7418)
|