Claude Code関連

design-for-ai

AIが作る画面を「いかにもAI」から抜け出させる

GitHub公式のプレビューカード

AIに画面を作らせると、どれも似た見た目になります（暗い背景に水色、同じ大きさのカードの並び、半透明のガラス風）。この道具は、デザイナーが実際に使っている考え方（比率にもとづく大きさの決め方、色の選び方、視線の集め方）をAIに教え込みます。書籍『Design for Hackers』の内容を下敷きにしています。

#デザイン#UI改善

ミロンドが自分で確かめたこと

2026年8月23日「配布元を見る」の行き先が、今も開けることを確認しました。
2026年8月14日利用ルールの原文（null）を読みました。特別な条件は書かれていませんでした。
2026年7月31日公式の説明を読んで、開発が止まったというサインが無いことを確認しました。
2026年8月25日ミロンドが毎日数えている記録では、この17日間でお気に入りが11件増えました（今も使われ続けています）。

ミロンドは掲載しているすべての行き先を定期的に開いて、今も使えるかを確かめています。利用ルールは名前だけで判断せず、原文を読んで確認しています。

「Claude Code関連」63本の中での位置

APIキーの用意がいらないこの分野で43本
入れた内容を外部に送らないこの分野で19本
作ったものを仕事に使ってよいと確認できているこの分野で53本

黒い画面（ターミナル）の操作が要りますそうでないものが9本 →

上の条件をすべて満たすものは、63本中18本です。

この数字は、ミロンドが掲載している道具を1本ずつ同じ基準で調べた結果から数えています。

これは何？黒い画面（ターミナル）で動かすツール

できること

大きさの比率の考え方／文字の大きさの体系／色の組み立て方／視線を集める配置／必要な時だけ読み込む形での提供

誰に効く？

AIにWeb画面やアプリの見た目を作らせている人。既視感のある見た目から抜けたい人

用意するもの

Claude Code が必要です。プラグインとして導入します。

時間のめやす

15〜30分(AIに聞きながらコピペ)

使うとこうなる

1VS Codeに拡張を入れて再読み込みすると、文章校正を使える
2MarkdownやLaTeX文書を開くと、問題のある箇所がハイライトされる
3候補を確認すると、置き換え案や説明を見ながら直せる

作れるもの・できることの例

論文原稿の英文確認、READMEの校正、長文メールの見直し

使えるようになるまでの手順をひらく

「」という文字だけの画面を使います（Windowsなら PowerShell）
GitHubページの「Installation」に書かれたコマンドを順番に実行
つまずいたら、いつも使っているAIチャットに「(ツール名)のインストールを手伝って」と聞くのがおすすめ

こんな人には向かないかも

黒い画面（ターミナル）にまだ抵抗がある人

迷ったらこれ：いつも使っているAIチャット（ChatGPT・Claude・Geminiなど）にこのツールのGitHubリンクを貼って「これを使いたい。私のPCでの始め方を一歩ずつ教えて」と頼むのが一番の近道です。

むずかしそう？同じジャンルで、もっと始めやすいのはこちら

ponytail — AIに書かせるコードを、必要最小限に抑えさせる指示書 Awesome Claude Code — Claude Code便利集(コマンド・設定・事例)planning-with-files — AIに長い作業を任せる時、計画をファイルに残して忘れさせない仕組み

注意点

**これを入れれば自動的に良いデザインになる、というものではありません。** AIに判断の材料を増やすだけなので、最終的な見た目は自分で確認してください。内容は英語圏のデザイン慣習が前提です。**日本語の文字組み（行間、書体、詰め方）はそのまま当てはまりません。** の記載が見当たりませんでした（2026-08-18時点）。作者が全ての権利を持っている状態です。

ひとことメモ

利用条件（）が公開元に見当たりません。として自由に使えるとは限らないので、仕事で使うなら作者への確認をおすすめします。

このツールが活躍する場所

エンジニア・開発 →「Claude Code関連」のツールがこの職種の業務改善で活躍しています

やりたいことから探す

やりたいことの一覧を見る →

公式ページを開く（英語）

導入の目安：準備がいる

黒い画面に1〜2行コピペ（AIチャットに聞けば手順は出ます）

判断材料（9項目・自動判定）▾

最終更新日：半年以内（活発）お気に入り数：少なめ利用ルール：MIT作者：組織派生版：37件未解決の相談・不具合：0件APIキー：不要外部通信：なし(ローカル中心)ターミナル操作：あり（AIに聞きながらコピペでOK）

お気に入り数: ★ 284
最終更新: 2026年7月
利用ルール: MIT
仕事で使えるか: 可
公開元: ryanthedev
派生版 Fork: 37
未解決 Issues: 0

APIキー不要外部通信なし黒い画面（ターミナル）が要る

𝕏 でこのツールをシェア

このサイトはツールの紹介と公式リンクのみを提供し、ファイルの配布は行いません。

design-for-aiについてよくある質問

design-for-aiは無料で使えますか？: 無料で使えます。自分のパソコンの中で動くタイプなので、使った量に応じた料金もかかりません。
design-for-aiを使うのに、インストールや専門知識は必要ですか？: コマンド入力（黒い画面）での操作が必要です。手順どおりに文字を打ち込む作業に慣れていないと、導入でつまずきやすいツールです。
design-for-aiはスマホでも使えますか？: スマホには対応していません。パソコンが必要です。
design-for-aiは仕事（商用）で使えますか？: ライセンスは MIT で、商用利用も認められています。ただし著作権表示を残すなどの条件が付くので、配布物に含める場合はライセンス本文を確認してください。

似ている道具との違い

同じ用途の道具と、使う前に効いてくる条件を並べました。

道具	黒い画面	APIキー	外部送信	スマホ	仕事に使える	最終更新
design-for-ai（このページ）	要る	いらない	なし	むずかしい	可	2026年7月
power-design	要る	いらない	あり	むずかしい	可	2026年8月
Claude Code	要る	要る	あり	むずかしい	未確認	2026年8月
taste-skill	要る	要る	あり	むずかしい	可	2026年8月

「外部送信あり」は、入力した内容がどこかのサーバーに送られることを指します。社外に出せない資料を扱うときは「なし」を選んでください。

Claude Code関連のほかのツール

design-for-aiが合わなかったときの、同じ用途の候補です。

power-design

AIが作る資料とWebページを、それらしく見せない

準備がいる・黒い画面（ターミナル）が要る

Claude Code

ターミナルで使えるClaudeのコーディング相棒

準備がいる・黒い画面（ターミナル）が要る

taste-skill

AIが作る画面を「ありがち」から脱却させる指示集

準備がいる・黒い画面（ターミナル）が要る

rtk

AIに渡す実行結果を圧縮して料金を下げる道具

はじめやすい・黒い画面（ターミナル）が要る

Claude Flow

Claude Codeを複数並べて協調させる

準備がいる・黒い画面（ターミナル）が要る

oh-my-openagent

AI開発道具の設定を丸ごと持ち込む詰め合わせ

準備がいる・黒い画面（ターミナル）が要る

Claude Code関連をすべて見る →

注意点

design-for-aiについてよくある質問

design-for-aiは無料で使えますか？

無料で使えます。自分のパソコンの中で動くタイプなので、使った量に応じた料金もかかりません。

design-for-aiを使うのに、インストールや専門知識は必要ですか？

コマンド入力（黒い画面）での操作が必要です。手順どおりに文字を打ち込む作業に慣れていないと、導入でつまずきやすいツールです。

design-for-aiはスマホでも使えますか？

スマホには対応していません。パソコンが必要です。

design-for-aiは仕事（商用）で使えますか？

ライセンスは MIT で、商用利用も認められています。ただし著作権表示を残すなどの条件が付くので、配布物に含める場合はライセンス本文を確認してください。

似ている道具との違い

同じ用途の道具と、使う前に効いてくる条件を並べました。

道具	黒い画面	APIキー	外部送信	スマホ	仕事に使える	最終更新
design-for-ai（このページ）	要る	いらない	なし	むずかしい	可	2026年7月
power-design	要る	いらない	あり	むずかしい	可	2026年8月
Claude Code	要る	要る	あり	むずかしい	未確認	2026年8月
taste-skill	要る	要る	あり	むずかしい	可	2026年8月

「外部送信あり」は、入力した内容がどこかのサーバーに送られることを指します。社外に出せない資料を扱うときは「なし」を選んでください。