我要投稿

从零开始，我用 AI 做了一个图文卡片小工具……

发布日期：2024-09-01 08:56:01 浏览次数： 2216 作者：少数派

▍前言

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

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

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

通过 AI 生成的网页工具

▍一个想法的萌生

想发个清单或长文给对方，但微信只能发纯文本样式，毫无格式可言；或者要发个朋友圈、小红书，还得经过编辑、排版等复杂操作，才能生成一张好看的图。那怎样可以简单、快速地给朴实无华的文字，提供一个更美观、更直观的展示形式呢？

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

▍产品初步构思

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

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

产品原型框架

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

▍AI 开发可行性验证

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

AI 聊天生成代码

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

AI 生成的功能界面

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

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

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

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

▍界面视觉优化

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

主界面设计

卡片样式优化

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

▍视觉样式还原

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

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

AI 提供详细的代码说明

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

学习记录知识点

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

▍暗色模式与多端兼容

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

暗色模式适配

移动端兼容

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

▍工具部署上线

在上线之前，简单做了一个落地页，介绍一下工具，以及在工具内提供了 Markdown 的帮助文档，帮助用户快速上手 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 设计、测试上线、运营推广，以及跟进市场和用户反馈，持续维护产品，不断迭代优化。优秀的产品背后肯定积累不少独立开发者的心血，但总有人在独立开发路上探索前行，那必然是乐在其中。黑夜之中独自前行，定有星光相伴左右。

53AI，企业落地大模型首选服务商

产品：场景落地咨询+大模型应用平台+行业解决方案

承诺：免费场景POC验证，效果验证后签署服务协议。零风险落地应用大模型，已交付160+中大型企业