上期回顧：

一、實際業務中組件庫的難題

1. 組件使用要“天時、地利、人和”

組件雖好，卻不一定適合你的團隊，在使用組件、搭建組件庫時，會遇到各種問題，下面列舉實際業務中可能遇到的部分問題：

①一開始，建立大而全的組件庫：

建立組件庫的目的是為了讓同事調用，從而去保持產品設計的一致性和性能的優化。

談到組件庫，大部分人都覺得要設置一個大而全的組件庫，不然稱不上組件庫，但是在實際工作的數據中，長期調用的組件只占到 20%，有些組件調用甚至是個位數，一開始把精力放在完善組件庫上，投入產出比不高。

第二個容易遇到的問題，團隊成員從不用組件到開始用組件，會存在學習成本提升的問題，如果一開始就面對海量的組件，會有畏難心理，在短暫的時間內，他需要花更多的時間去了解組件的挑選和使用，過難會入門即勸退，倒不如剛開始只把業務高頻使用的模塊給組件化，如按鈕、TAB 等，后續隨著團隊成員的對組件熟悉的增加，再同步補充組件庫樣式，Figma 有組件庫調用的數據，哪些用的多，哪些用的少，都能了解到。

②人員更替，跨團隊協作：

團隊的人員更替在所難免，當團隊成員更替時，新成員可能需要花費大量時間來理解和學習現有的組件庫結構。對應的解決措施是做好組件庫的新人手冊，一勞永逸。

此外，搭建組件庫需要耗費大量時間，而且這通常是在項目需求之外的工作。組件庫的建立需要進行設計、開發、測試和文檔編寫等工作，這些工作可能與項目的緊迫性需求相沖突，因此需要額外的時間和資源來完成。

為了成功地建立組件庫，團隊可能需要領導的支持和認可，包括資源投入、時間安排和人員配備等方面的支持，這可能需要進行有效的溝通和推動。

③了解一些簡單技術：

設計團隊需要了解 Figma 的基本原理和組件的使用方式，同時要對開發框架中對應的組件形式有一定的了解，以便于能夠將 Figma 中的組件轉化為可用的前端組件，也可以多跟開發人員溝通，了解他們需要怎樣的組件形式，關系好，沒有什么是不能解決的。

這些難點，可能在看這篇文章的時候覺得問題不大，能克服，但是到實際項目中，卻有可能成為阻塞點。

組件搭建和使用建議：

從常用的組件開始，小成本實驗：可以從常用的彈窗、按鈕、任務欄等進行嘗試。組件設計的目的就是節省大家的時間，提高效率，如果一開始就設計得大而全，且缺少實際的使用場景，那么就不會有同事去調用它。

同時要做好上手介紹，大家都是有惰性的，如果沒有組件使用的習慣，那么只會按照自己原來的方式去構建文檔，因為這樣不會有新的學習成本。

盡量用英文命名，為后續 AI 生成頁面提供便利，ChatGPT 對英文的命名更敏感，產出時不易出錯。

2. 現階段 AI To Code /Design To Code 難

我們使用組件和搭建組件庫，一方面是為了同事間相互調用，減少重復發明輪子，另一方面，也是為了當 AI 生成頁面來臨之時，我們有獨特的、不可替代的業務組件，去進行頁面生成。在這一段落，將討論 AI 轉頁面、設計轉界面的問題。

嵌套層級難處理：

AI 產生的代碼當前僅適用于簡單的布局和組件，而對于復雜的嵌套關系和動態邏輯處理則顯得力不從心。

在 Figma 中，組件的嵌套層級可能與前端實現中的 DOM 結構不完全匹配，需要設計和開發團隊共同協商如何將這些差異解決，以確保組件能夠在設計和實現中保持一致。

與實際開發場景不同，AI 產出的一般會是并列關系，實際開發中一般是嵌套關系，舉例：有些設計師也很少分組，一個頁面就是一個分組，這樣對于設計稿轉代碼會帶來困難，會使得 AI 不理解你的頁面層級。

同時，其實可以將設計稿的層級，以文字的形式輸出給 chatGPT，輔助它輸出正確的嵌套層級，這也是一個不錯的方法。

補充：當前的部分視覺方案也是基于視覺識別，覺得你這里分割過大，看起來像是 2 個模塊，那就是兩個模塊。通過交集、并集、父子集來判斷。

二、組件庫和 AI 結合的優勢和局限性

1. 優勢

減少重復勞動：結合前端組件庫和 AI 生成代碼的能力，可以大大加速頁面開發過程，減少重復勞動，提高生產力。

統一設計風格：通過使用設計組件和 AI 生成代碼，可以確保頁面設計的一致性。

高可維護性：使用組件庫和 AI 生成的代碼可以提高代碼的可維護性，因為它們遵循一致的結構和設計原則。

2. 局限性

語義理解局限：當前 AI 在理解人工語義方面仍存在局限性，可能無法準確理解所有的語義和業務需求，導致生成的代碼不符合預期。

定制化困難：對于某些定制化、特殊化的設計需求，AI 生成的代碼可能無法滿足，需要手動調整和編寫代碼，比如運營活動就比較難實現。

設計復雜性：在處理復雜的設計組件和布局時，AI 生成的代碼可能無法完全滿足設計師的需求，需要人工干預。

綜合而言，結合前端組件和 AI 生成代碼的能力可以極大地提升頁面設計的效率和一致性，但在實際應用中需要克服語義理解、定制化支持、人工干預以及性能，以實現更加智能和高效的頁面設計過程。