企业官网建设流程全解析

引言：一套覆盖编码、设计、文本、加密、可视化的 25 款单文件 Web 工具（共 27 个开源仓库），全部零依赖、本地优先、永久免费开源。本文讲清楚它为什么存在、包含什么、以及怎么用。

一、为什么做这件事

不知道你有没有同感：现在的开发者工具越来越「重」了。

想做个临时颜色转换，要先装个 App；想生成个密码，要登录某个网站把明文传上去；想格式化一段 JSON，页面先弹三个广告。工具越来越多，但它们离你的机器越来越远，离你的数据也越来越远。

nano-tools 想反过来：把工具重新握回自己手里。每一个都是一个 HTML 文件——双击即开，无需安装、无需联网、无需登录，所有计算都在你浏览器本地完成。

二、什么是 nano-tools

nano-tools 是一个开源的单文件开发者工具矩阵，目前包含25 款工具（共 27 个仓库，含门户与各仓库源码），分几大类：

每一款都符合三条铁律：

• 单文件：整个工具就是一个.html，可下载、可邮件发送、可丢进 U 盘。
• 零依赖：不引任何外部 CDN、框架、字体；离线也能跑。
• 本地优先：数据不出本机，没有后端、没有埋点、没有账号。

三、几个你可能立刻用得上的

• DrawForge（🔥 最新）：纯 Canvas 的离线白板——手绘风画笔、矩形、椭圆、箭头、文本、橡皮，支持平移缩放、导出 PNG/SVG、localStorage 自动保存。整个应用就是一个 HTML 文件，断网也能画，适合画草图、流程图、架构图。
• PassForge：本地密码 / 口令生成器，支持自定义规则与强度校验，明文绝不上传。
• ColorForge：调色板生成 + WCAG 对比度校验，设计师友好。
• JsonForge：JSON 格式化、校验、diff，粘贴即用。
• HashKit：多算法哈希本地计算，不依赖任何在线服务。
• RegexLab：正则表达式实时测试与高亮。
• IconForge：SVG 图标在线编辑与导出。

四、设计哲学

整套工具的视觉与交互遵循同一套Linear 风格的冷峻暗色系统：

• 画布近黑#0A0A0B，卡片#141417，唯一强调色是 Linear 靛蓝#5E6AD2；
• 系统字体栈，零外部请求；
• 仅transform / opacity动效，并尊重prefers-reduced-motion降级。

一句话总结它的气质——离线、克制、不喧宾夺主。

五、怎么开始

• 总入口（门户）：nano-tools · 单文件零依赖工具集
• 组织主页 / 全部仓库：wangzifan396-wzf (WangZi) · GitHub

进去挑一个感兴趣的工具，双击 html 就能用；也可以直接git clone任意仓库本地运行。每个仓库都带og:image社媒卡、favicon与完整的 SEO 头信息，分享链接也有漂亮的预览图。

六、写在最后

做这套东西的初衷很简单：开发者值得拥有真正属于自己的工具——轻、快、隐私、可审计。

如果它对你有用，欢迎到 GitHub 点个 Star ⭐，或者 Fork 改出你自己的版本。也欢迎在评论区告诉我：你最想要的下一款单文件工具是什么？