跳转到使用指南
Beautiful Article作者 ConardLi

Beautiful Article Skill.

打造一份值得阅读的文档,而不是把它变成仪表盘。

  • 编辑设计
  • HTML
  • 长篇内容
来源审阅 · Beautiful ArticleSKILL.md
任务 编辑设计 产出内容 • 一个内联样式和脚本的自包含 article.html • 提取的源 Markdown,以及关于提取质量的说明 • 文章的编辑方案和经过审阅的首屏 开始之前 文档所述的构建方式使用Node/npm、Vite、React、TypeScript和 Reacticle。文档提取及可选的PDF输出可能需要其他工具;生成图像需要另行提供的后端。
编辑摘要 · 已审阅来源 2026-10-07 · 并非生成的示例

01 功能说明

Beautiful Article

一套编辑流程,将内容提取、文章规划、首屏审批、完整编排和离线交付分成不同阶段。

基于来源的工作流并非执行基准测试

工作方法

Beautiful Article是ConardLi将来源转化为文章的工作流。它从你已有的材料入手:文章 URL、Markdown、文档、PDF或截图。预期成果是长篇阅读体验,而不是简短的营销摘要。提取的源材料会一直保留,以便在整个构建过程中核查事实、示例和技术细节。

其独特之处在于,先审阅首屏,再制作整篇文章。封面、开篇部分和具有代表性的视觉内容块共同确立内容的阅读体验。Reacticle 提供语义化文章组件,而受约束的自定义层则可添加图表或其他阅读辅助内容。交付物是一个自包含的HTML文件;PDF是需要另行提出的输出,而非默认交付物。

预期交付物

  • 一个内联样式和脚本的自包含 article.html
  • 提取的源 Markdown,以及关于提取质量的说明
  • 文章的编辑方案和经过审阅的首屏
查看示例简报

从简报到审阅

  1. 01
    还原源材料

    提取所提供的材料,并记录缺失或不确定的内容。对于难以处理的 PDF 和截图,在以其中的文本为文章基础之前,需要格外仔细地检查。

  2. 02
    规划阅读体验

    构建之前,需分别获得用户对文章类型及其信息保留程度、主题、版面宽度、图像模式和封面的决定。默认完整保留信息;应在方案中记录任何经商定的信息删减。

  3. 03
    审阅首屏

    制作已获批准的封面、开篇部分和一个具有代表性的视觉内容块。由独立的审阅代理检查,然后暂停,让用户批准样稿并选择顺序开发或并行开发。

  4. 04
    完成并打包

    审阅每个部分和完成后的文章,修复问题,然后在导出离线HTML之前取得最终交付决定。如条件允许,首屏审阅和最终审阅应使用独立代理;若回退为主代理审阅,必须披露。仅在用户提出要求时导出PDF。

02 适用场景

适用场景

文档所述的构建方式使用Node/npm、Vite、React、TypeScript和 Reacticle。文档提取及可选的PDF输出可能需要其他工具;生成图像需要另行提供的后端。

适合的场景

  • 技术解说当代码、公式、表格或对比内容需要与正文一起保持可读,而不是被压缩成幻灯片式卡片时,这项技能很有用。
  • 便携式阅读副本适用于应当作为单个HTML文件打开、且不依赖运行中的开发服务器的报告或文章。

需要检查的限制

  • 并非应用构建工具来源明确指出,此工作流不同于仪表盘、表单、通用 Web 应用和产品原型。
  • 不会自动生成插图外部图片和生成图像都是有意作出的选择。不使用图片的文章仍可通过内容驱动的CSS或SVG进行说明,而不会在未明示的情况下请求图像服务。

请提供以下输入

  • 源材料提供实际文档或可访问的文章,以及转换后必须保留的所有章节、引文和图表。
  • 读者与目的说明内容属于教程、简报、评测还是文章,并说明目标读者具备多少先验知识。
  • 视觉素材权限选择使用所提供的素材、占位符、生成图像或不使用图像;明确所有品牌限制,以及是否需要PDF输出。

03 关键决策

重要决策

  1. 内容优先于装饰

    文章结构虽会改变,但来源始终作为事实依据。这样更容易发现那些虽然美观、却意外删掉必要限定条件的版面。

  2. 尽早提供阅读样稿

    经过审阅的首屏检验的是实际正文和解释性内容块,而不只是颜色。这样可在构建所有章节之前调整阅读宽度或视觉密度。

04 示例任务

尝试一份聚焦的简报

以下示例简报尚未经过测试。使用前请检查该技能的设置要求。

检查设置

使用作者仓库中的软件包及其脚本和参考资料。来源描述的是项目脚手架搭建方式,并非已经验证可普遍使用的安装命令。

上游源文件
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/beautiful-article/SKILL.md

文档所述的构建方式使用Node/npm、Vite、React、TypeScript和 Reacticle。文档提取及可选的PDF输出可能需要其他工具;生成图像需要另行提供的后端。

从一项交付物开始

运行该技能之前,请根据需要调整此简报中的范围、源材料和约束条件。

示例简报
使用Beautiful Article将随附的迁移指南转化为面向前端工程师的离线HTML技术解说。保留代码示例和兼容性注意事项,保留源语言,不使用生成图像。规划阅读结构,并在完成整篇文章之前展示一个包含引言和一个对比内容块的首屏。交付HTML和提取说明;暂时不要创建PDF。

检查结果

依据以下可观察的标准检查实际输出。

  • 文章可离线打开,并保留预期的样式和交互。
  • 所需的示例和注意事项均可追溯至所提供的来源。
  • 首屏与后续章节采用一致且易读的层级结构,不会用重复的卡片取代长篇正文。

OpenDesign为编码代理提供本地设计工作区。此处列出该技能并不意味着它已捆绑提供,也不意味着其中包含其外部工具、凭据和软件依赖项。

05 来源与许可证

来源与许可证

本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。

来源所有者
ConardLi
许可证
MIT
已审阅的快照
2026-10-07 · aaf9a82f5efd
编辑来源摘要
一套编辑流程,将内容提取、文章规划、首屏审批、完整编排和离线交付分成不同阶段。

由OpenDesign根据链接来源撰写的原创摘要。仓库 Star 数只是带有日期的受欢迎程度指标,并不代表技能使用量或质量评分。

06 开始前的问题

开始之前需要考虑的问题

它默认会概述源材料吗?

不会。该工作流优先保留来源中的信息。文章类型和内容密度可以改变呈现方式,但删节应当是一项明确的编辑决策。

它可以翻译文章吗?

可以提出翻译要求,否则将保留源语言。请单独保留原始材料,以便译文段落仍可核查。

PDF是主要交付物吗?

不是。主要交付物是自包含的HTML。PDF需要单独进行打印处理,包括封面和分页处理。

OpenDesign

为下一轮设计迭代留出空间。

将简报、源材料和设计工作集中保存在本地工作区中。将该技能加入工作流之前,请先检查其自身的设置要求。

上游源文件
https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/beautiful-article/SKILL.md