参考文档

HTML 工具设计原则与开发指南

设计原则

📄

单文件 HTML

将 HTML、CSS 和 JavaScript 都写在一个文件中，方便复制粘贴和部署，无需构建步骤

⚡

避免 React

使用纯 JavaScript 或从 CDN 加载轻量级框架，更快的渲染和更少的 Bug

📦

CDN 依赖

使用 cdnjs 或 jsDelivr 加载第三方库，使用带版本号的 URL 确保稳定性

💎

保持精简

每个工具控制在几百行代码，便于 LLM 理解和修改，易于维护

功能模式

📋

剪贴板操作

支持粘贴内容（文本、富文本、图片、文件），一键复制结果到剪贴板

🔗

URL 状态持久化

将状态保存在 URL 中，方便书签和分享，无需服务器存储

💾

localStorage 存储

用于存储较大的状态或敏感信息，数据不离开用户设备

🌐

CORS API 调用

利用支持 CORS 的公开 API，如 GitHub、各类公开数据接口等

📁

文件处理

使用 input type="file" 直接读取文件，无需上传到服务器

⬇️

文件下载

使用 JavaScript 生成可下载文件，支持多种格式（PNG、JPEG、ICS 等）

本项目的实现

📁

标准化目录结构

每个工具独立文件夹，包含 index.html 和 app.html

📋

索引系统

使用 index.json 管理工具元数据

🔍

搜索和过滤

前端实现的多维度搜索

🤝

提交流程

通过 GitHub Issues 提交工具

🌐

GitHub Pages 部署

静态托管，无服务器成本

工具分类

🔄

格式转换

7 个工具

👨‍💻

开发者工具

6 个工具

📝

文本处理

6 个工具

🖼️

图片处理

2 个工具

🧰

实用工具

4 个工具

开发指南

工具开发流程

  1. 需求分析 - 确定工具功能和用户需求
  2. 原型设计 - 使用 HTML/CSS/JS 快速原型
  3. 功能实现 - 保持精简，专注核心功能
  4. 测试验证 - 多浏览器兼容性测试
  5. 提交审核 - 通过 GitHub Issues 或 PR 提交

工具规范

每个工具必须包含：

tools/ └── your-tool/ ├── index.html # 工具详情页（介绍页面） └── app.html # 工具实体页（实际运行的工具）

设计原则

提示词模板

Build an HTML tool that [描述功能需求]. No React. Use [特定库名] from CDN if needed. Include [特定功能要求].

查看更多信息

返回首页 贡献指南 GitHub 仓库