設計產品,而不只是畫面
附上截圖或描述畫面。Mythex 會把它打造成可運作的應用程式,有真實的資料、真實的狀態,以及可以分享的即時連結。
從一個點子開始
新手引導流程
打造一個四步驟的新手引導流程,附進度列、輸入時即時驗證的個人資料表單、略過選項和完成畫面。
設計系統頁面
打造一份動態風格指南,展示我們的顏色、字級、按鈕、輸入框、卡片和提示訊息,每個都有預設、滑鼠懸停、停用和錯誤狀態。
作品集網站
打造一個作品集網站,以格狀排列案例研究,每個案例有一個附大圖和簡短說明的頁面,另有聯絡表單。
儀表板概念
打造一個可點擊的數據分析儀表板,有側邊欄、日期範圍選擇器、四張統計卡片和一張圖表,並填入擬真的範例資料。
畫面只說了一半的故事
可運作的產品能展示靜態畫面無法呈現的東西。打造它、點擊它,分享真正的成品。
展示行為,而不只是版面
輸入時即時驗證的表單、從真正的資料庫載入的清單,以及真的有作用的按鈕。
設計不順利的路徑
空白狀態、載入中、錯誤和重試,正是產品容易出問題的地方。逐一提出要求,看它們實際運作。
同一個產品,不同的人
把管理員看到的和成員看到的並排展示,附真實的登入和角色。
把第一次使用做好
步驟順序、預設值和哪些是選填,決定了使用者能否完成新手引導。試用真正的流程,而不是它的圖片。
用連結取代交接
分享預覽連結或直接發布。工程師拿到可運作的參考版本;在 Pro 中,還能拿到程式碼。
為什麼設計師選擇在 Mythex 上打造
不只有版面,還有行為
測試空白、載入中和錯誤狀態,會驗證的表單,以及從真正的資料庫載入的清單。這些都是靜態畫面展示不了的。
從手邊的素材開始
以圖片形式附上截圖或設計稿,請 Mythex 照著做。需要時在聊天中產生主視覺和插圖。
用連結取代交接
分享預覽連結或發布應用程式。在手機尺寸的預覽中檢查每個畫面;在 Pro 中,還能自己調整 CSS 和元件。
運作方式
描述需求
用平常的話說出你需要什麼,或從範本開始。
看著它成形
Mythex 撰寫程式碼、設定資料庫,並顯示即時預覽。
發布
一鍵發布到公開網址,或只開放給你的團隊。
串接你已在使用的工具
只要連接一次 Google Sheets、Gmail、Slack、Notion、HubSpot 等數百種工具,就能在聊天中說出需求。你的應用程式可以讀寫這些工具的資料,金鑰絕不會出現在程式碼裡。
常見問題
可以從 Figma 匯入嗎?
無法直接匯入。把框架匯出成圖片並附到聊天中,Mythex 會據此打造畫面。圖片看不出來的部分,用文字描述即可。
和我的設計能有多接近?
很接近,而且可以透過聊天越改越像:指出哪裡的間距、顏色或字型不對。在 Pro 中你也能自己編輯程式碼。
可以在手機上使用嗎?
Mythex 打造的網頁應用程式能在手機瀏覽器中使用。預覽提供手機尺寸的框架,讓你在這個寬度下檢查每個畫面。
讓下一個設計成為人們真正能用的東西
免費開始,附上一張截圖,幾分鐘內就能看到你的設計動起來。