一、回到 2021

Motiff 這個項目始于 2021 年 10 月，不同于很多初創團隊有著“找尋并聚集團隊全員”這樣更具創業色彩的故事，我們在那時，就已經有一支工程師文化濃厚的團隊，也不乏一些優秀的 AI 科學家。在過去，這支團隊在教育領域成功實踐了不少全球性的項目。

商業的最初靈感，可能要追溯到我們最初使用 Github Copilot。那時，我們大部分團隊的工程師們并不覺得這款軟件會發揮多大的價值，而是直覺上認為 “距離 AI 有能力幫助我寫代碼的時代還很遙遠”。可到后來，Motiff 幾乎所有的工程師都在使用 Copilot。這讓我們感受到，如果能找到合適的用戶場景，將 AI 適當地融入專業工具中，一定會產生效率變革，這讓我們躍躍欲試。

萌生了想法，接下來就是“找到合適的用戶場景”。經過一系列討論，我們把起點定在 “產品設計” 領域。這主要有兩個原因：

1. 設計和研發在線產品，是我們這支團隊過往持續實踐的事情，團隊也一直熱衷于使用最先進的工具，我們對自己在這個領域的專業理解有信心。
2. 這個世界已經存在無數豐富的用戶界面了：仔細觀察這些界面，它們在設計模式上的相同，遠遠勝過了它們在樣式、風格上的不同。這樣的規律讓我們相信 AI 可以持續在這個領域發揮價值。

打造一款 AI 時代的用戶界面設計工具，這便是我們的開始。

二、AI 時代的界面設計工具，需要一個怎樣的編輯器？

編輯器是一個用戶界面設計工具的核心。Sketch 通過簡化和改進 Photoshop 的部分功能，打造了一個專為 UI 設計師使用的編輯器，這本質是一次 “編輯器革命”。“無限畫布”“畫框”“矢量工具”這些功能，讓 Sketch 定義了專業界面設計工具的“矢量時代”。而 Figma， 則通過“協同”讓游戲發生了改變 —— 編輯器被直接放上了云端，設計師只需通過瀏覽器就能實時協作。

這場新的變革，也讓 Figma 成功超越 Sketch 成為當下更流行的工具。

回到 Motiff 妙多，如果面向 AI 時代期望再引發一次變革，我們需要一個怎樣的編輯器呢？最初，我們試圖思考一些更廣泛的問題：在編輯器的功能定義上，我們究竟傾向于顛覆，還是借鑒？如果 AI 將在設計工具中扮演更重要的角色，下一個時代的編輯器會和我們現在所熟悉的截然不同嗎？

這些問題難有定論。但回顧過去，我們確實經歷了一些推演。

• AI 對編輯器的改變也許是漸進的，原因是編輯器里每一個功能被 AI 改進，這是相對獨立的命題。如果我們在漸進的創新中需要更多用戶反饋，則需要讓我們的用戶有一個全面的編輯器來持續使用我們的產品。
• “AI 生成” 也許是一個非漸進的改變，畢竟我們已經體會了大模型的日新月異。但我們仍舊認為更好的設計需要人來完善，因此全面精細的編輯器似乎就不可或缺了。

隨著我們邊做邊思考，愈發覺得一個全面的編輯器對我們很重要。它就像我們的“內功心法”，如果沒有內功，我們很難在此基礎上施展華麗的“AI 招式”。

當下，如果你已經使用了 Motiff 妙多，會看到一個具備完備云端協同能力的專業編輯器。

打造一個全面的編輯器確實花費了 Motiff 妙多團隊不少精力。在這里要特別感謝 Figma 讓我們少走很多彎路。Figma 用近十年的時間開創了一個復雜又精細的在線圖形編輯器，是我們長期學習的對象。我們的產品和技術團隊常常從 Figma 的 Blog 分享中獲益良多。我們同時也發現，對于一款在線圖形編輯器，“性能”尤為關鍵。Figma 在性能方面一直很優秀，Motiff 妙多則嘗試做得更好。事實上，我們現在已經在很多關鍵的場景下，將性能優化的更好。

三、Motiff 妙多對 AI 應用的思考

如何在專業設計工具中融合 AI 能力？從創立 Motiff 妙多開始，這就是整個團隊長期思考的問題，也是最重要的問題。

那么，AI 能幫助 UI 設計解決哪些問題？事實上，在經過了多次頭腦風暴后，我們已經有了一份長長的 AI 功能創意清單。這份清單上每一個“點子”都很酷，將這些“點子”轉化為產品原型也并非難事，但解決 AI 融入工具的難點往往不是創意本身，而是這些創意是否真的能夠被 AI 穩定、精準地實現。

在過去，幾乎任何的業務需求都可以被產品和工程研發實現，只是產品質量和開發時間難以保證。但對于 AI 功能，更關鍵的是找到一種 “PTF”，即 Product - Technology Fit。技術可行性和產品設計需要一個平衡點。我們需要理解 AI 各種模型當下的能力范圍和邊界，再定義合適的產品形態，從而使它能夠準確又穩定地應用現有的 AI 能力。

從 2021 年至今，我們完成了一些“PTF”的產品方案，并成功在設計團隊日常工作中實踐。

觀察設計師的日常：或許一切都可被 AI 重塑

Motiff 妙多在 AI 功能上的很多靈感，都來源于對設計師日常操作的觀察。這些觀察會伴隨一個目標：如果設計師們日常有一些操作場景是高頻復雜，但 AI 易于學習的，那或許 AI 在這些場景下就能順利發揮價值。

我們的產品經理做了一項“枯燥又有趣”的事情——讓 Motiff 妙多早期的測試用戶，將日常在 Motiff 妙多上工作的操作錄屏，然后產品經理通過觀看這些錄屏來試圖找到一些靈感。同時，我們也會在這些最少 3 小時的錄屏視頻里，分析這些產品設計師的具體行為，例如使用了哪些基礎工具、快捷鍵，再對應到錄屏里他們完成了哪些工作。

設計師最高頻的目標：重復

雖然這些操作分析并不嚴謹，但從有限的“錄屏”樣本里，我們觀察到產品設計師們 50% 以上的操作是為了“重復”——他們往往通過反復的“復制 - 粘貼”來完成重復——而事實上，“重復”在產品界面設計里無處不在，它本質上降低了各個產品用戶的理解成本。

但“粘貼”一般并不是“重復”的終點。設計師使用“復制 - 粘貼”，往往是因為期望沿用相同的設計模式，但同樣設計模式下的內容又需要有所差異，或是只有復用已經出現過的成套的信息才能更貼近真實的用戶界面。

“AI 復制”這個功能的靈感源于我們對重復這件事的思考和理解。

自動布局非常好。但糟糕時，也非常糟糕。

自動布局是一個非常實用的功能，它讓產品設計師可以具備更好的結構化布局能力，這是 Figma 極具開創性的發明。Motiff 妙多也繼承了這個功能。
但通過觀察設計師在布局時的操作，我們發現：

• 很多設計師從來不用自動布局。有些人覺得這個功能上手的門檻比較高，另一些人則是更喜歡自由地進行設計。
• 如果說學會使用自動布局是一個“困難模式”，那修改（特別是修改他人的）自動布局堪稱“地獄模式”。絕對定位可以解決有限的問題，但層層嵌套后的自動布局讓設計師很難回歸“自由”了。

Figma 的產品副總裁 Sho Kuwamoto 在 2021 年時的一場演講，將設計劃分為 Free-form Design （自由布局） 和 Structured Design （結構化布局）。這給了我們一個啟發：既然自由布局和結構化布局都是設計師需要的，那是否存在一種方法，讓用戶可以在有需求時就可以創建結構化布局來結構化調整，而想自由設計時又能回歸到自由設計？

“AI 布局” 這個功能應運而生。

設計系統：從生產流程看實踐的效率改進

自 《原子設計》這本書開創性地提出“設計系統”這個概念以來，“設計系統”一直都是保持設計一致性的最佳實踐。

我們認為“設計系統”真正的有效實踐，是從協同時代一切都放到云端開始的。“協同”解決了設計系統在同步上的很多痛點，但沒有解決所有的問題——創建一個設計系統仍然需要花費大量時間來進行整理，而每個團隊的組件庫和規范也往往復雜，維護和應用并不容易。

如果我們將目光轉向產品設計的生產流程，仔細審視其中的每一個環節，還會發現大量瑣碎但創意價值感低的工作。一些資深的產品設計師迷失在瑣碎中，甚至會開始懷疑作為設計師的價值。

將 AI 引入到設計系統的實踐是一個非常直覺而自然的想法。AI 可以在很多場景下扮演助手的角色，代勞繁瑣的工作。

當下，Motiff 妙多已經通過 AI 有效優化了設計系統實踐的效率，包括：創建設計系統時提高整理界面清單的效率，維護設計系統時讓系統的迭代更實時，以及應用設計系統過程中設計師通過智能的檢查來輕松地校準規范。

Motiff 妙多實驗室： 探索更多 AI 與人一起協作的可能

AI 和 UI 設計工具結合的未來，更有可能會是怎樣的呢？

關于 AI 會否完全取代產品設計師，早已成為了一個行業討論的熱門話題。Motiff 妙多認為，人的創意和審美在長期極難被取代，但設計工具的變革或許會“讓 AI 與人一起協作”。

Motiff 妙多實驗室，正在探索這些新的協作方式。我們這一創新實踐的思考路徑是，將產品設計工作抽象為從“Intention （意圖）”到“Presentation （呈現）”，再試圖從中探索 AI 如何與人一同協作。

AI 生成 UI：設計師描述意圖，AI 快速呈現方案

大模型讓“生成”成為當下 AI 領域最熱門的話題。畢竟，我們已經看到了“文生圖”的飛速發展，“AI 生成 UI ”沒有理由不在未來實現。相比如何做出一套酷炫的“AI 生成 UI 的 Demo”，Motiff 妙多在“生成”方面的思考會更審慎地評估一件事情：AI 需要“生成”什么，對產品設計師當下的工作是更有價值的？

我們認為價值主要會產生在兩個方向：

• 對于新創立的項目：設計師只有一個模糊的“意圖”。在進行設計之前，設計師需要更多的靈感來參照，此時讓 AI 快速提供一些“呈現”是有價值的。
• 對于已經運轉的項目：此時的設計師“意圖”更加具體。這些“意圖”可能是描述，也可能是線框圖，或直接是圖文并茂的產品需求文檔。如果讓 AI 基于此生成界面，設計師更需要的是符合當下業務設計系統的界面。

我們在“生成”方面的工作也一直在圍繞這兩個方向循序漸進的開展，并不斷探索如何將大模型的能力融入進來。

AI 魔法框：設計師勾勒意圖，AI 完善意圖的呈現

就像產品經理和產品設計師會不斷交流，共同來完成一個新產品的設計，我們認為人與 AI 的關系也不只是“上游交付下游”，而會產生一種“圓桌共建（Round Table）”的合作形式。

“AI 魔法框”的靈感正是在這個假設下誕生。

我們觀察到大部分的產品設計從最初到完成，會經過產品設計師不斷地勾勒和嘗試，最終選定一個合適的方案。“重復”地使用之前的設計元素或結構是一個非常高頻的操作。正如前面所介紹的“AI 復制”在特定場景下幫助設計師提升“重復”操作的效率，我們希望“AI 魔法框”能從“意圖”的維度改善設計師的“重復”問題——通過“AI 魔法框”，設計師只需要通過畫一個框來“勾勒”意圖，AI 便可以通過框和框所在位置的上下文來“完善”意圖。

四、專為設計師打造的 AI 設計工具

經歷兩年半的打磨，在 2024 年 6 月，我們將 Motiff 妙多這款 AI 時代設計工具推薦給你和你的團隊。

官網地址： https://motiff.cn/

你和團隊可以從嘗試 Motiff 妙多的創新 AI 功能開始，來感受 AI 時代下的產品設計工具對效率、創意、生產力的改進。我們將持續致力于為更廣泛的用戶提供功能全面、性能卓越、AI 驅動的專業設計工具。同時，我們用公道的價格，來滿足團隊在基礎功能和研發模式的使用需求。當前，所有的 AI 功能限時免費。

愿 AI 幫你擺脫繁瑣的工作，回歸設計本身。