網站出海每日分享：怎麼提升AI審美 - Stitch
整理版優先睇
用 Google Stitch 快速生成靚 UI，提升 AI 審美
呢篇文章係由網站出海嘅赫茲寫嘅。佢之前分享過一個審美工具，但發現自己品味唔夠，有啲翻車。啱啱 Google 推出新版 Stitch，所以佢就試用呢個工具，睇下能否整出靚嘅 UI。作者嘅問題係：點樣善用 AI 工具提升設計審美，尤其是對冇設計底子嘅人。
文章詳細介紹咗 Stitch 嘅用法：輸入提示詞生成 Landing Page，可以揀主題配色、切換 Web 同 Mobile 版本。生成後可以修改配色、字體、圓角等，仲可以切換 Dark/Light 模式。調整完可以按「生成至最新設計系統」應用新設計。另外，仲可以編輯特定元素，預覽實際操作效果，最後導出 HTML、圖片同設計規範。作者仲提到可以將 HTML 交畀本地 AI 跟住實現，甚至上傳截圖或網站網址直接優化。
整體結論係：Stitch 係一個易上手嘅 UI 生成工具，就算審美一般嘅人都可以透過調整設計系統快速得到好睇嘅介面。對於網站出海嘅開發者或者獨立開發者嚟講，呢個工具可以慳好多設計時間，尤其係做 Landing Page 嘅時候。作者提醒，重點係識得利用工具嘅功能組合，而唔係單靠一次生成。
- Stitch 係 Google 推出嘅 AI UI 生成工具，可以快速生成網頁同手機端嘅 Landing Page。
- 使用流程簡單：輸入提示詞、揀主題色、生成，之後可以調整設計系統（主色、字體、圓角等）。
- 支援 Dark/Light 模式切換，同埋針對單一元素進行修改，靈活性高。
- 導出選項多，可下載 HTML、PNG、設計規範，方便後續開發。
- 作者指出，將工具生成嘅 HTML 交畀本地 AI 跟住實現，可以進一步加快開發效率。
Google Stitch
AI UI 生成工具，可生成 Landing Page 並自訂設計系統
試用背景：從審美翻車到 Google Stitch
作者赫茲之前分享咗一個審美工具，但發現自己品味唔夠，有啲翻車。啱啱 Google 推出新版 Stitch，所以就決定試下，睇下呢個工具能否幫佢整出靚嘅 UI。佢用嘅提示詞係「生成一個 AI 視頻生成器的 Landing Page」，同之前一樣，但今次用 Stitch 睇效果。
生成一個 AI 視頻生成器的 Landing Page
Stitch 基本操作：快速生成初稿
打開官網，輸入框下方可以揀主題配色，仲可以切換 Web 同 Mobile 版本。選好後點擊確定，等一陣就生成完成。生成後右邊係預覽效果，頂部有修改按鈕。
主題配色
web和手機端
呢個過程好直觀，唔需要任何設計經驗，AI 會自動生成完整頁面。
設計調整：精細控制每個細節
生成後可以修改頁面配色：切換 Dark/Light 模式，調整主色、主題配色、字體、按鈕圓角，然後保存。調整完可以選中生成嘅 UI，點擊「生成至最新設計系統」，UI 就會應用新設定。
dark 和 light 模式
主色、主題配色，字體，按鈕的圓角
生成至最新設計系統
作者仲提到可以點擊右側嘅筆，選中具體元素，叫 AI 單獨修改。呢個功能對於想微調某部分嘅人好有用。
選中具體的元素
- 支援 Dark/Light 模式切換，符合現代設計趨勢。
- 可以自訂主色、字體、圓角等，建立品牌一致性。
- 單一元素修改功能，靈活應對特殊需求。
導出與後續使用：從設計到開發
點擊右上角運行按鈕可以預覽實際操作 UI，睇到動畫效果。導出選項好多，作者揀咗 zip，下載落嚟就係 HTML、圖片同設計規範。
實際可以操作的UI
導出 zip
html 、圖片、設計規範
作者仲分享咗兩個延伸用法：一係將 HTML 交畀本地 AI，叫佢按 UI 實現；二係如果已經有頁面想優化，可以上傳截圖或者網站地址，Stitch 會直接幫你改。呢個 workflow 對於網站出海嘅開發者好實用。
把呢個html 交給本地的AI
上傳截圖或者網站地址
- 1 導出 HTML 後，本地 AI 可根據設計生成完整代碼。
- 2 上傳現有頁面截圖，Stitch 可自動優化 UI。
早晨，朋友們！
琴日分享咗impeccable，我嘅審美水平真係睇唔出究竟好唔好，有朋友話有啲車禍，啱啱琴日分享完之後，Google 推出咗新版stitch，今日我哋就嚟試下用stitch整出靚UI。
打開官網 stitch.withgoogle.com，就係好普通嘅輸入框操作，我用返琴日嘅提示詞，生成一個AI視頻生成器嘅Landing Page。輸入框下面，可以揀你鍾意嘅主題配色，佢支援web同手機端嘅UI設計，亦可以喺輸入框下面切換。揀好之後㩒確定，就開始生成。
生成完之後，側邊會有當前嘅主題色，右邊係預覽效果，頂頭可以㩒修改，調整當前頁面嘅配色。
修改頁面入面可以切換dark同light模式，可以調整主色、主題配色、字體、按鈕嘅圓角，然後㩒保存。
你調整配色之後，可以揀生成咗嘅UI，頂頭嘅修改，㩒生成去最新設計系統，UI就會變做你設定嘅新配色。
㩒右邊嘅筆，可以揀具體嘅元素，叫AI幫手改。
㩒右上角嘅運行掣，可以見到實際可以操作嘅UI，見到一啲動畫效果，㩒匯出，有好多匯出方式，我揀咗zip，下載落嚟就係頁面嘅html、圖片、設計規範。
之後就可以將個html交俾本地嘅AI，叫佢跟住html嘅UI去實現。
如果係已經有嘅頁面要優化調整，可以上傳截圖或者網站地址，叫佢直接優化。亦可以輸入要參考嘅網站地址，用佢嘅配色方案。
我係赫茲，專注網站出海第304日，持續分享網站出海內容。新朋友可以睇下之前嘅文章合集；想系統學習，都推薦關注哥飛老師，我好多方法係跟佢學嘅。微信搜361079就可以揾到佢。
早上好，朋友們！
昨天分享了impeccable ，我的審美水平，確實發現不了到底好不好，有朋友說有點翻車，剛好昨天分享之後，Google 發佈了新版的stitch，今天我們就來試用一下stitch 做出好看的UI。
打開網站官網 ，stitch.withgoogle.com 就是很常規的輸入框操作，我還是用昨天的提示詞，生成一個 AI 視頻生成器的 Landing Page。輸入框下方，可以選擇你喜歡的主題配色，它是支持web和手機端的UI設計，也可以在輸入框下方切換。選擇完成後點擊確定，就開始生成了。
生成完成之後，旁邊會有當前的主題色，右邊是預覽效果，頂部可以點擊修改，調整當前頁面的配色
修改頁面裏面可以切換dark 和 light 模式，可以調整主色、主題配色，字體，按鈕的圓角，然後點擊保存。
你調整配色之後，可以選中生成的UI，頂部的修改，點擊生成至最新設計系統，UI就變成了你設置的新配色。
點擊右側的筆，可以選中具體的元素，讓AI進行修改。
點擊右上角的運行按鈕，可以看到實際可以操作的UI，看到一些動畫效果，點擊導出，有很多導出方式，我選擇的zip ,下載下來就是頁面的html 、圖片、設計規範。
然後就是可以把這個html 交給本地的AI，讓按照html 的UI進行實現。
如果是已經有的頁面要優化調整，是可以上傳截圖或者網站地址，讓他直接進行優化的。也可以輸入要參考的網站地址，使用它的配色方案
我是赫茲，專注網站出海第304天，持續分享網站出海內容。新朋友可以看看之前的文章合集；想系統學習，也推薦關注哥飛老師，我很多方法是向他學習的，微信搜索 361079 就可以找到他。