make-interfaces-better について
make-interfaces-betterは、Jakub Krehelのデザインエンジニアリング原則を用いてUIを磨くスキルです。マイクロインタラクション、タイポグラフィ、視覚的階層、モーションのタイミング、余白の細部を扱います。
主な機能
- 01マイクロインタラクションとホバー状態の調整
- 02タイポグラフィと視覚的階層の改善
- 03モーションのタイミングとトランジションの調整
- 04余白やUIの細部の調整
活用シーン
- 01基本機能を実装したUIをさらに磨く
- 02トランジションと余白のリズムを整える
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ podo/ design-agent-skills --skill make-interfaces-betterインストール後、Claude Code で/make-interfaces-betterを入力して読み込まれたか確認します。
同梱ファイルstub.yaml
詳細
make-interfaces-better
カタログ用スタブ — スキルの完全版:jakubkrehel/make-interfaces-feel-better
判断ツリー
-
完全版のスキルはすでにインストールされていますか? この場所にあるスキルに、まだ
das:ブロックがあるか確認します:- グローバル:
grep -q "^das:" ~/.agents/skills/make-interfaces-better/SKILL.md 2>/dev/null && echo "pointer" || echo "installed" - プロジェクト:
grep -q "^das:" .agents/skills/make-interfaces-better/SKILL.md 2>/dev/null && echo "pointer" || echo "installed" das:ブロックがない → 完全版のスキルがインストール済みです。呼び出して続行しますdas:ブロックがある → 手順 2 に進みます
- グローバル:
-
スコープを検出してから、インストールします:
スコープを検出するには:
[ -e ~/.agents/skills/make-interfaces-better ] && echo "global" || echo "project"グローバル(
-gを付けてインストール):npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-better -g -yプロジェクト(
-gを付けずにインストール):npx skills add jakubkrehel/make-interfaces-feel-better --skill make-interfaces-better -yClaude Code: 会話から離れずにコマンドを実行するには、どちらかのコマンドの先頭に
!を付けてチャットメッセージとして送信します。
インストール後の呼び出し
- スキル名:
make-interfaces-better - トリガーフレーズ:「make interfaces better」、「interface polish」、「micro-interactions」、「polished UI」
内容
Jakub Krehel のデザインエンジニアリングの原則を適用して、インターフェースを単に機能的なだけでなく、本当に洗練されたものに仕上げます。マイクロインタラクション、的確なタイポグラフィの選択、視覚的階層の調整、モーションのタイミング、そして巧みに作り込まれた UI とありきたりな出力を区別する細やかな工夫(ホバー状態、トランジション、余白のリズム)を扱います。oklch.fyi と Interfaces 出版物のクリエイターによるものです。
コメント
Markdown 対応