網頁與介面設計

為簡報、文件、報告或登陸頁套用 10 套現成的配色與字體主題，也可以即時產生新主題。

以 shadcn/ui 與 Tailwind CSS 打造無障礙、響應式介面的指引，涵蓋深色模式、主題客製，以及以畫布為基礎的視覺設計思路。

把一個主題寫成一段生成藝術宣言，再做成附種子切換、參數滑桿與 PNG 匯出的 p5.js 互動作品。

檢查一個正在運行的網站的版面、響應式、無障礙與一致性問題，再以最小改動在原始碼中修正並複查。

讓智能體做出不像範本的登陸頁、作品集與改版：先讀需求並給出「設計判斷」，設定三個刻度，合適時選用真實設計系統，最後通過嚴格的發布前檢查。

透過 Penpot 的 MCP 服務在 Penpot 中設計網頁、行動端與桌面端介面，附設計系統檢查、元件與無障礙規則及各平台尺寸。

找出在特定螢幕寬度下版面出問題的真正原因：橫向捲動、溢出、不肯縮小的 flex 子項、不吸附的 sticky、手機上的 100vh，以及固定列被瀏覽器介面遮住。

列出一個介面或元件需要的每一種狀態：載入、空、錯誤、部分成功、停用、離線、無權限與極端內容，並為每種狀態定好使用者看到什麼、能做什麼。

建立三層設計 Token（基礎值、語意、元件）、撰寫元件規範，並產生符合 Token 規範、帶 Chart.js 圖表的 HTML 簡報。

使用 TypeScript、Tailwind CSS 與 shadcn/ui 建構複雜且獨立的 React 網頁產物。

對照 WCAG 2.2 AA 級檢視頁面或元件：鍵盤、焦點、對比度、名稱與標籤、結構、表單、對話框、動態更新、縮放與點擊目標大小，每項發現都對應到具體的成功準則。

可檢索的介面設計知識庫：風格、配色、字體搭配、UX 規範、圖表與各技術堆疊的實作建議，動手前先確定視覺方向。

讓介面不重新設計也能承載任何語言：訊息文案庫、依地區格式化、能適應不同文字長度的版面、中日韓與由右至左的支援，以及附規範網址的語言切換。

做出在兩種主題下都正確的深色與淺色模式：語意色彩 Token、跟隨系統設定加手動切換、載入時不閃錯誤主題，並在兩種主題中分別核對對比度。

依正確的順序從零建構一個動畫：該不該動、目的是什麼、用什麼工具、動哪些屬性、用什麼曲線與時長、怎麼被打斷、怎麼退出。它會寫出程式碼，也會拒絕替不該動的東西加動畫。

在不重寫的前提下，把現有網站或應用升級到高級質感：先掃描技術棧，再依字體、色彩、版面、狀態與內容稽核「AI 通用套路」，然後依優先順序做有針對性的修正。

用現實中最壞的資料替元件做壓力測試：很長的姓名、無法換行的電子郵件、單字名字、缺漏欄位、1284 位成員、空清單。它會回報什麼壞了、為什麼，以及每個問題的修法，並在動手改之前先停下。

教智能體像高端設計機構那樣做設計：用確切的字體、間距、陰影、巢狀卡片結構與動態曲線讓網站顯得「貴」，並附一份廉價 AI 預設寫法的禁用清單。

用你自己的話描述一個動態效果，得到它的準確名稱：「對話框打開時那種彈一下的效果」是 Pop in，「iOS 那種拉到底會回彈的捲動」是 Rubber-banding。適合用來替設計師寫需求或替 AI 寫提示詞。

用 Emil Kowalski 的設計工程功夫來評審與建構介面：什麼時候不該做動畫、用哪種緩動與時長、彈簧、clip-path、手勢、效能與無障礙，並要求用「修改前 / 修改後 / 原因」的表格給出評審。