技能包

make-interfaces-feel-better:先對照細節清單再改介面手感

適合要讓智慧體打磨介面手感的人;用官方 npx 安裝後先做唯讀對照,確認動效、懸停和熱區等問題後再改程式碼。

官方來源 · make-interfaces-feel-better

安裝

npx skills add jakubkrehel/make-interfaces-feel-better

適合誰

這份指南面向介面已經能用、但總覺得「差點手感」,希望智慧體按一份專注小細節的技能來對照的人。官方把它寫成關注讓介面更好用的那些細節。倉庫見

https://github.com/jakubkrehel/make-interfaces-feel-better

技能正文在

https://github.com/jakubkrehel/make-interfaces-feel-better/blob/main/skills/make-interfaces-feel-better/SKILL.md

材料寫明涵蓋動畫、字體排版、圖示、懸停態、光學對齊、同心圓角、陰影、熱區等。它適合你已有可預覽的介面,只想打磨這些點。它不適合還沒有介面、卻想讓智慧體憑空設計一整套視覺系統的人。現有材料沒有點名必須支援的用戶端,也不要推斷只有某一家能裝。

倉庫以 MIT 授權發布,說明見

https://github.com/jakubkrehel/make-interfaces-feel-better#MIT-1-ov-file

3 分鐘完成第一次嘗試

只走官方推薦的一條路徑。

前置條件:本機可執行 npx,並且工作區裡有可打開的介面程式碼或預覽。執行前確認目前專案就是要寫入技能的位置。

安裝位置:由 npx skills add 處理。材料沒有寫出目標資料夾,不要手補未出現的路徑。技能檔案的官方位置是上面的 SKILL.md。

複製並執行:

npx skills add jakubkrehel/make-interfaces-feel-better

成功訊號:命令正常結束,智慧體能引用動畫、懸停態或熱區等條目。先做唯讀對照:指定一個既有頁面,請它只點出可能的手感問題,明確禁止改檔。能按技能裡的類別(而不是空泛說「不好看」)指出問題,說明已載入。

改樣式會動倉庫。確認要改的檔案和範圍之前,不要授權寫入。

使用案例

案例一:先查懸停態和熱區。對應技能涵蓋的 hover states 與 hit areas。適合按鈕或連結已經能點,但總覺得不好點或沒有回饋。先只要問題清單。成功時,意見落在懸停和可點範圍,而不是重做整頁。材料沒有給出最小熱區尺寸或具體 CSS。

案例二:對照排版、光學對齊和同心圓角。對應 typography、optical alignment、concentric border radius。適合佈局已定,只想修字距、對齊和圓角是否同心。先截一張目前介面或指出元件,要求只評這三項。成功時,建議能對上這幾類,而不是另起一套設計。材料沒有給出數值規範;缺了的部分到此為止。

使用界線

現有材料只證明這一條 npx 安裝命令和上述主題集合。不要編造其他技能名、命令或設計 token。標題裡的「and more」沒有展開,不要把未寫出的主題當成已有清單。

材料沒有規定語言或框架。不要從示例推斷只支援某一棧。動畫、陰影和圓角改動都可能影響既有視覺,先對照再改。更多說明以官方倉庫為準:

https://github.com/jakubkrehel/make-interfaces-feel-better