智能创作

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

2024 年 9 月 1 日

▍前言

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 设计、测试上线、运营推广，以及跟进市场和用户反馈，持续维护产品，不断迭代优化。优秀的产品背后肯定积累不少独立开发者的心血，但总有人在独立开发路上探索前行，那必然是乐在其中。黑夜之中独自前行，定有星光相伴左右。

立即咨询 JOTO

JOTO 提供覆盖企业智能体规划与搭建、AI 平台私有化部署、RAG 知识工程、AI 安全治理、FDE 驻场共创及持续运营优化的全周期 AI 落地服务，帮助企业把验证中的 AI 能力转化为安全、可控、可持续迭代的生产力。联系 JOTO 获取 AI 落地咨询

想把这些做法用到你的业务里?

留下你的场景和痛点,我们帮你判断从哪一步开始。

联系我们

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

创作和知识拓展的好工具

警惕 AI 依赖成瘾

立即咨询 JOTO

想把这些做法用到你的业务里?

开启企业级 AI 落地

填写需求单