Matrix 首页推荐 

Matrix 是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。

文章代表作者个人观点,少数派仅对标题和排版略作修改。


前言

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

> 关注 少数派小红书,感受精彩数字生活 🍃

> 实用、好用的 正版软件,少数派为你呈现 🚀