SuperAPI AI 工具集

good-html

前端与建站

查看项目

更新于 10-15 21:36

技能介绍

用途:good-html 是一个 Claude 技能,用于生成或重构高密度、可交互、自成一体(self-contained)的 HTML 产物,替代普通的 Markdown 或低分辨率 HTML,让单个 HTML 文件充当迷你应用或交互式文档。

主要能力与规则:产物必须只输出为一个 .html 文件;零依赖,不使用外部 CSS 框架(如 Tailwind、Bootstrap)或外部字体;所有样式内联在 <style> 块中,图形使用内联 <svg>。需避免“AI 默认”风格,例如通用的亮蓝/紫渐变或基础 Bootstrap 观感,而使用其提供的大地色、柔和色调色板与稳健的系统字体。

使用方式:技能提供 references/patterns.md(架构模式、纯 CSS 交互、审查清单)、references/styles.md(颜色、排版、间距设计系统)、references/components.md(预置交互组件如标签页、diff、时间线)以及 assets/boilerplate.html(结构起点)。新建产物流程:分析请求确定页面类型,规划布局与交互模型,再基于样板与组件库实现。审查与重构流程:对照审查清单审计现有 HTML,找出外部依赖、通用样式或低密度布局,做外科式更新——内联外部 CSS/JS、用系统字体栈替换网络字体、将颜色改为 Ivory/Slate/Clay 调色板、把列表或简单表格重构为高密度网格或标签页;验证交互性,确保标签页等状态处理在合适场景改用纯 CSS 的 radio 机制。最后输出完整 HTML 代码块供用户复制,或被指示时直接写入 HTML 文件,且不截断代码。

限制:资料未说明平台要求、收费情况、性能与兼容性细节,也未提供具体价格或使用步骤之外的信息。