webstudio 視覺開發平台

• 直覺式視覺編輯器：拖放介面，方便快速原型與設計
• 程式碼層級控制：無縫切換視覺編輯與直接 HTML/CSS 操作
• 響應式設計：內建工具，用於打造行動友善的版面設計
• 元件庫：豐富的預建且可自訂的元件收藏
• 即時協作：與團隊成員即時合作
• 版本控制：內建版本管理系統，方便追蹤與回滾
• 匯出選項：為各種主機平台生成乾淨且優化的程式碼
• 效能優化：自動化工具，提升網站速度與效率

主要功能、特點

Webstudio 是一個開源的視覺開發平台，讓設計師和開發者能輕鬆創作響應式網頁設計。它橋接了設計與程式碼之間的鴻溝，讓使用者能在視覺化建構的同時，同時掌控底層的HTML、CSS 與 JavaScript。 

建立新專案或匯入範本 

登入後，你會被帶到儀表板。在這裡，你可以查看現有專案，並選擇建立新的空白專案或從預設範本開始。 

了解建構者介面 

了解介面是有效使用任何新工具的關鍵。熟悉 Webstudio 的建置工具——你網站建立的核心。組件面板包含文字、圖片、連結等元素，你可以拖曳到畫布上。想深入了解，請閱讀我們的《Webstudio Builder 解剖學入門》。 

使用設計代幣 

Webstudio 採用設計代幣來進行造型設計，提供跨平台的一致性。這些可重複使用的樣式有助於避免大型專案中常見的命名衝突與相依性問題。了解更多關於 WebStudio 中設計代幣的資訊。 

元件 

元件是你網站的基石。可以嘗試基本的 Text 和 Image，或深入進階元件如 HTML Embeds 或 Radix。在「設定」中自訂每個元件的屬性。 

預覽與發布 

當你對作品感到滿意後，請在網路上公開發佈前，使用右上角的「預覽」按鈕！欲了解更多細節，請參閱我們的發佈與自訂網域指南。 

加入社群 

學習新工具需要時間，所以不要因為一開始遇到的挑戰而氣餒。繼續探索、嘗試，並加入 WebStudio 社群，獲得支持與靈感。 

系統需求

DocuSeal docker 容器使用 SQLite 資料庫來儲存資料與設定。另外，也可以透過指定 env 變數來使用 PostgreSQL 或 MySQL 資料庫。 

版本

v 0.2460 

開發者

Oleg Isonen  

官網

https://webstudio.is/ 

https://github.com/webstudio-is/webstudio