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

html-ppt-zhangzara-soft-editorial

Ajuda seu agente a elaborar um roteiro de transformação digital para uma seguradora antiga. Ele descreve o diagnóstico, as apostas sequenciais e o ritmo operacional.

O que ela faz

Este modelo cria apresentações elegantes e literárias em formato HTML. Ele vem com um design pronto, incluindo cores, fontes e elementos decorativos, para dar um toque sofisticado e tranquilo ao seu conteúdo.

Quando usar

  • ✓Para apresentar histórias de marca ou artigos longos.
  • ✓Ao criar materiais para galerias de arte ou museus.
  • ✓Para relatórios de consultoria ou conteúdo de estilo de vida que pedem um tom mais suave.

Exemplo do que pedir para a IA

“Crie uma apresentação elegante sobre a história da fotografia usando este modelo.”

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-soft-editorial/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-soft-editorial/SKILL.md Leia o arquivo SKILL.md desse link e siga as instruções dele na minha tarefa.
Como funciona

Você só precisa copiar os arquivos do modelo, substituir o texto de exemplo pelo seu conteúdo e manter o design original. Se precisar de mais slides, duplique os existentes.

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-soft-editorial

Ou baixe só o arquivo:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/design-templates/html-ppt-zhangzara-soft-editorial/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.

Soft Editorial

Fonte serif Cormorant Garamond em papel quente com toques de sálvia, blush e limão.

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; permaneça dentro deste.

Em resumo

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

Ideal para

Qualquer coisa que deva parecer literária, elegante e sem pressa: matérias editoriais, histórias de marca longas, decks de galeria/museu, entregas de consultoria, mídia de casamento/estilo de vida, ensaios de fundadores. Igualmente bom para decks de tecnologia, pesquisa ou negócios que desejam um calor de suplemento de domingo em vez de um polimento corporativo.

Evitar para

Decks que precisam de calor visual ou impacto — a paleta de papel quente e a fonte Cormorant são intencionalmente discretas.

Fluxo de trabalho

  1. Clone example.html E a pasta assets/ para o espaço de trabalho do usuário. Este modelo envia um runtime assets/deck-stage.js (navegação por teclado, renderização de palco); o HTML o referencia como assets/deck-stage.js, portanto, o arquivo deve ficar ao lado do HTML clonado ou esse caminho resultará em 404 no artefato gerado e a navegação falhará silenciosamente. Incorporar o JS em um único bloco <script> no HTML é uma alternativa aceitável quando um único arquivo autocontido é preferido.
  2. Substitua o conteúdo de espaço reservado pelos títulos reais do usuário, texto corrido, números, nomes, datas e rótulos de seção. Corresponda às dimensões existentes ao trocar espaços reservados de imagem.
  3. Preserve o sistema de design. Nunca substitua fontes, mude a cor da paleta, reestruture a grade de layout ou remova elementos decorativos (colchetes de canto, textura 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 comporta, duplique um slide existente do layout mais apropriado. Se for menos, remova slides do final. 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 recorra a um modelo diferente.
  6. Mantenha o runtime de navegação como enviado. Se o deck enviar um assets/deck-stage.js ou um manipulador de teclado inline, deixe-o intacto.

Contrato de saída

Emita entre as tags <artifact>:

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

Origem e licença

Fornecido do upstream com licença MIT zarazhangrui/beautiful-html-templates.

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

Perguntas frequentes

Posso mudar as cores e fontes?

Não, o modelo foi feito para ter um visual unificado. Mudar cores ou fontes pode quebrar o design elegante e literário.

O que acontece se eu misturar layouts de outros modelos?

Misturar layouts de outros modelos pode quebrar o sistema de design e a aparência do seu conteúdo.

Como funciona a navegação na apresentação?

O modelo inclui um pequeno código (JavaScript) que permite navegar entre os slides usando o teclado, mantendo a experiência fluida.

Detalhes

Descrição original do autor

A digital-transformation roadmap for a legacy insurer — the diagnosis, the sequenced bets, and the operating rhythm to land them. Built as a decision-grade consulting deck for client executives.

repo: nexu-io/open-design

Popularidade

Estrelas no GitHub
101 mil
Posição no ranking
#465
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