前言

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 的感想

1. 創作和知識拓展的好工具

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

2. 警惕 AI 依賴成癮

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

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

最后

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

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