边画边体验：用SVG-Edit绘制应用图标

在互联网的上古时代，是没有SVG这种格式的（虽然2001年就存在了，但2008年才进入W3C标准）。在它之前想在网络上用矢量图，只能依靠Flash这种独行特立的东西。 所以你可能无法理解一个老UI设计师对于SVG这种格式有多么喜爱，用精简优雅的贝塞尔曲线就能完成图形设计，还不存在像素放大后模糊的情况，对于图标绘制实在是太完美了。 然而不知道是技术开发的难度还是交互体难的难度，或者是市场原因，除了Adobe\Corel\Serif这些专业公司的很大部头桌面设计软件，你很难在移动端（尤其安卓端）找到一个得心应手好用的矢量编辑软件。 感谢懒猫之神的跨终端技能，让一些本来只有桌面或网页端才能使用的工具变成应用。 下面的内容我将使用SVG-Edit这个软件绘制一个应用图标。 https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.svgedit 它有一个早古的和有点另类的界面风格，但该有的功能基本都有了，虽然有的地方略显简陋，有些功能需要熟悉一下才能适应，但在应急的情况下还是完全可以用的，而且各种机制非常适应SVG的格式。  首先让我们调整一下画布的尺寸，由于是矢量格式，所以小一点完全没关系，我设置了480x480，一个正方形的画布就有了。 ||| |---|---| 让我们从经典的矩形开始，绘制好后可以在上面工具条中设置具体的宽高，然后用对齐工具将它放在画面的中心。下方的调色板可以为选中的形状设置颜色。 | |---|---| 工具条最后一个工具是圆角，设置成30，然后按住Alt键拖动，就创建了一个副本，（或在顶部工具条选印章图标生成副本） | |---|---| 将副本缩小后变成白色，放在黑色中央，通常内部形状的圆角要小一些，设置为15。  用钢笔工具开始绘制特殊的形状的顶点，贝塞尔曲线的工具通常体验都很一致，点击即是“尖角”顶点，拖动则会产生“手柄”以控制曲线的曲度。让我们画一个猫耳的形状。 | |---|---| 形状如果不太合意，随时可以双击图形，让它进入编辑模式，然后拖动顶点的位置或手柄，以达到你想要的形状。 | |---|---| 同时选中外框和耳朵，用对齐工具使它们左对齐。 然后绘制另一只耳朵，这个应用唯一缺憾的内容是没有镜象，不过不必太在意是否完全一致，因为图标在缩小后没人会注意到这一点细节。而且不对称有时也是一种美。 | |---|---| 画一个水平式的眼睛，双击进入节点编辑模式，你会发现每选中一个点，它“之前”的线端也会被选中。这应该是SVG格式的特点，所以说应用的开发者还是对格式比较在意的。 | |---|---| 点击添加节点，两个线端的中间就会出现两个新的顶点，将这两个点一起上移，就会发现它变成了^_^ 微笑眼。 | |---|---| 不过我自我否决了这个形状，还是用眯眯眼代替。同时选定两个文件后，可以一起缩放它们的高度，让眼睛更细一些。 | |---|---| 复制一下卡片主体，成组，旋转。双击后可以进入组的编辑状态，让我们将后面的卡做一点微调。 | |---|---| 加一个圆形的鼻子， | |---|---| 一只淡定的狐狸就画好了……  ## 等等？我不是想要狐狸！ 重新画两个圆，一黑一白叠成环形，选中一个节点（及线段）将它删除，另一个点双击即可变成尖顶点，一个半圆就画好了。 | |---|---| 调整一下细节，把嘴加粗，眼睛进一步变细。 | |---|---| 一只可爱的柴犬就画好了。  ## 等等？我要的也不是柴犬！ 重新调整，把白色框变矮（圆角会自动调整，这就是矢量比位图好的地方！），把眼睛变成白色……嗯？ 这次像我要的猫了，可是为什么看着有点奸诈？继续修改，先把鼻子换成猫的三角形，眼睛也换成圆形。 | |---|---| 用钢笔工具画一个潦草的尾巴形状，不用担心，矢量的特点就是你永远有机会调整形状。 | |---|---| 画面少一点颜色，所以干脆改成黑猫特有的黄色眼睛，鼻子的形状过于尖锐，打开编辑模式，选中三个顶点并把它们改成曲线，换上粉色，再细心调整位置，一只可爱的黑猫就画成了。 | |---|---| ## 这次，是我要的。 下面的工作是加入文字，这个应用的名称叫Milka。先找一个合适的字体，然后将它放大放在底端。最后再将i顶端的小点替换成一个大一些的圆点，增加设计的趣味性。 | |---|---| SVG-Edit的窗口左侧有一个图层栏，生成一个新的图层，然后选中文字，把它们加到第二层去。这样元件分类更明确，你可以只编辑你想要编辑的内容。 | |---|---| 现在复制文字元件，加上3个单位粗的圆角边框，再把无边框的文字改成白色，效果就好多了。i的顶端可以设计成猫眼的形状，但是只限独立存在的情况，加在有猫的时候就会比较怪异了，好像猫王爷有三只眼一样。 | |---|---| 把所有元素放大到画布边缘以内，这样它既可以充满空间，双可以更清晰一些。 SVG-Edit有保存为SVG或PNG为主的几种不同位图格式，让我们保存成PNG，然后备份SVG。 | |---|---| 赶紧安装到应用的测试包中，嘿，好像有点意思。  这就是一个简单图标的手工绘制过程，还有一些细节可以再调整，但不妨留到其他应用去测试。 希望你可以 ~~交~~ 学 ~~费~~ ~~废~~ 会！

Vibe打金计划(8)：24小时开发原创应用?!

### 成功了! Vibe打金计划的第一个作品终于打包1.0.0提交审核了，运气好的话应该能与本文同时上线。 由于本标题党的作风一贯实诚，这里还是要特别说明一下：说是24小时，就是真的24小时。只不过实际跨度约为不到三天，因为要除去吃饭睡觉去超市以及陪娃和摸鱼的时间，是指坐下工作的时间加起来应该大约在24个小时以内。 （以后的开发中我会试着缩短这个时间。） 当然这24小时中也还不包括预先研究的时间，《Vibe打金计划》系列大约开始于两周前，而这个项目大约也是在一周前就开始研究了。只不过如同我在之前说过，原本是打算用MySQL服务的，由于各种原因，中间除了研究MySQL又研究了minidb和file-pickers两个懒猫官方插件，所以绕了点弯路多花了些时间。 如果你对《Vibe打金计划》全系列有兴趣，补课链接在这里： * [《Vibe打金计划之序章: 系统提示词》](https://lazycat.cloud/playground/guideline/745) * [《Vibe打金计划(1)：小白学打包应用》](https://lazycat.cloud/playground/guideline/753) * [《Vibe打金计划(2)：数据库功能测试与演示》](https://lazycat.cloud/playground/guideline/758) * [《Vibe打金计划(3)：一二三，分步走》](https://lazycat.cloud/playground/guideline/806) * [《Vibe打金计划(4)：新手调试一路通》](https://lazycat.cloud/playground/guideline/814) * [《Vibe打金计划(5)：懒猫minidb插件》](https://lazycat.cloud/playground/guideline/822) * [《Vibe打金计划(6)：怎样更有效地使唤AI》](https://lazycat.cloud/playground/guideline/843) * [《Vibe打金计划(7)：lzc-file-pickers插件》](https://lazycat.cloud/playground/guideline/844) --- 正式重启这个应用的开发大约刚好是三天前的现在写攻略的这个时间。 # Milka！ 应用名称为《喵卡 Milka》，是一款记忆卡片的小应用。 稍后我会试着编辑文章并加入应用的链接，现在先讲述一下我用这24小时（工作时间）人工构思、指挥以及几乎完全依靠AI开发这个应用的完整过程。 整个过程使用Refly及Claude sonnet 4组织提示和编写代码，大约只手动修改了很少的部分（却花了不少时间）。 https://appstore.lazycat.cloud/#/shop/detail/iamxiaoe.lzcapp.refly --- # 整理需求 在[《Vibe打金计划(3)：一二三，分步走》](https://lazycat.cloud/playground/guideline/806)中，其实我已经写了关于这个应用的基本需求生成过程，当时它的代码也已经写好了大半，但由于始终觉得MySQL启动有点慢（也可能是我机器的问题），最终决定换用官方插件minidb，完全推倒重写这个应用。 最终的Refly画布大约是这个样子的，但是只有绿色的三组节点是整个开发过程，其中红色区是之前第一步MySQL版的内容，紫色区是minidb研究，蓝色区是file-pickers研究。  于是我在绿色区的开头引用了红色区的旧对话记录，以便尽可能的利用AI现有的记忆，然后导入了minidb和file-pickers导出的文档，写了如下的注释： >我准备完全重构这个项目，从零开始架构。但要去掉使用MySQL的镜象部分，改用懒猫官方提供的minidb插件，并使用lzc-file-pickers插件管理更新数据和增加数据包的操作，先不要编码，请先根据以上情况修改需求文档，需包含上述两个插件的简述，以及一个分步式开发的计划。等我确定需求文档的内容之后才会需要正式编码。 AI给我的第一个方案并不理想，包括把file-pickers的植入放在了太前会占用较多开发时间，另外开发计划是沿用（预测）了传统开发的惯例时长，分了五步计划，总共计划了最多11周的开发时间！**（但从另一个角度看，我是不是用vibe节省了近三个月的时间？）** ## 调整需求 于是我决定第一期先不用从网盘选择文件，先弃用file-pickers的植入。 >文件选择器的插入并不急切，因为保存的部分还是在数据库，导出为数据包也用传统方式下载到本地即可实现。所以从网盘中选择文件并升级数据包是后面的事情，可以放在较后执行。 另外全程将使用AI编程，所以期望可以在很快的时间内开发完成，计划中的时间天数没有什么用。 步骤尽量控制在三步左右。 从上一次开发得出经验，其实需求和开发计划还是相当重要的，尤其是在Refly中，AI可以全程（基本）遵守需求和计划进行开发。如果你有比我更多的开发规则经验，应该可以用更好的需求和计划指导AI进行更有效的开发。 所以我在这之后又调整了一些细节，包括整理及精简项目结构和修改配置文件，以求在开始时更好地限制和指导AI。 --- # 正式编码 计划基本满意之后，由于有详细文档的导入，我只需要一个简单的命令就可以让它开始开发了： >现在编写生成全部位于app下的文件的代码，基于第一期计划 所以虽然它在最初的计划中第一期的时间写了“1-3周”，但实际上AI只在一个交互回合中用了20-30秒就给我把大致的框架写出来了，包括每一个必要文件的完整代码。 总共9个文件，我没有仔细统计有多少行，总之可以看一下滚屏效果： https://lzc-playground-1301583638.cos.ap-chengdu.myqcloud.com/guidelines/319/1f5ac988-64ac-4cfb-ae4f-653624598271.mp4 -  以上代码只包含了很少的错误，其中包括AI常出现的写出来的代码有被打断导致语法错误的情况，这时只需要让它重新提供单个文件就行了。 ## 关于Service Workers 不过另外有一个问题是AI自动加入了Service Workers机制，这玩意让我有点头痛。可能是我不会用，也可能是因为SW太过强大了。它直接在浏览器中生成缓存，并用缓存去截断真实路由，所以一旦处理不好尤其是如果AI失忆或犯神经导致没有注销或更新记录，这个页面就会一直刷新不到修改的内容，在调试时非常麻烦。 在浏览器中还可以从开发者工具中绕过它，再清不干净可以新开一个窗口。可是在懒猫应用中，据我的猜测似乎每个应用对应的就只是一个窗体，缓存很可能是保存在本地系统对应这个窗体ID的记录里，也找不到地方清理这个缓存，要么就要写专门代码清空所有SW缓存（或许还清不干净），要么只能修改项目包id启动新的窗体才能刷到新的版本。 对大神们这可能很简单，但以我小白水平来说，我不想折腾那么多，而且懒猫基本上四舍五入算是本地(至少大多数情况下是本局域网)应用，对缓存没那么大要求，这个应用又没有太多的数据流，所以实在没必要搞这玩意。于是我在提示中严格强调了不允许使用SW。 --- # 第二期开发 除了上述的两个问题，我大约只和AI进行了三四轮有效问答回合（有效是指刨除我为了发现问题问的关于SW的几个支线问题），就把一个可用的Demo给架好了。 抱歉我对整个开发中间环节的界面都没有截图，但说实话界面基本70%符合我的要求，于是我打算让它进行下一步的开发。但是首先要确定，它是否还能记住开发计划： >目前一切功能正常，请先确认下一步的开发计划 ## 调整计划 & 美化界面 但是很明显AI又想太多了，我发现计划不太符合我的要求，于是临时修改计划（从后果看也许并不是个好的决定） >这个规划有点太长了，首先去掉社区功能。数据导入和导出，以及从网盘选择文件也先延后。这一步首先完善界面，让它基本可用，将创建主题和卡片的体验从系统对话框改为页面表单。优化体验让卡片有3D翻转的效果。请给我更新的计划。 又是用了几十秒增加了新的功能，第二期的“几周”时间又节省出来了。其实最基本的功能已经都运行正常了，于是我开始优化界面： >现在让我们做一些页面美化，首先目前的卡片显示还有一些问题，当卡片翻转时，反面没有显示卡片的背面，而是显示了水平镜面翻转的正面，可能是层次样式的问题，需要解决。然后，整个页面改为一体化，不分页头和主题，而是统一的一个浅灰色纯色背景。所有的字体用细体，不要用加粗。LOGO从现在的emoji改为assets/logo.png，限制大小为60x60px。不需要面包屑导航，不需要卡片左下方的编号显示。 ## 嘿，记得这个icon吗？  我在[《边画边体验：用SVG-Edit绘制应用图标》](https://lazycat.cloud/playground/guideline/818)中，也是使用了懒猫中的应用SVG-Edit用矢量绘制了它。 https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.svgedit 由于它的中间有一个代表卡片的空白空间，我直接把导航第二层页面中的返回按钮加在了上面，如果需要返回到首页，猫的“嘴”中会显示一个返回箭头的图标。  --- # 喵卡功能说明 至此，随着界面的优化，加上一些细节的调试和修改，一个应用的雏形其实已经基本搭好了。 首先，在喵卡应用中，你可以创建无限个“主题”，至于什么主题完全由你来定。  最张见的不外乎是背英语单词，但除此之外的各种语言或其他知识，比如数学公式、历史事件、科学概念……各种知识可能都需要用记忆闪卡来强化记忆。 然后每个主题中你又可以建立多张卡片。  每张卡片都有正反两面，其实是一样的数据结构，用关联表把它们互相以及和主题联系起来。正面和反面都包含主体内容和备注两个主要字段（但显示有区别）。 你可以根据需要填写卡片内容，比如英文单词就可以在主体中分别填写中英文单词，以及助记提示和详细解释；比如历史就可以正面写简单事实，背面写时间和详情。 这样你在使用的时候会先看到正面的提示信息，在心中默记之后，点击将卡片翻过来，查看和对比背面的答案内容。 它目前有列表和幻灯片两种显示模式，适合不同的学习习惯和场景。同时也有“太空白”和“星辰灰”（是的我故意的）两种风格可以切换。   这个应用对于和小朋友做学习游戏互动来说也会很有用处，就像听写一样，可以让小朋友根据正面的提示说出或写下答案，再与背面的答案对照。 甚至多人进行趣味问答，或团队性质的脑筋急转弯或百科知识抢答赛，也是很有创意的玩法。 --- 好了，以上的过程已经比较完整地展现了我在Vibe编码的过程的主要要点和心得。如果你要开发一款与这相当或比这更简洁的应用，相信可以从中参考经验，希望能找到合适的方法以更快得到结果。 但同时，以上也只是喵卡应用开发的“顺畅”部分，时间其实只用了全部24小时中的15-16个小时。在后续的攻略中我会继续展开写一些“不顺畅”的部分，包括手动调整代码以及怎样与AI分离又同步的痛苦故事，以及如何（用AI）开发主体功能以外的功能和后期调试的经验。 所以不要走开，呯！（请）呯！（看）呯！（下）呯！（集）（还有人懂这梗吗？）