Claude Code vs. itself: installing one skill turns a plain slice tool into a pro workbench

大家好，我是孟健。很多想靠 AI 编程做工具出海或做内容运营的朋友，自己手写前端耗时耗力，用 AI 随手敲出来的页面又往往排版丑陋、交互混乱。

今天用 5 段提示词，零手动写代码，带你用 Claude Code 做一个具备专业质感、支持原图网格与像素标注的在线切图工具，并附带零成本上线方案。

1. 创建干净的工作目录

打开 Windows Terminal，点击顶部的「+」新建一个标签页，输入下面这行命令，在桌面创建并进入 image-splitter-demo 文件夹：

mkdir -Force "$HOME\Desktop\image-splitter-demo"; cd "$HOME\Desktop\image-splitter-demo"

2. 启动 Claude Code

在终端中输入命令启动 Claude Code：

claude

首次在该目录下运行时，终端会弹出安全检查提示，键盘移动选择「Yes, I trust this folder」并按回车确认，就会进入干净的初始欢迎界面。

3. 安装官方开源前端设计技能

想要让 AI 写出来的网页摆脱默认的简陋质感，第一步要给它配上专门的设计能力。在 Claude Code 底部输入框中粘贴第 1 段提示词：

请先帮我看一下你现在已经装了哪些跟网页设计、UI 美化有关的技能（Skill）？列出来给我看。如果一个都没有，请推荐一个口碑好的开源前端设计技能并帮我装上，做完告诉我结果。

在 Claude Code 底部输入框中粘贴该提示词并回车发送。等待约 1 分钟，Claude Code 会检索当前环境，并自动安装启用官方开源前端设计技能 frontend-design。

4. 裸写第一版：纯本地切图工具

为了看清设计技能到底起多大作用，我们先不调用它，让 Claude Code 直接裸写一个基础功能版，存为 index-v1.html。在输入框中粘贴第 2 段提示词：

我现在要做一款运营发图文日常真要用的「在线图片切图工具」（比如发朋友圈、小红书、微博前把一张大图切成九宫格或长图切片）。
先不要用任何设计技能，直接帮我做第一版，存成当前文件夹下的 index-v1.html。
硬要求：
1. 给做自媒体和内容运营的人在电脑浏览器上全屏用的，打开这一个网页文件就能直接用，所有处理都在浏览器本地完成，不要传到任何外部网站。
2. 必须有的功能：拖拽或点击上传一张图片、一键选「九宫格（3×3）」「四宫格（2×2）」「竖长图三连切（3×1）」三种常用切法、在网页上直接预览切开后的每一小块（带序号 1-9）、每一小块可以单独点下载，也可以点「一键打包下载全部（ZIP）」。
3. 不要任何和切图无关的配图、装饰画、假的用户评价、编出来的统计数字或凑篇幅的介绍文字，打开第一屏直接就是清爽的工具操作区。
做完后把 index-v1.html 的完整文件路径、这次花了多少时间、消耗了多少额度告诉我。

Claude Code 开始全速写代码，它还自己调用了 Playwright 进行浏览器测试。从开始写文件到测试完成，耗时大约 3.5 分钟。

5. 上手第一版：功能通了，但视觉很朴素

我们在 Chrome 浏览器中打开生成好的 index-v1.html。首屏中央是一个虚线拖拽上传区，点击左侧的「选择图片」按钮或点击拖拽区打开文件选择窗口。

双击选中一张本地测试图片载入，右侧立刻切出了九宫格切片预览。

但我仔细看了一下，这一版虽然功能是通的：能把图从中间截成 1346 × 1346 正方形再切成 9 张约 449 × 449 像素的 PNG，但整体视觉确实太朴素扁平。左侧控制栏拥挤，切片右下角直接盖着「下载」按钮遮挡视线，而且原图上没有任何网格线，根本不知道是从哪里下刀的。

6. 调用前端设计技能重构第二版

回到终端，我们要求它点名启用刚才安装的 frontend-design 技能，重新打造一个专业桌面级质感的工作台，保存为 index-v2.html。粘贴第 3 段提示词：

刚才第一版功能有了，但界面太像简陋的默认网页。现在请点名用上你刚才列出（或刚装好）的那个网页设计类 Skill，重新设计并做一版专业软件质感的在线切图工具，存成另一个文件 index-v2.html（不要覆盖 index-v1.html，我要对比前后差别）。
功能硬要求和刚才一样（电脑浏览器全屏用、拖拽上传、九宫格/四宫格/长图三连切、带序号预览、单张下载和一键打包下载 ZIP、不要任何无关装饰和编造内容），但界面布局、配色、拖拽框、按钮交互和切图预览区都要按设计技能的高标准重做。
做完后把 index-v2.html 的完整文件路径、耗时和消耗告诉我。

Claude Code 深度思考并调用设计技能重构，期间还用 Playwright 进行了多轮视觉复查与微调，这一轮耗时大约 5.5 分钟。

在浏览器中打开 index-v2.html，视觉质感完全变了样：整体升级为专业暗灰底色，顶部整合了切法切换与快捷键提示，中间是带印刷裁切标记的工作台，右侧则是独立的文件导出面板。

点击中央的「选择图片」导入同一张测试图，中央规整排列着九宫格切片，右侧清晰列出每张切片的文件名、体积与单独下载按钮，底部展示着原图信息与「一键打包下载全部 (ZIP)」。

7. 挑刺与精细化优化：加上网格、像素标注和自定义行列

虽然 v2 版质感已经很专业，但作为日常真要用的工具，我试用后挑出了三个不顺手的地方：

1. 原图没有切线，心里没底；
2. 切出来的小图只标了序号，不知道每张的具体像素尺寸；
3. 固定的九宫格不够灵活，自媒体发长图或特殊排版需要自定义行列。

回到终端，把这三个改动交给 Claude Code。粘贴第 4 段提示词：

我刚才在浏览器里试用了 index-v2.html，挑出三个实际用起来不顺手的地方，请你帮我改一轮：
1. 上传原图后，原图上没有画出将要从哪里下刀的分割线，心里没底——请在原图预览上叠加清晰的半透明切图网格线。
2. 切出来的小图预览下面只写了序号，不知道切完每张是多少像素——请在每张小图下面标出它的实际宽高像素（比如 360 × 360 px）。
3. 除了固定的九宫格和四宫格，再加一个「自定义几行几列」的数字输入框（1 到 6 行、1 到 6 列），改数字时网格线和右边切出来的小图实时跟着变。
直接在 index-v2.html 上改好，做完告诉我改了哪里、完整文件路径、耗时和消耗。

Claude Code 自动重构为左右分栏布局，并用 Playwright 跑完了边界测试，耗时大约 4 分 50 秒。

刷新 index-v2.html，顶部工具栏里已经新增了「自定义」行列输入框与调整按钮。点击中央的「选择图片」重新导入测试图。

看优化后的细节：左侧 2511×1346 px 的原图上，清晰标出了暗色裁切区域，并叠加了半透明白色分割网格；中间每张切片下方都精确标注了像素大小，九宫格下每张标注为 448 × 448 px。

这时点击顶部的「-」按钮，把行数从 3 改为 2。

整个界面瞬间联动：左侧切线网格和右侧切片实时刷新为 2 行 3 列共 6 张，每张小图下方的标注实时跳成了 673 × 673 px。

点击右下角的「一键打包下载全部 (ZIP)」，页面底部弹出「已打包下载 6 张」提示，浏览器右上角成功保存好打包的压缩文件。

8. 获取零成本部署方案与说明文档

工具做好了，如果想让别人点开网址就能直接用，最省事的办法是什么？回到终端输入第 5 段提示词：

工具已经做好了，如果我想像油管上那些 AI 做软件的博主一样，把这个 index-v2.html 免费放到网上，生成一个别人点开网址就能直接用的在线工具，最省事、不用买服务器的方法是什么？请用大白话把每一步点哪里告诉我，并顺手在当前文件夹生成一份简单的说明文件 README.md。

耗时 1 分 05 秒，Claude Code 输出了完整的零成本托管方案，并在当前目录下生成好了 README.md。

方案里给出了免费托管部署的具体步骤：因为做的是纯浏览器本地计算的单文件 HTML，不需要买服务器，也不需要配置数据库，只要注册账号后把包含文件的文件夹拖拽上传，或者推送到公开仓库开启网页分支，就能拿到一个免费公开的访问网址。

不过需要说明的是：这次实测我只是让 Claude Code 验证了从代码生成到本地打包的全过程，并输出了完整的部署步骤文档，并没有真把它发布到外网上。如果你需要对外分享，直接按它给出的步骤把 index-v2.html 拖进托管后台即可。

---

最后说说我的判断：

从第 1 段装技能到第 4 轮优化完成，4 次核心生成与重构合计耗时大约 14.5 分钟。

如果你电脑上没法配置终端与 Claude Code 环境，或者要做的是依赖复杂后端数据库的系统，那这套单文件工作流并不适合；

但如果你想极低成本、在十来分钟内做出一款视觉专业、开箱即用且零服务器维护成本的出海轻量工具，配合一个靠谱的前端设计技能，Claude Code 完全能够替你干完一个初级前端团队的活。你可以直接从上面的第 1 步开始，用那 5 段提示词亲手跑一次。

---

👋 我是孟健，前腾讯 T11、前字节技术 Leader，现在全职做 AI 编程。

🔥 更多 AI 编程实战：

• GitHub：@mengjian-github
• 专栏：AI编程实战
• 这期的完整清单：评论区回复「切图工具」，我把领取方式发你

觉得有用？点赞+收藏 就是最大支持 🙏

本文由作者借助 AI 辅助整理，内容经作者实测与审校。