妙计文卡 - 借助AI开发的图片生成工具

我的第一款借助AI开发的工具。欢迎大家体验使用！工具完全免费使用，请放心使用。→ 工具地址：妙计文卡

前言

AI的热潮正逐渐渗透到各行各业，那么普通人能够借助AI做些什么呢？作为设计师的我，在AI的助力之下，成功地把自己的想法开发落地，并且完成了产品上线。

这款工具取名【妙记文卡】，可以将普通文本快速转化为精美的卡片，以图片的形式导出。工具访问地址是：www.mijicard.com。欢迎大家体验使用和提建议。

在这个过程中，我体验了产品从构思到设计、开发、测试，再到上线的全流程，同时也领略到了独立开发者的乐趣以及所面临的挑战。在这里，我将分享一下工具开发的经历和个人心得。

一个想法的萌生

想发个清单或长文给对方，但微信只能发纯文本样式，毫无格式可言。那要怎么给朴实无华的文字，提供一个更美观、更直观的展示形式呢？

市面上其实已经存在很多图文编辑软件，并且会提供各种各样的模板，但使用流程比较复杂，同时内容会很大程度上受到模板限制。那么，是否存在一种即开即用、用完即走的工具，能够轻松地将文字快速转化为精美的卡片呢？因此就萌生了制作一个文本生成卡片工具的想法。

产品初步构思

基于这个想法，初步规划了一下产品的基础功能。基础的功能包含：文本输入、卡片预览和图片导出。另外，也想到了一些更高级一点的功能，比如卡片样式自定义、替换字体、提供多种模板等；

大致构思过产品的基础形态之后，我用Figma工具画了一个产品原型，初期着重功能，追求效率，画得比较粗糙。

整个产品界面比较简单。分为左中右三栏，左侧是输入区、中间是预览区、右侧是设置区。

AI开发可行性验证

想法有了，产品雏形也有了，开发落地才是关键的环节，能否让AI帮我实现呢？我尝试了ChatGPT-4o，主要是可以上传图片，我可以把产品原型图上传上去让AI识别。为了让AI更准确识别到我的构想，我另外用文本做了更细致的说明，介绍了这个工具的核心功能和页面模块分区。

AI生成的结果让我大吃一惊（其实是两惊）。一是，生成的代码经过测试过（复制粘贴），居然真的能把功能实现了。二是，生成的界面效果，和上传的提示图差得可太多了，看起来有没有传图，对于结果并没有太大影响。不过，界面样式这个问题还好处理，后面可以通过CSS自定义下视觉样式。主要是工具的核心功能可以通过AI帮我实现，整体来看，借助AI开发这个工具，是完全可行的。

AI生成代码的沟通过程，可以分为2个阶段，分别是整体架构搭建阶段和局部功能实现阶段：

第一阶段，整体架构搭建。经过实践，我发现AI（ChatGPT）是很难一下子帮你实现很多、很复杂的功能，如果提示词中描述的细节过多，生成的代码可能会被忽略掉，或者因为这些细节，导致核心功能出问题。因此，第一阶段要先把核心功能、主体框架描述清楚，让AI实现。

第二阶段，局部功能实现；比如预览卡片超出屏幕时存在无法滚动的问题，希望实现预览卡文字能够根据背景色深浅自动切换黑白色，通过滑块方式调整卡片的参数等等，这些可以在保证核心基础功能实现之后，再针对性地向AI提问，获取解决方案。这里需要注意是的，由于AI的连续性受到限制，针对局部调整时，需要注意提问的完整性。

经过了多轮的沟通，实现的功能，已经逐步接近我的预期。虽然中途表达不到位，以及AI理解有偏差，沟通过程比较冗长，但最终还是能够组合成一个完整的功能。对于我来说，借助AI开发工具，现阶段是完全可用的了，毕竟没有AI，我肯定做不出来，这点无可否认。

界面视觉优化

功能雏形已经实现，说明这个项目基本是可落地的。到这个阶段，可以正式地对界面进行优化设计了。经过多轮脑暴尝试，刷掉很多飞机稿后，完成了工具v1.0版本的设计。

当然，在考虑视觉的合理性的同时，其实也要考虑下实现的可行性和简易性。在开发层面，个人能力有限，基本上只能改写一下HTML内容和CSS样式，在保证能借助AI落地的情况下，尽量把视觉美化一下，其实优化空间还很大。

视觉样式还原

工具的页面框架实现靠AI，具体的UI样式自定义，也主要是靠AI。视觉还原主要包括页面整体视觉的优化，以及控件默认样式的改写，比如输入框、选择器、滑块输入等；

实际上，AI还可以根据我自然语言描述的效果，提供可直接使用的代码，在记不起属性名和属性值的时候，帮助可太大了。遇到难以理解的代码，还可以直接丢给AI解释一下，返回的就是带了备注解释的代码。

这种学习过程，太畅快了，不用费时费力找人问，等待答复。边学边记录，需要什么学什么，边学边改，学以致用，有明确的学习目标，有具体的成品展示，学习效率是比较高的。

视觉还原整体上只能还原不到90%，部分默认控件样式的调整达不到预期，比如滑块输入，设计上滑块左侧还有一个黑色的进度条。想通过CSS+JS来实现，但最终效果还是差一些。

暗色模式与多端兼容

在桌面网页端功能完整之后，工具已经是可用的状态，考虑多场景使用，优化一下产品体验。补充了暗色模式和多端的兼容。

其实通过跟AI学习之后，我发现暗色适配其实比我预想的要简单一些。暗色模式可以通过Javascrict中的事件识别系统模式，针对暗色模式给对应的元素增加一个class，再单独给class定义样式即可。移动端的适配，通过媒体查询即可单独定义移动端的样式。其实，更好的方式是一开始就考虑暗色模式适配以及多端兼容，这样可以通过给颜色定义变量来规范颜色的映射，移动端和桌面端整体考虑，延续性会更高一些。

工具部署上线

在上线之前，新增了落地页，简要介绍一下工具，以及在工具内提供了Markdown的帮助文档。

域名（mijicard.com）采用的是妙记文卡的谐音，妙记即miji，文卡则用卡片card来代替，比较形象。网站使用的是vercel托管，绑定域名后，可以在国内直接访问。

项目的简单总结

这个项目的挑战其实超出了我的预期，工作量大且难度高，同时还需要掌握多个领域的知识来完成各个流程节点，短期内逼迫自己学习了很多知识。

一步到位、做大做全，并不是最好的策略，反而很难做好。最好的方式是，专注于打造一个最小可行产品（MVP），并持续进行迭代和优化，不断完善产品功能和体验细节。

目前妙记文卡的第一个版本功能相对简单，还原度不够高，用户体验也有待改善。非常欢迎体验并提出自己的想法和建议，我将认真考虑并努力优化产品。

我觉得，把自己的想法做成产品，与他人分享，是一件很酷的事情。但作为设计师，我深知个人开发能力十分有限，如果碰巧你是同频的开发者，有意一起和我一起创造好玩的产品，欢迎与我联系。

对 AI 的感想

创作和知识拓展的好工具

AI是一个很好的学习助手，有问必答，虽然做不到无所不知，但AI蕴含的知识广度远比个人要大得多，而且可以全天候陪伴，随时解答问题。AI 对于普通人的意义，我想到了三个方向，分别是优化，创作，拓展。文案润色、图片高清修复等属于优化；撰写故事、图片生成、视频生成等属于创作；那么跟AI提问学习、了解跨领域的知识，则是拓展。在本项目中，基于AI创作了这个工具，个人也拓展了更多前端开发的知识。我觉得，AI值得每个人体验和善用。

警惕AI依赖成瘾

尝试过AI之后，你可能第一时间经常想到了AI，因为更高效，省脑力。但是，AI 也会出错，并且不会很好识别出错误，AI 也会有解答不了的时候，比如金融、医疗等专业领域，比如“心情不好怎么办”这种特定场景下的问题。

离开 AI 后就是无法解决问题，这是要警惕的。对AI生成内容的正确性和合理性的辨别，以及能够在项目中合理运用，则是我们更高的要求。

最后

以上是我使用AI创作网页工具的过程，以及个人总结和思考。这次的工具开发，让我实践了一次从想法到产品落地的全过程，以及体验到其中的乐趣。同时，这是通过AI写代码开发产品的一次尝试，AI的强大超出想象，发挥的作用远不止于此。未来，AI必定是大趋势。

在这里也致敬一下独立开发者（个人还不算是）。作为独立开发者，需要面对的不止是产品开发环节，还有市场分析、产品构思、交互 UI 设计、测试上线、运营推广，以及跟进市场和用户反馈，持续维护产品，不断迭代优化。优秀的产品背后肯定积累不少独立开发者的心血，但总有人在独立开发路上探索前行，那必然是乐在其中。黑夜之中独自前行，定有星光相伴左右。

‍

欢迎大家体验使用、反馈问题。→ 工具地址：妙计文卡