刚好前天摸鱼时间搞了个工具网站，这也是感谢 @方可乐 交流后的灵感，类似这种工具站交给 AI 还是很快就可以搞定的，因为交互原型功能确定后，剩下就是让 AI 帮我们开发各种小工具的功能了。
好的，那如果你也想有一个自己的工具网站，那么今天就跟我一块手摸手告诉你怎么弄。
第一步：确定需求
当然能靠 AI 的还是靠 AI，我找的是 ChatGPT，让他给我写下需求文档，这样可以给我
不过中间还是来了些多轮调试，让 GPT 给我小修小改了下。那看下我们最后的结果
### System（系统指令）
你是一名 **10 年以上经验** 的全栈工程师兼产品设计师，精通 **TypeScript、React/Next.js、TailwindCSS、shadcn/ui、Vite** 及现代组件架构。
作为 **Cursor IDE 内的自动化编码代理** 工作：
- 可直接访问文件系统，创建 / 编辑 / 删除文件，并执行 **“Install dependencies”** 等操作。
- 必须在 **一次对话** 内完成全部任务，除非我明确要求暂停。
- 除非被请求说明，否则始终输出 **有效代码块** 或 **文件树差异**；不要给出纯文字解释。
- 交付的代码需结构清晰、可运行，并附 **英文 + 简明中文** 注释。
---
### User（用户指令）
目标：为个人开发者「皮智慧」打造一个 **纯前端网站**，包含 **100 款小工具**（所有逻辑仅在浏览器端运行，不接入 AI 或后端存储）。
#### 技术栈
- **Next.js 14 + TypeScript**
- **TailwindCSS + shadcn/ui**（支持浅/深色切换）
- **Vite** Bundler（Next 14 默认）
- 无任何服务器端或数据库依赖
#### UI / UX 要求
- 首页以卡片网格方式列出所有工具，支持响应式与浅/深色切换
- 每个工具页面需可独立运行，无整页刷新
- 移动端友好，所有交互均流畅
#### 实现要求
- **100 个工具全部实现最小可用功能**，不得留 TODO 占位
- 组件均使用 **函数式写法**，并附 **JSDoc + 简明中文** 注释
- 提供统一的 ESLint / Prettier 配置
- 生成 `README.md`，包含快速启动与贡献指南（中 / EN）
#### 交付顺序
1. 输出 **项目文件树差异**（file-tree diff），创建完整目录与 100 个组件文件
2. 按需分块输出 **全部代码**：核心配置文件、框架文件及 100 个工具组件实现
3. 自动添加脚本：`npm run dev`、`npm run build`、`npm run lint`
4. 如输出过长被截断，请在同一会话输入 **`#continue`** 续写，直至全部完成
5. 生成完毕即视为任务完成；除非我发出新指令，请勿额外解释或提问
---
#### 📦 100 Tools List（slug | 英文名 | 一句话功能）
**文本处理**
1. `word-count` | Word Count | 实时统计文本字数
2. `char-case` | Case Converter | 大小写转换
3. `slugify` | Slug Generator | 生成 URL-slug
4. `lorem-ipsum` | Lorem Ipsum | 假文生成
5. `markdown-preview` | Markdown Preview | MD→HTML 预览
6. `json-pretty` | JSON Formatter | JSON 美化 / 压缩
7. `yaml-to-json` | YAML→JSON | 格式互转
8. `html-to-text` | HTML Stripper | 提取纯文本
9. `regex-tester` | RegEx Tester | 正则实时匹配
10. `diff-viewer` | Text Diff | 文本差异对比
**颜色 / 设计**
11. `color-picker` | Color Picker | 取色并复制十六进制
12. `hex-rgb` | HEX↔RGB | 颜色格式互转
13. `palette-generator` | Palette Maker | 自动配色
14. `contrast-checker` | Contrast Checker | 对比度检测
15. `gradient-maker` | Gradient Maker | CSS 渐变生成
16. `shadow-generator` | Shadow CSS | 盒阴影调配
17. `border-radius` | Radius Preview | 圆角可视化
18. `favicon-generator` | Favicon Maker | 生成多尺寸 ICO
19. `css-clamp` | CSS Clamp | Fluid size 计算
20. `tailwind-cheatsheet` | Tailwind Lookup | 类名速查
**图片 / 多媒体**
21. `image-compress` | Image Compressor | 客户端压缩 JPG/PNG/WebP
22. `image-resize` | Resize Image | 图像等比缩放
23. `image-convert` | Format Convert | PNG↔WebP↔JPG
24. `image-crop` | Crop Image | 裁剪并导出
25. `exif-viewer` | EXIF Viewer | 查看 / 去除元数据
26. `svg-minify` | SVG Minifier | 压缩 SVG
27. `gif-split` | GIF Splitter | GIF 帧拆分
28. `video-trim` | Video Trim | 浏览器端剪辑
29. `audio-convert` | Audio Convert | 音频格式转换
30. `icon-spriter` | SVG Sprite Gen | 生成雪碧图
**日期 / 时间**
31. `unix-timestamp` | Timestamp↔Date | 时间戳互转
32. `cron-parser` | Cron Parser | 解析 Cron 表达式
33. `age-calculator` | Age Calc | 计算年龄
34. `time-diff` | Time Diff | 日期间隔
35. `timezone-convert` | TZ Convert | 时区换算
36. `week-number` | Week No. | ISO 周数
37. `countdown-timer` | Countdown | 倒计时
38. `date-add` | Date Plus | 日期加减
39. `working-days` | Workdays Calc | 工作日计算
40. `calendar-maker` | Mini Calendar | 生成月历 PNG
**数学 / 单位**
41. `unit-convert` | Unit Convert | 单位换算
42. `percentage-calc` | Percentage | 百分比计算
43. `triangle-solver` | Triangle Solve | 三角形求边角
44. `prime-checker` | Prime Check | 判断质数
45. `quadratic-solver` | Quadratic | 解一元二次方程
46. `matrix-math` | Matrix Ops | 矩阵运算
47. `currency-convert` | Currency FX | 静态汇率换算
48. `roman-numeral` | Roman↔Arab | 罗马数字转换
49. `base-n` | Base-N Convert | 进制转换
50. `random-number` | RNG | 随机数生成
**编码 / 加密**
51. `base64-encode` | Base64⇄Text
52. `url-encode` | URL Encode / Decode
53. `jwt-decode` | JWT Decoder | 解析 JWT
54. `md5-hash` | MD5 Hash | 计算摘要
55. `sha256-hash` | SHA-256 Hash
56. `uuid-generator` | UUID v4
57. `bcrypt-hash` | Bcrypt Hash
58. `qr-generator` | QR Maker | 二维码生成
59. `barcode-generator` | Barcode Maker
60. `password-strength` | Pw Strength | 密码强度检测
**Web / DevTools**
61. `json-to-ts` | JSON→TS Interface
62. `http-status` | HTTP Status Lookup
63. `user-agent` | UA Parser
64. `mime-search` | MIME Type Search
65. `dns-lookup` | DNS Lookup
66. `ip-info` | IP Info | 公网 IP & whois
67. `jwt-generator` | JWT Signer | 本地 HS256
68. `uuid-namespace` | UUID v5 生成
69. `regex-cheatsheet` | RegEx 速查
70. `json-diff` | JSON Diff Viewer
**随机 / 生成器**
71. `lorem-image` | Placeholder Img
72. `fake-user` | Fake User | 虚拟人资料
73. `random-color` | Random Color
74. `name-generator` | Name Gen | 名字生成
75. `quote-generator` | Quote Gen | 随机名言
76. `password-generator` | Password Gen | 密码生成
77. `uuid-batch` | UUID Batch
78. `dice-roller` | Dice Roll | RPG 骰子
79. `lottery-picker` | Lottery Pick | 抽奖器
80. `story-prompt` | Writing Prompt | 写作灵感
**文件 / 文档**
81. `csv-to-json` | CSV→JSON
82. `json-to-csv` | JSON→CSV
83. `markdown-toc` | MD TOC
84. `text-to-pdf` | Text→PDF
85. `merge-pdf` | PDF Merger
86. `split-pdf` | PDF Split
87. `excel-to-json` | XLSX→JSON
88. `zip-extract` | ZIP Extract
89. `image-to-pdf` | Img→PDF
90. `file-hash` | File Checksum
**数据 / 可视化**
91. `csv-preview` | CSV Viewer
92. `json-plot` | JSON Plot | Chart.js
93. `markdown-mermaid` | Mermaid Preview
94. `geojson-viewer` | GeoJSON Map
95. `base64-image` | Base64 Img Preview
96. `html-preview` | Live HTML | iframe
97. `table-sorter` | Table Sorter / Filter
98. `url-parser` | URL Inspector
99. `email-validator` | Email Regex Check
100. `credit-card-check` | Luhn Validator
---
> **执行规则**
> - 按“交付顺序”完成；如输出过长，使用 `#continue` 续写。
> - 未收到新指令前，请勿额外解释或提问。
其实这里有一步很重要，GPT给你生产的需求文档，需要你人工确认的，比如下面这段我觉得不太好，100个工具让Cursor一轮写完，很难完成的，还有直接访问文件系统，我还是想自己确认好一些，自己控制，所以我把这些都删除了。
另外在UI/UX的要求里面，你可以加上自己的需求，比如：使用Bento Grid风格构造网站。
这也是后面我调整了风格后想起来的，不过当然没关系，如果前期想不到，可以后面让cursor修改
第二步：新建需求文档
直接新建目录，使用cursor打开。创建 prd.md文档，把上面的需求文档里的汉字直接粘贴到这个markdown文档里。
第三步：开始开发
剩下的时间就是愉快的开发了，很简单，一切交给cursor。顺便在提示词里，我们使用鼓舞式的说法，让cursor给我们好好干。
@prd.md 阅读文档里的需求，帮我实现这个工具站，加油，你是最棒的
这里从一个空目录开始，没有任何的项目模板，cursor最后还是生成得很完善的，下面都是Cursor的步骤，可以简单看下他工作的流程，还是很高级的，至少的 5 年以上的高级开发才搞的了这个。
1. 创建核心目录
2. 创建核心配置文件
3. 创建核心样式
4. 创建工具函数
5. 创建工具列表函数
6. 创建 UI 组件
7. 创建主题切换组件
8. 创建布局文件
9. 创建首页
10. 创建工具布局组件
11. 创建文本处理工具
其实到这里，我们可以看到 cursor 根据我们的 prd.md 文档里的需求，逐步的在创建，从一个空目录开始创建工程基本的配置文件，然后创建基本的框架代码，然后创建业务组件代码，看来思路还是很清晰的。
这个让我想起来了刚学习前端那会，纯手搓项目，就是从一个空目录，按照官网一个一个组件的安装，并且配置文件，起码都得一天以上才搞得定，才能搞出个 Hello World 启动，后面业务都还没刚开始。
现在有了 Cursor 工具后，我才去喝口水的功夫，就给我搞定了，真快。
第四步：Cursor加速工作
可以看到，我们是让 Cursor 写 100 个小工具，可能它自己也感受到了，直接启动加速模式，它自己写了个生成代码的工具类，代码生成代码，这俄罗斯套娃呀，我用 cursor 生成代码，它写了生成代码的工具，让工具给他自己生成代码。
并且后期更是加快了速度，使用的 batch 工具来更加一步的加快速度。
第五步：完成剩下的工作
一大轮下来，Cursor 其实帮们完成了 25 个工具，还是挺快的。
那么剩下的工作就是不停的让 Cursor 给我们完成剩下的工具，并且 Cursor 很贴心的给我们干一会儿活后，就给展示已经完成 l 多少，还有多少没完成，还是按分类显示的。
到后面就是重复的步骤，让 Cursor 不停的完成工具代码，有错误基本他会自己修复
第六步：异常
首先就是感觉直接给 Cursor 的 Claude 模型干冒烟了，不让我用了，我只能选择 auto 模式继续搞了一会儿。
并且，在调用了 25 个工具后，会需要重新点击下继续。
第七步：风格转换
工具站做完以后是这样的，貌似有点太普通，我想让他变得花哨些。
之前看了下各种网站的风格，Bento Grid风格 貌似还不错，就是苹果 PPT 风格。那么我们使用 ask 模式，先让 Cursor 帮我们鉴定下哪种风格好。
并且他会不改代码的，帮我们临时先看下这个风格的代码
最后我还觉得不错，就换成了 agent 模式，开干了。
所以最后的风格就变成了下面的这样。看起来还不错哦。
第七步：部署
到这里，其实如果你只是本地看的话，就已经可以了，那么这里我们教一个上线部署的步骤，傻瓜式的，不需要各种配置环境。
我相信大家如果搞独立开发的 Vercel 肯定都熟悉了，这里也介绍下类似的工具，railway.com/，他不仅可以部署前端静态页面，还有后端服务，PostgreSQL、Redis 等数据库也支持一键部署。
1.代码上传到 Github 上
当然需要你的代码上传到 Github 上。如下图，创建 Github 项目，就可以了，完成后界面有提示告诉你本地该如何操作。
如果你对 git 熟悉的话，肯定是不在话下了，如果不熟悉，把它当成一个存档工具，也是需要本地安装的
2.项目的配置文件
railway 部署是需要一些配置文件的，当然我们可以让 Cursor 帮我们搞定。
直接告诉 Cursor 我们需要部署到 railway 上，看还需要什么工作可以做的。
Cursor 会帮我们创建需要的配置文件，那么就可以进入下一步部署了。
3.提交代码
记得要提交代码，在 Cursor 的页面添加提交代码，推送代码到 Github 上，这样 railway 才可以拉取到代码。
4.railway 页面操作
现在会有赠送的额度，并且免费就用也有 512M 的内存机器使用。对于当前下的足够了。注册登录后，选择 Dashboard 后，点击添加，就可以看到如下的页面，添加 Github 项目，后续就会授权等操作，继续完成就可以。
下一步就一个你的项目
然后就会跳转到工作区间，会自动部署。
不够这里有些小曲折，看下面红色的，还是部署了好几次，也不知道啥问题，反正就是复制异常日志到 Cursor 里面，帮我搞定的。
然后 Cursor 就会给你解决
经历了几次后，就不是成功了。
5.大功告成
部署完成后怎么访问了，切换到 settings 页面，有个 Networking 部分，可以生成一个 railway 自带的域名，用这个域名就可以访问了，如果你有自己的域名还可以添加一个自己的域名，添加完以后就可以自己访问了。
总结
到这里，总算是歇了口气，大功告成，那么这里就简单总结下，其实别看上面的步骤有这么多，都是些重复的工作，完全就让 Cursor 干的时候，你去干别的事情，我就是一个下午搞成的，其他时间就可以去摸鱼了。
1、找 DeepSeek或者 ChatGPT 生成需求文档，这一步我感觉很重要，如果你自己有详细的需求文档更好，没有就可以找大模型跟你一起探讨，注意我说的是探讨，并不是一味的相信大模型给你的东西，你需要结合你自己实际的需求和场景，还有你的想法
2、剩下就是让 Cursor 工具根据你的需求文档开发程序，写出东西来了
3、接下来就是重复的看效果，有问题就让 Cursor 继续给你改
4、如果涉及到大的改造，建议使用 ask 模式，先让 Cursor 给你模拟一遍，如果你觉得可以，就让Cursor 再开干，避免重复回滚，写出一堆狗屎代码
5、最后就是部署，其实部署相对来说还是有点麻烦，我还是花了些时间，现在 Vercel、railway 这些部署工具还是很容易上手，搞定部署配置文件，就可以使用了，并且没有域名的话，他可以临时先帮你生成域名。
如果你能看到这里，可以访问这个网站：happytools.vip/
有什么意见可以联系我哦，目前我也在使用这个网站，让他变得更有效
并且可以领取我的100+工具站源码包
