#AI 编程# 用 Claude Code 做轻量工具出海，最怕页面简陋。这里拆解一套实测完成的 Claude Code 提示词流，零手动写代码做出支持原图网格与像素标注的纯本地切图工具：

1. 装技能：发“请先帮我看一下你现在已经装了哪些跟网页设计、UI 美化有关的技能（Skill）？列出来给我看。如果一个都没有，请推荐一个口碑好的开源前端设计技能并帮我装上，做完告诉我结果。”它会自动启用官方开源的 frontend-design。
2. 裸写原型：要求不做任何美化，纯本地计算直接写出 index-v1.html，包含拖拽上传、常用九宫格/四宫格切图与 ZIP 打包。
3. 调用技能重构：发提示词点名使用该 Skill 重做为 index-v2.html，界面立刻具备专业桌面质感。

4. 精细调优：输入第 4 段提示词“上传原图后没有画出下刀分割线，请在原图预览上叠加半透明切图网格线；小图预览标出实际宽高像素；再加一个 1 到 6 行列自定义数字输入框，改动时实时联动”。实测切成 2 行 3 列时，切片瞬间联动刷新为 6 张 673 × 673 px，并支持一键打包 ZIP 下载。

5. 索取上线指南：输入第 5 段提示词“如果我想把这个 index-v2.html 免费放到网上，最省事、不用买服务器的办法是什么？用大白话把每一步点哪里告诉我，并顺手生成一份 README.md”。纯本地计算的单文件 HTML 无需服务器与数据库，按其文档将文件拖进免费托管后台即可直接上线。

#AI 编程# 用AI折腾了两个小程序总算都开通流量主、见到点收益了，算是个小里程碑。
明天周五，评论区抽一位朋友请喝瑞幸。想了解小程序开发、或者自己也想入局的，随时私信聊，踩过的坑都能唠。
下面两个小程序有空可以点开逛逛，体验和功能上有什么建议，欢迎直接提，感谢各位。