”标签 * 常见故障模式的错误处理（错误输入、网络错误、缺少 API） * 加载异步操作的指标 * 干净、实用的用户界面——不花哨，但可用且清晰 ## 风格注释 HTML 工具是实用程序，而不是展示。优先考虑清晰度和功能而不是视觉效果。干净的无衬线字体、合理的间距和清晰的视觉层次就足够了。不要过度设计。也就是说，该工具应该看起来是故意的，而不是损坏的。使用系统字体堆栈、一致的填充和可见的交互式功能（按钮看起来像按钮，输入看起来像输入）。 ## 混音和作曲当用户拥有现有的 HTML 工具并想要扩展它或构建类似的工具时，请首先阅读现有工具的源代码。工作工具是浏览器 API 模式、库使用和交互流程的最佳文档。使用它们作为起点，而不是从头开始构建。</article></body></html>

# HTML 工具构建将 HTML、JavaScript 和 CSS 组合到一个可移植文件中的单文件 HTML 应用程序。这些工具解决特定问题，立即加载，不需要构建步骤，并且可以作为静态文件托管在任何地方。该技能将构建 150 多个此类工具的模式编码化。目标始终是：一个文件、无构建步骤、无框架开销、最大实用性。 ## 何时使用此技能当用户想要一个**实用程序或工具**时，可以使用它——可以转换、显示、调试、转换或处理数据的交互式东西。常见类型： * 转换器（JSON↔YAML、Markdown→HTML、CSV→表、格式转换器） * 查看器/检查器（剪贴板内容、EXIF 数据、键盘事件、CORS 检查） * 处理器（图像裁剪器、OCR、差异生成器、文本转换器） * API 支持的工具（调用支持 CORS 的 API，如 GitHub、PyPI、Bluesky、iNaturalist） * LLM 支持的工具（通过 CORS 直接调用 OpenAI/Anthropic/Gemini API） * 开发实用程序（正则表达式测试器、颜色选择器、编码工具、哈希生成器）如果用户想要精美的营销页面或产品组合，请使用“前端设计”技能。 ## 核心原则 1. **单个文件** ：所有 HTML、JS 和 CSS 都在一个“.html”文件中。可以轻松复制、托管和共享。 2. **没有 React，没有构建步骤**：避免 React（JSX 需要转译）。使用普通 JS 或轻量级 CDN 库。如果用户特别要求 React，请解释权衡并提供这两个选项。 3. **仅 CDN 依赖项**：从 cdnjs.cloudflare.com 或 cdn.jsdelivr.net 加载固定版本。依赖关系越少越好，但不要重新发明已经解决的问题。 4. **保持小**：几百行是理想的。在这个规模下，代码很容易理解，很容易重写，也很容易交给另一个法学硕士进行修改。 5. **复制粘贴作为主要 I/O** ：许多出色的工具接受粘贴的输入，对其进行转换，并为输出提供“复制到剪贴板”按钮。默认使用此交互模式，除非问题需要其他方式。 ## 文件模板 <头> <元字符集=“UTF-8”> <标题>[工具名称] <风格> /* 所有 CSS 内联 */ <正文> <脚本> /* 所有 JS 内联 */ 始终包含移动设备的视口元标记。尽可能使用语义 HTML。 ## 图案选择指南构建工具时，请考虑应用“references/patterns.md”中的哪些模式。这是一个快速决策框架： **数据如何进入？** * 用户输入/粘贴文本 → 粘贴输入模式 * 用户有一个文件→文件输入模式（不需要服务器，JS直接读取） * 工具通过链接→URL参数模式进行配置 * 用户在 → 拖放模式中拖动某些内容 **数据如何流出？** * 用户需要文本输出 → 复制到剪贴板按钮（始终包含此按钮） * 用户需要一个文件 → 可通过 Blob URL 下载文件 * 用户需要视觉→直接在页面中渲染 **该工具需要记住什么吗？** * 小状态，可共享 → 保留 URL 哈希/查询参数 * 更大的状态或秘密（API 密钥）→ localStorage * 无 → 保持无状态 **该工具需要外部数据吗？** * 具有 CORS 的公共 API → 直接从浏览器获取 * LLM API → 将用户的API密钥存储在localStorage中，通过CORS调用API * API 上没有 CORS → 解释限制，建议代理或不同的方法 **该工具是否需要大量计算？** * Python 逻辑 → Pyodide（Python 编译为 WebAssembly，从 CDN 加载） * 其他编译工具→检查WebAssembly端口是否存在（Tesseract.js、FFmpeg.wasm等） * 纯JS就可以 → 直接使用即可阅读“references/patterns.md”以获取详细的代码示例和每个模式的实现指南。 ## 实施清单构建 HTML 工具时，请验证： * 带有内联 CSS 和 JS 的单个 `.html` 文件 * 无需构建步骤 * 从 CDN 加载依赖项并固定版本 * 适合移动设备（视口元标记、响应式布局） * 如果工具生成文本输出，则“复制到剪贴板”按钮 * 清晰的描述性“”标签 * 常见故障模式的错误处理（错误输入、网络错误、缺少 API） * 加载异步操作的指标 * 干净、实用的用户界面——不花哨，但可用且清晰 ## 风格注释 HTML 工具是实用程序，而不是展示。优先考虑清晰度和功能而不是视觉效果。干净的无衬线字体、合理的间距和清晰的视觉层次就足够了。不要过度设计。也就是说，该工具应该看起来是故意的，而不是损坏的。使用系统字体堆栈、一致的填充和可见的交互式功能（按钮看起来像按钮，输入看起来像输入）。 ## 混音和作曲当用户拥有现有的 HTML 工具并想要扩展它或构建类似的工具时，请首先阅读现有工具的源代码。工作工具是浏览器 API 模式、库使用和交互流程的最佳文档。使用它们作为起点，而不是从头开始构建。</article></body></html>

网页工具

包含技能