Beautiful Articlepor ConardLi

Beautiful Article Skill.

Crie um documento que vale a pena ler, sem transformá-lo em um painel de controle.

Design editorial
HTML
Texto longo

Revisão da fonte · Beautiful ArticleSKILL.md

Tarefa Design editorial Produz • Um article.html autocontido, com estilos e scripts embutidos • Markdown extraído da fonte e notas sobre a qualidade da extração • Um plano editorial e uma primeira página dupla revisada para o artigo Antes de começar O build documentado usa Node/npm, Vite, React, TypeScript e Reacticle. A extração de documentos e a saída opcional em PDF podem exigir ferramentas adicionais; imagens geradas precisam de um backend disponível separadamente.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Beautiful Article

Um pipeline editorial que separa extração, planejamento do artigo, aprovação da primeira página dupla, composição completa e entrega offline.

Fluxo baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Beautiful Article é o fluxo de trabalho de ConardLi que vai da fonte ao artigo. Ele parte de um material que você já tem: a URL de um artigo, Markdown, um documento, um PDF ou capturas de tela. O resultado pretendido é uma experiência de leitura longa, não um breve resumo de marketing. O material de origem extraído permanece disponível para que fatos, exemplos e detalhes técnicos possam ser conferidos durante todo o build.

A decisão distintiva é revisar uma primeira página dupla antes de produzir o artigo inteiro. Uma capa, uma seção de abertura e um bloco visual representativo estabelecem como o conteúdo será lido. O Reacticle fornece componentes semânticos de artigo, enquanto uma camada personalizada restrita pode acrescentar diagramas ou outros recursos de leitura. A entrega é um arquivo HTML autocontido; PDF é uma saída separada, gerada sob solicitação, e não o padrão.

Entregas esperadas

Um article.html autocontido, com estilos e scripts embutidos
Markdown extraído da fonte e notas sobre a qualidade da extração
Um plano editorial e uma primeira página dupla revisada para o artigo

Ver o briefing de exemplo

Do briefing à revisão

01
Recuperar a fonte
Extraia o material fornecido e mantenha um registro do conteúdo ausente ou incerto. PDFs difíceis e capturas de tela exigem atenção especial antes de seu texto se tornar a base de um artigo.
02
Planejar a experiência de leitura
Antes de construir, obtenha decisões separadas do usuário sobre o tipo de artigo e seu nível de retenção, o tema, a largura do layout, o modo de imagem e a capa. A retenção total das informações é o padrão; registre no plano qualquer redução acordada.
03
Revisar a primeira página dupla
Construa a capa aprovada, a seção de abertura e um bloco visual representativo. Obtenha uma verificação independente de um agente revisor e, em seguida, pause para que o usuário aprove a amostra e escolha entre desenvolvimento sequencial ou paralelo.
04
Concluir e empacotar
Revise cada seção e o artigo finalizado, corrija as falhas e obtenha a decisão final de entrega antes de exportar o HTML offline. A revisão da primeira página dupla e a revisão final usam agentes independentes quando disponíveis; qualquer alternativa com o agente principal deve ser informada. Exporte PDF somente quando solicitado.

02 Quando usar

Quando usar

O build documentado usa Node/npm, Vite, React, TypeScript e Reacticle. A extração de documentos e a saída opcional em PDF podem exigir ferramentas adicionais; imagens geradas precisam de um backend disponível separadamente.

Quando faz sentido

Explicações técnicasÚtil quando código, fórmulas, tabelas ou comparações devem continuar legíveis junto com o texto, em vez de ficarem comprimidos em cartões no estilo de slides.
Cópias de leitura portáteisServe para um relatório ou ensaio que deve abrir como um único arquivo HTML, sem depender de um servidor de desenvolvimento em execução.

Limites a verificar

Não é um construtor de aplicaçõesA fonte separa explicitamente este fluxo de painéis de controle, formulários, aplicações web em geral e protótipos de produto.
Não é ilustração automáticaImagens externas e imagens geradas são escolhas deliberadas. Um artigo sem imagens ainda pode usar explicações baseadas no conteúdo, em CSS ou SVG, sem solicitar silenciosamente um serviço de imagens.

Traga estes insumos

Material de origemForneça o documento real ou o artigo acessível, além de quaisquer seções, citações e figuras que precisem sobreviver à conversão.
Leitor e propósitoInforme se é um tutorial, briefing, resenha ou ensaio e quanto conhecimento prévio o leitor pretendido tem.
Permissões visuaisEscolha entre recursos fornecidos, marcadores de posição, imagens geradas ou nenhuma imagem; indique restrições de marca e se a saída em PDF é necessária.

03 Decisões importantes

Decisões que importam

Conteúdo antes da decoração
A fonte continua sendo a referência factual enquanto a estrutura do artigo muda. Isso facilita perceber quando um layout atraente removeu acidentalmente uma ressalva necessária.
Uma amostra de leitura antecipada
Uma primeira página dupla revisada testa a prosa e os blocos de explicação reais, não apenas as cores. Mudanças na largura de leitura ou na densidade visual podem ocorrer antes de todas as seções serem construídas.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Use o pacote do repositório do autor, com seus scripts e referências. A fonte descreve a estruturação do projeto, não um comando de instalação universal verificado.

Arquivo da fonte original

https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/beautiful-article/SKILL.md

Comece com uma única entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use Beautiful Article para transformar o guia de migração anexo em uma explicação HTML offline para engenheiros de frontend. Mantenha os exemplos de código e as ressalvas de compatibilidade, preserve o idioma da fonte e não use imagens geradas. Planeje a estrutura de leitura e mostre uma primeira página dupla com a introdução e um bloco de comparação antes de concluir o artigo. Entregue o HTML e as notas de extração; não crie um PDF ainda.

Inspecione o resultado

Compare a saída real com estes critérios observáveis.

O artigo pode ser aberto offline, com os estilos e as interações pretendidos presentes.
Os exemplos e as ressalvas necessários podem ser rastreados até a fonte fornecida.
A primeira página dupla e as seções seguintes compartilham uma hierarquia legível, sem substituir a prosa longa por cartões repetitivos.

O OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte, vinculada abaixo. O comportamento e os requisitos do projeto original podem mudar.

Responsável pela fonte: ConardLi
Repositório: ConardLi/garden-skills
Arquivo da skill: skills/beautiful-article/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · aaf9a82f5efd

Resumo editorial da fonte

Um pipeline editorial que separa extração, planejamento do artigo, aprovação da primeira página dupla, composição completa e entrega offline.

Resumo original do OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Ela resume a fonte por padrão?

Não. O fluxo prioriza reter as informações da fonte. O tipo de artigo e a densidade podem mudar o tratamento, mas a redução deve ser uma decisão editorial explícita.

Ela pode traduzir o artigo?

A tradução pode ser solicitada, mas, fora isso, o idioma da fonte é preservado. Mantenha o material original separado para que um trecho traduzido continue verificável.

PDF é a entrega principal?

Não. A entrega principal é o HTML autocontido. PDF exige uma etapa de impressão separada, incluindo tratamento de capa e paginação.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design