安裝
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