Cusor猛干3小时出100+工具站，轻松上线自己的网站（部署全流程）
输入“/”快速插入内容
Cusor猛干3小时出100+工具站，轻松上线自己的网站（部署全流程）
Cusor猛干3小时出100+工具站，轻松上线自己的网站（部署全流程）
用户3898用户38982025年6月13日修改
刚好前天摸鱼时间搞了个工具网站，这也是感谢 @方可乐 交流后的灵感，类似这种工具站交给 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` 续写。
> - 未收到新指令前，请勿额外解释或提问。