ARTICLE · 1315129
一行代码没敲,我给自己写了个插件
先说结论
我不是程序员。我的主业是室内设计，做餐饮、办公、商铺这类中小型工装项目。
前两天，我让 AI 帮我批量出几张效果图。它埋头跑了十几分钟，最后甩给我一串路径：a.png、b.png、c.png……
我一看，第 3 张风格就跑偏了。30 张，全废。
问题不在于 AI 做不好，在于我只能等它做完才知道做错了。
于是我想：能不能让它干活的时候，我就在旁边看着？做对了继续，做歪了立刻喊停。
后来我确实做出来了——一行代码没敲，全程用中文跟 AI 对话。
顺便，那套"怎么从零做出一个插件"的经验，我也整理成了一个技能包，放在文末。
一、那个让人难受的地方
先看这张图：
左边是原来的状态。AI 开始干活，界面就变成一个转圈圈的进度条，你不知道它在干什么、干得怎么样。等它说"完成"，你去看结果——好就收，不好就整个推倒重来。
右边是我想要的样子。它每生成一张图，右边栏里立刻出现一张缩略图。你能边看边判断，不对就当场打断。
核心差别只有一个：能不能在过程中看见。
这件事听起来小，但做设计的人应该都有体感——效果图这种活儿，方向错了的话，后面所有工作都是白费。
二、我是怎么做的
整个开发过程，我后来复盘了一下，其实就五个阶段：
第一个阶段：想清楚"要不要自己造"
我发现问题之后，第一反应是"能不能让 AI 自己解决"。先问了半天，确认了一件事：AI 不是做不到，是它没有"展示过程"的位置。
它能把图生成出来，能告诉你路径，但它没有一个"边跑边看"的窗口。
这时候我才决定：那我自己做一个窗口。
这里有个教训：不要一上来就动手。先搞明白"是它不会，还是它没地方展示"，这两种情况的解法完全不同。前者要写代码，后者往往改个设置就行。
第二个阶段：查清楚"它到底支持什么"
这一步是整个过程里最容易被忽略、也最省时间的。
我一开始以为自己知道要怎么写，结果凭记忆写的东西全是错的。后来 AI 帮我去翻了程序本身自带的说明书——不看网上的教程，看程序自己的源码和文档。
翻完才知道，有一堆东西是我原来根本想不到的：比如窗口可以"保活"（切走了还能记住状态）、比如打开文件有专门的地址格式、比如每个面板能拿到的信息还不一样。
这里有个教训：不要相信记忆，也不要相信网上搜的旧教程。直接读程序自己的文档，这是唯一可靠的信息源。
第三个阶段：写出来
这个阶段听起来最技术，其实最"体力活"。
一个插件基本分两半：一半负责界面（长什么样、按钮在哪），一半负责后台（去磁盘上找文件、读图片）。两半之间靠一个通道说话。
我全程没写代码。我是这么干的：描述我想要什么效果 → AI 写 → 我看 → 说哪里不对 → 它改。
一开始很慢，因为我不知道怎么描述"我要那个缩略图按时间倒序排"这种话。后来发现，用设计师的语言描述界面就行——"这里太挤了"、"这个按钮要更显眼"、"切换的时候别丢掉刚才的位置"，AI 都听得懂。
第四个阶段：改到对（最磨人的一段）
这一步我踩了很多坑，其中最大的一个特别典型：
我改完代码，刷新了页面，发现新按钮出现了，但按下去没反应。
我以为是逻辑写错了，查了半天。结果 AI 告诉我：这个插件有两半，界面那一半刷新页面就生效，后台那一半必须重启程序。
我改的是后台，但只刷新了页面。所以看到的是"旧的后台 + 新的界面"，当然不对。
这里有个教训：改了没反应，先别怀疑代码写错了。先确认"我改的那部分，到底有没有真的生效"。这一条能省掉一大半的排查时间。
后来我又陆陆续续遇到：插件整个消失了、面板一片空白、点文件显示"暂不支持"、切个标签页状态全丢了……每一个都是看起来毫无道理、其实有明确原因的问题。
第五个阶段：发出去
做出来自己用，和让别人也能用，是两件事。
这一步我卡了三回：
第一次，程序里找不到插件了（配置写错了一个字符） 第二次，别人装上了但界面是空白的（我把自己的电脑路径写死进去了） 第三次，想发布到公共的插件库，一直报错
第三个卡得最久。AI 帮我查出来，原来是两个很具体的技术原因（一个工具识别不了权限，另一个是新包要先过一遍机器审核）。这些都解决之后，终于上线了。
三、做出来的东西
这就是成品：
左边还是正常的对话，右边多了一个"产出画廊"。
它能做这几件事：
- 图生成就出现
，5 秒刷新一次，不用手动点 - 点一下就能看大图
，能放大、能拖动 - 文档、代码、表格也能预览
，用的是程序自己的预览器 - 能只显示"这次对话的产出"
，多任务混在一起时很有用 - 图上右键
可以隐藏、删除、打开所在文件夹
有个细节我特意做了：能不用鼠标操作。因为我是远程控制这台机器的，没有实体鼠标，所以放大看图的时候，右边有一排上下按钮，键盘也能操作。
四、这套经验，我整理成了技能包
做完之后我回头一看，整个过程里踩的坑，比写的功能还多。
而且我意识到，下一次如果再做别的插件，这些坑我还得再踩一遍——除非我把它记下来。
所以我把整个过程整理成了一个技能包：
它不是一篇教程，更像一份检查清单。具体装了这些：
十步流程
从"要不要自己写"开始，到最后"怎么发布让别人搜到"，每一步该做什么、卡住了往哪查。
二十一条排查表
这部分是核心。它长这样：
照着查就行，不用重新推理。
十二个真实踩过的坑
每一个都让我白费过一轮时间，都写清了"为什么会这样"和"怎么避开"。
一个打包小工具
一条命令，打包、生成安装包、校验三个位置的文件是否一致。
五、说几句实在话
第一，"零基础"不等于"零门槛"。
我确实一行代码没敲，但我花了不少时间在"想清楚我要什么"。这件事 AI 替不了——它能把想法变成代码，但想法得你自己有。
我作为设计师，最大的优势其实是知道什么界面难用、什么交互别扭。这些判断，比会写代码重要。
第二，AI 不是万能的，但它特别擅长查证。
我凭记忆写错的地方，它能去翻程序源码确认。我搞不明白的报错，它能读出原文精确指出是哪一行。
它不擅长的是"猜你想要什么"，所以描述得越具体越好。
第三，踩坑这件事，能省则省。
这套技能包最大的价值，不是教会别人怎么开发，而是让下一个做同样事情的人，少走我走过的弯路。
最后：想用的话，怎么装
插件已经发布。下面写清楚一步一步怎么装，照着做就行。
方法一：一句话让 AI 帮你装（最省事）
如果你已经在用 DeepSeek Harness，直接把这句复制粘贴到对话框里，回车发送：
AI 会自己去装，装完让你重启。不用你动任何设置。
装完后一定要重启程序（关掉重开），不是刷新页面。这一点挺关键，我第一次就栽在这，改了代码刷了半天页面没反应。
方法二：在插件页里手动装
如果你想自己点：
打开程序，左侧栏找到 「插件」 点右上角的 「添加插件」 选 「安装第三方插件」 在弹出的输入框里，粘贴这个名字：
点确认，等它装完 - 重启程序
装好之后，界面右侧会多出一个叫「产出画廊」的标签页。
方法三：从源码装（前两种都不行再试）
源码地址：
第 4 步的输入框里，也可以直接粘贴这个网址，效果一样。
装不上怎么办
dsh-gallery | |
| 十有八九是没重启 | |
关于最后一条：插件默认会去找常见的产出目录，但如果你的文件夹位置比较特别，它可能找不到。这时候去设置里手动指一下就行——可以加多个目录。
源码和下载
- 插件主页
：GitHub 搜 Hope2023Dcr/dsh-gallery - 下载安装包
：那个主页的 Releases 里有现成的压缩包 - 命令行装
： npm i dsh-gallery
如果你对那个技能包感兴趣，或者也想给自己造点小工具，欢迎后台留言。
下一个想法，也许就从一个"这地方真别扭"的瞬间开始。
本文由我和 AI 协作完成。插件的每一行代码由 AI 编写，需求、判断和验收由我负责。
