前言

AI 的熱潮正逐漸滲透到各行各業(yè)，那么普通人能夠借助 AI 做些什么呢？作為設(shè)計師的我，在 AI 的助力之下，成功地把自己的想法開發(fā)落地，并且完成了產(chǎn)品上線。

這款工具取名「妙記文卡」，可以將普通文本快速轉(zhuǎn)化為精美的卡片，以圖片的形式導(dǎo)出。工具訪問地址是：www.mijicard.com 。歡迎大家體驗使用和提建議。

在這個過程中，我體驗了產(chǎn)品從構(gòu)思到設(shè)計、開發(fā)、測試，再到上線的全流程，同時也領(lǐng)略到了獨(dú)立開發(fā)者的樂趣以及所面臨的挑戰(zhàn)。在這里，我將分享一下工具開發(fā)的經(jīng)歷和個人心得。

通過 AI 生成的網(wǎng)頁工具

一、想法的萌生

想發(fā)個清單或長文給對方，但微信只能發(fā)純文本樣式，毫無格式可言；或者要發(fā)個朋友圈、小紅書，還得經(jīng)過編輯、排版等復(fù)雜操作，才能生成一張好看的圖。那怎樣可以簡單、快速地給樸實(shí)無華的文字，提供一個更美觀、更直觀的展示形式呢？

市面上其實(shí)已經(jīng)存在很多圖文編輯軟件，并且會提供各種各樣的模板，但使用流程比較復(fù)雜，同時內(nèi)容會很大程度上受到模板限制。那么，是否存在一種即開即用、用完即走的工具，能夠輕松地將文字快速轉(zhuǎn)化為精美的卡片呢？因此就萌生了制作一個文本生成卡片工具的想法。

二、產(chǎn)品初步構(gòu)思

基于這個想法，初步規(guī)劃了一下產(chǎn)品的基礎(chǔ)功能?；A(chǔ)的功能包含：文本輸入、卡片預(yù)覽和圖片導(dǎo)出。另外，也想到了一些更高級一點(diǎn)的功能，比如卡片樣式自定義、替換字體、提供多種模板等。

大致構(gòu)思過產(chǎn)品的基礎(chǔ)形態(tài)之后，我用 Figma 工具畫了一個產(chǎn)品原型，初期著重功能，追求效率，畫得比較粗糙。

產(chǎn)品原型框架

整個產(chǎn)品界面比較簡單。分為左中右三欄，左側(cè)是輸入?yún)^(qū)、中間是預(yù)覽區(qū)、右側(cè)是設(shè)置區(qū)。

三、AI 開發(fā)可行性驗證

想法有了，產(chǎn)品雛形也有了，開發(fā)落地才是關(guān)鍵的環(huán)節(jié)，能否讓 AI 幫我實(shí)現(xiàn)呢？我嘗試了 ChatGPT-4o，主要是可以上傳圖片，我可以把產(chǎn)品原型圖給 AI 識別。為了讓 AI 更準(zhǔn)確識別到我的構(gòu)想，我另外用文本做了更細(xì)致的說明，介紹了這個工具的核心功能和頁面模塊分區(qū)。

AI 聊天生成代碼

AI 生成的結(jié)果讓我大吃一驚（其實(shí)是兩驚）。一是，生成的代碼經(jīng)過測試過（復(fù)制粘貼），居然真的能把功能實(shí)現(xiàn)了。二是，生成的界面效果，和上傳的提示圖差得可太多了，看起來有沒有傳圖，對于結(jié)果并沒有太大影響。不過，界面樣式這個問題還好處理，后面可以通過 CSS 自定義下視覺樣式。主要是工具的核心功能可以通過 AI 幫我實(shí)現(xiàn)，整體來看，借助 AI 開發(fā)這個工具，是完全可行的。

AI 生成的功能界面

AI 生成代碼的溝通過程，可以分為兩個階段，分別是整體架構(gòu)搭建階段和局部功能實(shí)現(xiàn)階段：

第一階段，整體架構(gòu)搭建。經(jīng)過實(shí)踐，我發(fā)現(xiàn) AI（ChatGPT）是很難一下子幫你實(shí)現(xiàn)很多、很復(fù)雜的功能，如果提示詞中描述的細(xì)節(jié)過多，生成的代碼可能會被忽略掉，或者因為這些細(xì)節(jié)，導(dǎo)致核心功能出問題。因此，第一階段要先把核心功能、主體框架描述清楚，讓 AI 實(shí)現(xiàn)。

第二階段，局部功能實(shí)現(xiàn)。比如希望實(shí)現(xiàn)預(yù)覽卡文字能夠根據(jù)背景色深淺自動切換黑白色，通過滑塊方式調(diào)節(jié)卡片的參數(shù)等等，這些可以在保證核心基礎(chǔ)功能實(shí)現(xiàn)之后，再針對性地向 AI 提問，獲取詳細(xì)的解決方案。這里需要注意是的，由于 AI 的連續(xù)性受到限制，針對局部調(diào)整時，需要注意提問的完整性。

經(jīng)過了多輪的溝通，實(shí)現(xiàn)的功能，已經(jīng)逐步接近我的預(yù)期。雖然中途表達(dá)不到位，以及 AI 理解有偏差，溝通過程比較冗長，但最終還是能夠組合成一個完整的功能。對于我來說，借助 AI 開發(fā)工具，現(xiàn)階段是完全可用的了，畢竟沒有 AI，我肯定做不出來，這點(diǎn)無可否認(rèn)。

四、界面視覺優(yōu)化

功能雛形已經(jīng)實(shí)現(xiàn)，說明這個項目基本是可落地的。到這個階段，可以正式地對界面進(jìn)行優(yōu)化設(shè)計了。經(jīng)過多輪腦暴嘗試，刷掉很多飛機(jī)稿后，完成了工具 v1.0 版本的設(shè)計。

主界面設(shè)計

卡片樣式優(yōu)化

當(dāng)然，在考慮視覺的合理性的同時，其實(shí)也要考慮下實(shí)現(xiàn)的可行性和簡易性。在開發(fā)層面，個人能力有限，基本上只能改寫一下 HTML 內(nèi)容和 CSS 樣式，在保證能借助 AI 落地的情況下，盡量把視覺美化一下，其實(shí)優(yōu)化空間還很大。

五、視覺樣式還原

工具的頁面框架實(shí)現(xiàn)靠 AI，具體的 UI 樣式自定義，主要還是靠 AI。視覺還原主要包括頁面整體視覺的優(yōu)化，以及控件默認(rèn)樣式的改寫，比如輸入框、選擇器、滑塊輸入等；

實(shí)際上，AI 還可以根據(jù)我自然語言描述的效果，提供可直接使用的代碼，在記不起屬性名和屬性值的時候，幫助可太大了。遇到難以理解的代碼，還可以直接丟給 AI 解釋一下，返回的就是帶了備注解釋的代碼。

AI 提供詳細(xì)的代碼說明

這種學(xué)習(xí)過程，太暢快了，不用費(fèi)時費(fèi)力找人問，等待答復(fù)。邊學(xué)邊記錄，需要什么學(xué)什么，邊學(xué)邊改，學(xué)以致用，有明確的學(xué)習(xí)目標(biāo)，有具體的成品展示，學(xué)習(xí)效率是比較高的。

學(xué)習(xí)記錄知識點(diǎn)

視覺還原整體上只能還原不到 90%，部分默認(rèn)控件樣式的調(diào)整達(dá)不到預(yù)期，比如滑塊輸入，設(shè)計上滑塊左側(cè)還有一個黑色的進(jìn)度條。想通過 CSS+JS 來實(shí)現(xiàn)，但最終效果還是差一些。

六、暗色模式與多端兼容

在桌面網(wǎng)頁端功能完整之后，工具已經(jīng)是可用的狀態(tài)，考慮多場景使用，優(yōu)化一下產(chǎn)品體驗。補(bǔ)充了暗色模式和多端的兼容。

暗色模式適配

移動端兼容

其實(shí)通過跟 AI 學(xué)習(xí)之后，我發(fā)現(xiàn)暗色適配其實(shí)比自己預(yù)想的要簡單一些。暗色模式可以通過 Javascript 中的事件識別系統(tǒng)模式，針對暗色模式給對應(yīng)的元素增加一個 class，再單獨(dú)給 class 定義樣式即可。移動端的適配，通過媒體查詢即可單獨(dú)定義移動端的樣式。其實(shí)，更好的方式是一開始就考慮暗色模式適配以及多端兼容，這樣可以通過給顏色定義變量來規(guī)范顏色的映射，移動端和桌面端整體考慮，延續(xù)性會更高一些。

七、工具部署上線

在上線之前，簡單做了一個落地頁，介紹一下工具，以及在工具內(nèi)提供了 Markdown 的幫助文檔，幫助用戶快速上手 Markdown 語法。

域名（mijicard.com）采用的是妙記文卡的諧音，妙記即 miji，文卡則用卡片 card 來代替，比較形象。網(wǎng)站使用的是 vercel 托管，綁定域名后，可以在國內(nèi)直接訪問。

網(wǎng)頁工具部署

八、項目的簡單總結(jié)

這個項目的挑戰(zhàn)其實(shí)超出了我的預(yù)期，工作量大且難度高，同時還需要掌握多個領(lǐng)域的知識來完成各個流程節(jié)點(diǎn)，短期內(nèi)逼迫自己學(xué)習(xí)了很多知識。

一步到位、做大做全，并不是最好的策略，反而很難做好。最好的方式是，專注于打造一個最小可行產(chǎn)品（MVP），并持續(xù)進(jìn)行迭代和優(yōu)化，不斷完善產(chǎn)品功能和體驗細(xì)節(jié)。

目前妙記文卡的第一個版本功能相對簡單，還原度不夠高，用戶體驗也有待改善。非常歡迎體驗并提出自己的想法和建議，我將認(rèn)真考慮并努力優(yōu)化產(chǎn)品。

我覺得，把自己的想法做成產(chǎn)品，與他人分享，是一件很酷的事情。但作為設(shè)計師，我深知個人開發(fā)能力十分有限，如果碰巧你是同頻的開發(fā)者，有意一起和我一起創(chuàng)造好玩的產(chǎn)品，歡迎與我聯(lián)系。

九、對 AI 的感想

1. 創(chuàng)作和知識拓展的好工具

AI 是一個很好的學(xué)習(xí)助手，有問必答，雖然做不到無所不知，但 AI 蘊(yùn)含的知識廣度遠(yuǎn)比個人要大得多，而且可以全天候陪伴，隨時解答問題。AI 對于普通人的意義，我想到了三個方向，分別是優(yōu)化，創(chuàng)作，拓展。文案潤色、圖片高清修復(fù)等屬于優(yōu)化；撰寫故事、圖片生成、視頻生成等屬于創(chuàng)作；那么跟 AI 提問學(xué)習(xí)、了解跨領(lǐng)域的知識，則是拓展。在本項目中，基于 AI 創(chuàng)作了這個工具，個人也拓展了更多前端開發(fā)的知識。我覺得，AI 值得每個人體驗和善用。

2. 警惕 AI 依賴成癮

嘗試過 AI 之后，你可能第一時間經(jīng)常想到了 AI，因為更高效，省腦力。但是，AI 也會出錯，并且不會很好識別出錯誤，AI 也會有解答不了的時候，比如金融、醫(yī)療等專業(yè)領(lǐng)域，還有「心情不好怎么辦」這種特定場景下的問題。

離開 AI 后就無法解決問題，這是要警惕的。對 AI 生成內(nèi)容的正確性和合理性的辨別，以及能夠在項目中合理運(yùn)用，則是我們更高的要求。

最后

以上是我使用 AI 創(chuàng)作網(wǎng)頁工具的過程，以及個人總結(jié)和思考。這次的工具開發(fā)，讓我實(shí)踐了一次從想法到產(chǎn)品落地的全過程，以及體驗到其中的樂趣。同時，這是通過 AI 寫代碼開發(fā)產(chǎn)品的一次嘗試，AI 的強(qiáng)大超出想象，發(fā)揮的作用遠(yuǎn)不止于此。未來，AI 必定是大趨勢。

在這里也致敬一下獨(dú)立開發(fā)者（個人還不算是）。作為獨(dú)立開發(fā)者，需要面對的不止是產(chǎn)品開發(fā)環(huán)節(jié)，還有市場分析、產(chǎn)品構(gòu)思、交互 UI 設(shè)計、測試上線、運(yùn)營推廣，以及跟進(jìn)市場和用戶反饋，持續(xù)維護(hù)產(chǎn)品，不斷迭代優(yōu)化。優(yōu)秀的產(chǎn)品背后肯定積累不少獨(dú)立開發(fā)者的心血，但總有人在獨(dú)立開發(fā)路上探索前行，那必然是樂在其中。黑夜之中獨(dú)自前行，定有星光相伴左右。