html-design-examples

Name: html-design-examples
Author: sammcj

github.com/sammcj设计与 UI16744 次安装1 天前更新

代码仓库

关于 html-design-examples

供 Agent 制作面向人的 HTML 文档时参考的独立 HTML 示例库，涵盖计划、评审、原型、报告、图表和交互式编辑器，并说明如何改编示例。

主要功能

01按交付物类型整理示例
02单文件 HTML，含 CSS 和 JavaScript
03交互界面支持导出状态
04提供 HTML 与 Markdown 的选择指引

适用场景

01制作可视化项目计划或报告
02构建单文件交互式原型
03设计可导出状态的编辑器
04为需审阅的项目文档选择格式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sammcj/agentic-coding --skill html-design-examples

安装后在 Claude Code 中输入/html-design-examples确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

resources/

01-exploration-code-approaches.html

02-exploration-visual-designs.html

03-code-review-pr.html

04-code-understanding.html

05-design-system.html

06-component-variants.html

07-prototype-animation.html

08-prototype-interaction.html

09-slide-deck.html

10-svg-illustrations.html

11-status-report.html

12-incident-report.html

13-flowchart-diagram.html

14-research-feature-explainer.html

15-research-concept-explainer.html

16-implementation-plan.html

17-pr-writeup.html

18-editor-triage-board.html

19-editor-feature-flags.html

20-editor-prompt-tuner.html

index.html

详细介绍

HTML 设计示例

这是一个自包含 .html 文件库，展示静态 HTML 成品如何比内容相同的 Markdown 传达更多信息。为类似任务制作 HTML 成品时，可将这些文件用作视觉和结构参考。

为什么用 HTML，而不是 Markdown

瓶颈在于人的注意力，而不是 Agent 能生成什么。500 行的 Markdown 计划无人问津；相同内容做成一个包含图表、表格和内嵌控件的 HTML 页面，就更容易吸引人阅读。HTML 能在一个文件中呈现表格、SVG、CSS 布局、脚本和空间构图，可在任何浏览器中打开，也能通过 URL 分享，而不必作为附件。Token 和延迟成本确实存在，但对于任何需要由人阅读的成品来说，都值得付出。

面向人的临时成品（规范、计划、报告、说明文档、原型、一次性编辑器）优先使用 HTML。需要在仓库中长期保存、逐行审查的内容（RFC、ADR、操作手册）仍使用 Markdown 或源文件——HTML 的差异比较嘈杂。

如何使用此技能

选择最符合用户意图的示例（见下方目录）。
撰写自己的内容之前，先完整阅读该文件。参考文件的风格、信息密度和结构正是其价值所在。
遵循通用约定（见“约定”）。
根据用户的实际内容进行调整。示例使用了虚构的“Birchline”品牌和样例数据——不要沿用这些内容。
如果成品是编辑器或其他交互界面，最后添加“复制为 JSON”或“复制为提示词”按钮，让用户的工作能返回 Agent 工作流中。

资源目录

文件位于 resources/。打开 resources/index.html 可查看带缩略图的渲染图库。

探索与规划

01-exploration-code-approaches.html - 并排比较三种实现方案，并在行内标出权衡。
02-exploration-visual-designs.html - 实时呈现布局和配色方案，便于视觉比较。
16-implementation-plan.html - 时间线上的里程碑、数据流图、内嵌模型、风险代码、风险表。

代码审查与理解

03-code-review-pr.html - 带边栏注释、严重程度标签和跳转链接的差异标注。
17-pr-writeup.html - 作者撰写的 PR 描述，包含动机、前后对比和逐文件介绍。
04-code-understanding.html - 用方框和箭头绘制陌生的包，并突出显示关键路径。

设计

05-design-system.html - 以可复制色块呈现颜色、字体比例和间距标记。
06-component-variants.html - 在一张总览图中展示一个组件的所有尺寸、状态和用途。

原型制作

07-prototype-animation.html - 单独呈现一个过渡效果，并提供时长和缓动方式滑块。
08-prototype-interaction.html - 四个相互关联的屏幕，足以呈现交互的真实感。

插图与图表

10-svg-illustrations.html - 适用于博客文章的内嵌 SVG 插图集。
13-flowchart-diagram.html - 带注释、点击可展开步骤详情的流程图。

演示文稿

09-slide-deck.html - 无需构建步骤的单文件演示文稿，可通过方向键导航。

研究与学习

14-research-feature-explainer.html - TL;DR、可折叠的请求路径步骤、带标签页的配置片段和常见问题解答。
15-research-concept-explainer.html - 交互式演示、对比表，以及悬停联动的术语表。

报告

11-status-report.html - 周报：已交付内容、延期事项和小型图表。
12-incident-report.html - 事后复盘，包含逐分钟时间线、日志摘录和后续检查清单。

自定义编辑界面

18-editor-triage-board.html - 在 Now / Next / Later / Cut 之间拖动工单，然后将排序结果导出为 Markdown。
19-editor-feature-flags.html - 分组开关，附带依赖关系警告，以及用于复制已更改键的差异按钮。
20-editor-prompt-tuner.html - 带高亮变量槽位的可编辑模板；输入三个示例后，内容会实时重新渲染。

所有示例的通用约定

一个 .html 文件，可直接在浏览器中打开。无需构建、无需 npm、无需 CDN 脚本，也无需外部样式表。
在 :root 中使用 CSS 自定义属性定义调色板和字体栈。
衬线字体的展示型标题搭配无衬线字体的正文，是反复采用的排版模式。
所有交互都使用单个 <script> 标签中的原生 JS 实现。
平和、具有编辑感的美学风格：纸张色调、克制的强调色、充裕的留白（但不要使用狭窄的信息栏。合理利用可用的屏幕空间）。

美学一致性

当用户已有自己的设计语言时，生成或引用一个设计系统 HTML 文件（参见 05-design-system.html 的形式），并将其作为后续产物的样式基准。优先采用项目自身的品牌风格和设计令牌，不要全盘照搬图库的编辑风格调色板。

注意事项

HTML 差异内容繁杂。如果产物将存放在代码仓库中，并需要随着时间推移逐行审查，请改用 Markdown。
没有导出按钮的编辑器只能算半个工具。交互式产物务必提供一种将结果导出为文本的方式。
如果用户明确需要用方向键控制的幻灯片演示文稿，html-slides 技能就是专门为此设计的。如果用户需要带有“复制为提示词”按钮的可配置探索工具，playground 技能就是专门为此设计的。本技能适用于其他任何单文件 HTML 交付物。

支持 Markdown

登录后评论