Beautiful Articlepor ConardLi

Beautiful Article Skill.

Crea un documento que merezca ser leído sin convertirlo en un panel de control.

Diseño editorial
HTML
Formato largo

Revisión de la fuente · Beautiful ArticleSKILL.md

Tarea Diseño editorial Produce • Un article.html autónomo con estilos y scripts integrados • Markdown extraído de la fuente y notas sobre la calidad de la extracción • Un plan editorial y una primera doble página revisada del artículo Antes de empezar La compilación documentada usa Node/npm, Vite, React, TypeScript y Reacticle. La extracción de documentos y la salida opcional a PDF pueden requerir herramientas adicionales; las imágenes generadas necesitan un backend disponible por separado.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Beautiful Article

Un flujo editorial que separa la extracción, la planificación del artículo, la aprobación de la primera doble página, la composición completa y la entrega sin conexión.

Flujo basado en la fuenteNo es una prueba de rendimiento de ejecución

El enfoque de trabajo

Beautiful Article es el flujo de ConardLi que va de la fuente al artículo. Parte de material que ya tienes: la URL de un artículo, Markdown, un documento, un PDF o capturas de pantalla. El resultado buscado es una experiencia de lectura de formato largo, no un breve resumen de marketing. El material fuente extraído sigue disponible para poder comprobar hechos, ejemplos y detalles técnicos durante toda la compilación.

La decisión distintiva es revisar una primera doble página antes de producir todo el artículo. Una portada, una sección de apertura y un bloque visual representativo establecen cómo se leerá el contenido. Reacticle aporta componentes semánticos de artículo, mientras que una capa personalizada acotada puede añadir diagramas u otras ayudas de lectura. La entrega es un archivo HTML autónomo; PDF es una salida aparte, que se solicita y no se genera por defecto.

Entregables esperados

Un article.html autónomo con estilos y scripts integrados
Markdown extraído de la fuente y notas sobre la calidad de la extracción
Un plan editorial y una primera doble página revisada del artículo

Ver el brief de ejemplo

Del brief a la revisión

01
Recuperar la fuente
Extrae el material proporcionado y lleva un registro del contenido que falte o sea incierto. Los PDF difíciles y las capturas de pantalla requieren especial atención antes de que su texto sea la base de un artículo.
02
Planificar la experiencia de lectura
Antes de compilar, obtén decisiones separadas del usuario sobre el tipo de artículo y su nivel de retención, el tema, el ancho del diseño, el modo de imágenes y la portada. La retención completa de la información es lo predeterminado; registra en el plan cualquier reducción acordada.
03
Revisar la primera doble página
Crea la portada aprobada, la sección de apertura y un bloque visual representativo. Obtén una comprobación de un agente revisor independiente y luego haz una pausa para que el usuario apruebe la muestra y elija entre desarrollo secuencial o en paralelo.
04
Completar y empaquetar
Revisa cada sección y el artículo terminado, corrige los fallos y luego obtén la decisión final de entrega antes de exportar el HTML sin conexión. La revisión de la primera doble página y la final usan agentes independientes cuando están disponibles; cualquier recurso al agente principal debe comunicarse. Exporta PDF solo cuando se solicite.

02 Cuándo usarlo

Cuándo usarla

La compilación documentada usa Node/npm, Vite, React, TypeScript y Reacticle. La extracción de documentos y la salida opcional a PDF pueden requerir herramientas adicionales; las imágenes generadas necesitan un backend disponible por separado.

Buena opción

Explicaciones técnicasÚtil cuando el código, las fórmulas, las tablas o las comparaciones deben seguir siendo legibles junto con la prosa, en lugar de comprimirse en tarjetas al estilo de diapositivas.
Copias de lectura portátilesEncaja con un informe o ensayo que deba abrirse como un único archivo HTML sin depender de un servidor de desarrollo en ejecución.

Límites que conviene comprobar

No es un creador de aplicacionesLa fuente separa explícitamente este flujo de los paneles de control, los formularios, las aplicaciones web generales y los prototipos de producto.
No es ilustración automáticaLas imágenes externas y generadas son decisiones deliberadas. Un artículo sin imágenes aún puede usar explicaciones en CSS o SVG guiadas por el contenido, sin solicitar silenciosamente un servicio de imágenes.

Aporta estos elementos

Material fuenteProporciona el documento real o un artículo accesible, además de las secciones, citas y figuras que deban conservarse en la conversión.
Lector y propósitoIndica si se trata de un tutorial, un informe, una reseña o un ensayo, y cuántos conocimientos previos tiene el lector previsto.
Permisos visualesElige entre recursos proporcionados, marcadores de posición, imágenes generadas o sin imágenes; indica las restricciones de marca y si se necesita salida en PDF.

03 Decisiones importantes

Decisiones importantes

Primero el contenido, después la decoración
La fuente sigue siendo la referencia factual mientras cambia la estructura del artículo. Así es más fácil detectar un diseño atractivo que haya eliminado por accidente una salvedad necesaria.
Una muestra de lectura temprana
Una primera doble página revisada pone a prueba la prosa y los bloques de explicación reales, no solo los colores. Los cambios en el ancho de lectura o la densidad visual pueden hacerse antes de construir cada sección.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo que sigue no se ha probado. Revisa la configuración de la skill antes de usarlo.

Revisa la configuración

Usa el paquete del repositorio del autor con sus scripts y referencias. La fuente describe la creación de la estructura del proyecto, no un comando de instalación universal verificado.

Archivo fuente original

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

Empieza con un solo entregable

Adapta el alcance, el material fuente y las restricciones de este brief antes de ejecutar la skill.

Brief de ejemplo

Usa Beautiful Article para convertir la guía de migración adjunta en una explicación HTML sin conexión para ingenieros de frontend. Conserva los ejemplos de código y las salvedades de compatibilidad, mantén el idioma de la fuente y no uses imágenes generadas. Planifica la estructura de lectura y muestra una primera doble página con la introducción y un bloque de comparación antes de completar el artículo. Entrega el HTML y las notas de extracción; todavía no crees un PDF.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

El artículo puede abrirse sin conexión con los estilos e interacciones previstos.
Los ejemplos y salvedades requeridos pueden rastrearse hasta la fuente proporcionada.
La primera doble página y las secciones posteriores comparten una jerarquía legible sin reemplazar la prosa de formato largo por tarjetas repetitivas.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que la skill esté incluida ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fija de la fuente enlazada abajo. El comportamiento y los requisitos del origen pueden cambiar.

Propietario de la fuente: ConardLi
Repositorio: ConardLi/garden-skills
Archivo de la skill: skills/beautiful-article/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · aaf9a82f5efd

Resumen editorial de la fuente

Un flujo editorial que separa la extracción, la planificación del artículo, la aprobación de la primera doble página, la composición completa y la entrega sin conexión.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no una medida de uso de la skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Resume la fuente por defecto?

No. El flujo prioriza conservar la información de la fuente. El tipo de artículo y la densidad pueden cambiar el tratamiento, pero el resumen debe ser una decisión editorial explícita.

¿Puede traducir el artículo?

Se puede solicitar la traducción, pero de lo contrario se conserva el idioma de la fuente. Mantén el material original aparte para que un pasaje traducido siga siendo verificable.

¿Es PDF el entregable principal?

No. El entregable principal es HTML autónomo. PDF requiere una pasada de impresión aparte, que incluye el tratamiento de la portada y la paginación.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén tu brief, el material fuente y el trabajo de diseño juntos en un espacio de trabajo local. Revisa la configuración propia de la skill antes de añadirla a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño