build()
建立完整體驗
把產品目標轉化為可執行、能適應不同螢幕的介面。
為體貼的介面提供設計指引
讓數位產品更容易理解與使用。
Soft Syntax 協助 agent 運用親和極簡、溫和童趣與柔和扁平圖像，打造清楚、無障礙的介面。
建立 · 改造 · 檢視 · 規劃 · 圖像
務實的設計方法
好的結構，自然帶來溫度。
Soft Syntax 不是固定的視覺模板。它先理解產品的用途，再選擇顏色、版面與角色，並移除所有無助於理解或行動的元素。
清楚優先
以一個成果與一個明確的下一步帶領使用者。
用引導創造溫度
先運用文字、節奏與層級，再考慮裝飾。
讓趣味有目的
把愉悅感留給需要安心與探索的時刻。
視覺語言
三個層次，依序構成完整表達。
結構帶來清楚，個性讓體驗有人味，表現則建立辨識度。每一層都有明確任務，因此溫度不會變成視覺噪音。
-
結構
親和極簡
以克制、實用的框架建立清楚層級，讓下一步一目了然。
-
個性
溫和童趣
運用適度的不對稱、友善文字與一個愉悅時刻，讓體驗充滿生命力。
-
表現
柔和扁平設計
以圓潤字體、實心形狀、低調表面層次與有意義的圖像，形成可辨識的視覺世界。
五種工作模式
在每個階段使用同一套設計語法。
從零建立、改善現有產品、找出阻礙、在寫程式前確立方向，或製作原創產品圖像。
restyle()
改善，但不抹除識別
保留既有行為與品牌優點，同時讓整體系統更清楚。
review()
先找出阻礙，再處理美化
優先檢查易用性、無障礙、響應式行為與視覺系統。
plan()
確立能真正實作的方向
定義結構、設計 token、互動行為與產品專屬識別。
image()
讓圖像承擔清楚任務
圍繞一個有意義的概念，設計原創標誌與插畫。
工作順序
先理解情境，再選顏色；先建立系統，再加入裝飾。
每項決定都來自使用者需要理解與完成的事情。
-
理解任務
確認受眾、頁面目標、主要操作，以及可能遇到的阻礙。
-
建立系統
決定字體、依功能角色定義配色、間距與響應式行為。
-
克制地組織內容
建立清楚的頁面章節，加入一個真正有用的趣味時刻。
-
驗證真實體驗
檢查內容、鍵盤操作、各種狀態與實際螢幕寬度。
柔和實心語意圖像
讓每個形狀都有任務。
Logo 與插畫使用一個主要剪影、剛好足以辨識的線索，以及一個語意焦點。不加入裝飾性深度，也不讓多個隱喻互相競爭。
一個剪影
+
最少線索
+
一個焦點
改造示範
真實網站的前後對照。
以 Soft Syntax 改造真實網站的整頁截圖——切換檢視原始網站與重建版本，同樣的內容、相同的視窗設定。
從這裡開始
給你的 agent 一套更溫和的設計語法。
安裝 skill，再用自然語言描述產品、受眾、頁面目標與預期成果。