項目介紹

相信不少人都或多或少接觸過UI設計，例如我們所用的手機APP，電腦上的軟件界面以及網址的窗口，這些都屬于UI設計的一類。好的UI設計往往能讓軟件變得有個性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點。而今天要介紹的就是一個UI設計工具——OpenUI。OpenUI 可通過直接打字的形式來描述 UI，然后實時呈現(xiàn)UI樣式。同時你也可以將 HTML 轉換為 React、Svelte、Web 組件等，用于自己的網站或者APP開發(fā)上。

項目體驗

項目目前暫時沒有中文，這一點比較遺憾，但項目支持中文直接描述，并且網頁翻譯也完全夠用了，所以上手門檻也不高。

右邊的history欄目代表歷史對話，你前面描述的所有內容都會在這里，中間被分為了上下兩個區(qū)域，上面是UI的預覽區(qū)，同時頂部也有PC、平板以及手機三視圖切換，底部則是UI描述的輸入?yún)^(qū)以及HTML代碼了。

在描述一段內容之后，你可以根據(jù)當前給出的UI設計，再次輸入描述內容，來補全當前UI你覺得需要更改的地方。左上角的箭頭點擊后，鼠標移到UI預覽界面節(jié)能看到HTML的注釋效果，明確看到每個元素的代碼位置。

雙擊內容， 便可以針對這個元素進行單獨的再次描述設計。

如果你沒有設計思路，那么也可以直接截圖你當前覺得不錯的UI界面，直接拖到預覽窗，這樣便能直接根據(jù)圖的內容生成代碼，再對代碼進行優(yōu)化修改。

最后設計好你的UI之后，通過左邊切換你想要的語言，隨后通過右邊分享、下載或直接復制當前內容。

項目部署

該項目的部署有一點難度，項目名為wandb/openui，在github直接就能搜索到。因為前段需要我們自己編譯，所以我們需要將整個項目下載下來，可通過git的形式，或者直接而下載壓縮包也行。

下載之后解壓縮到群暉中，打開SSH端口，通過SSH工具連接到nas。用cd命令移動到項目的根目錄下，輸入命令docker-compose up -d構建項目。

需要注意的是，在構建之前，我們要檢查一下項目根目錄的docker-compose文件，檢查端口是否占用，如果有占用記得更改，避免沖突，同時也需要填寫一下openai的key值。同時前端構建過程會比較慢，請耐心等待。

一切OK后容器就部署成功了，這時候就可以通過http://你的nasIP+端口號訪問項目了。首頁右上角的設置可切換當前的大模型，如果沒有對應的key，那么直接用GPT就可以了。

總結

挺好玩的項目，如果你想給自己做一些博客或者網頁的設計，用這個會特別方便，同時如果你想要補全一下自己UI的一些不足，那么用它也在合適不過了，畢竟用中文輸入內容，直接出來想要的各種代碼，極其方便。

以上便是本期的全部內容了，如果你覺得還算有趣或者對你有所幫助，不妨點贊收藏，最后也希望能得到你的關注，咱們下期見！

作者聲明本文無利益相關，歡迎值友理性交流，和諧討論～

,