首先UI元件庫是在一個產品活產品群長期積累沉澱出來的元件化、通用畫的元素，需要長期和打磨、考究才能生成相對合理，適用於產品的相對通用化得元件庫。

所謂的『線上文件』我理解有三種。1、psd線上可下載供設計師使用。2、線上元件，由前端同學用程式碼生成，可供開發時直接複用程式碼生成線上頁面使用（此類線上文件可參考螞蟻金服的ant design）。3、完整的設計規範，包含元件的繪製規範。適用設計師和開發同學共同閱讀，可包含程式碼也可不包含。（參考Material Design、IOS設計規範等）

具體方法：

1.在繪製UI圖時要有元件化思維。例如一個button，要考慮normal、hover、click、disable等狀態，要考慮短欄位、長欄位、超長欄位的情況並且總結，形成元件。除了button意外如：輸入框、下拉框、表格、表單、校驗、搜尋、icon等等都要考慮完善並且總結文件。

2.和前端同學溝通，產品開發後期總結程式碼形成線上元件庫，並且實時迭代。

3.UI元件其實並不只是UI一方面的工作，裡面很多操作邏輯牽扯到互動層面。如果你的公司有轉職的互動設計師就需要共同完成元件庫，如果沒有互動就需要你自己多考慮互動的問題。

4.不斷完善更新。這一條非常非常重要，因為一個產品不可能一次成型，需要不斷的打磨調整，相應的元件庫也不是一勞永逸的事情，它只是減少開發和設計的工作量，但是不斷打磨變得更加合理合適更重要。