ウェブサイトの色・フォント・間隔を自動でAIに教える
Dembrandt
💬 In one line
AIに「差込口」をつけて、どこかのウェブサイトを見に行かせると、そこで使われている色・文字の大きさ・デザインのルールを自動で読み取ってくれます。
使い方は、サイトのURLをコマンドで指示するだけ。
✨ What it does
-
色・フォント・間隔を自動で検出
ウェブサイトの画面を実際に表示させて、そこで本当に使われている色や文字のサイズをAIが読み込めるようになります。手で調べる手間が省けます。
-
デザインの「ルール集」を複数の形式で出力
見つけたデザインのルールを、別のツールで使える形に変換できます。AIに渡すのも、デザイナーが見るドキュメントにするのも自由です。
-
デザインの変わり具合をチェック
以前に保存したデザインのルールと比べて、今のサイトが変わっていないか確認できます。ブランドの見た目が勝手に変わっていないか監視できます。
🛠 Who it helps
ウェブサイトをリニューアルするときに、AIに「このサイトの色使いを真似して」と指示したい人。または、複数のウェブサイトのデザインを比較・分析したい仕事をしている人に役立ちます。ブランドのルール集を自動で作りたい企業のデザインチームにも。
⚠️ Caution
使う前に Chromium(ブラウザエンジン)をダウンロードするという一回限りの準備が必要です。Node.js 18 以上が入っていることが条件。まだ試作段階の部分もあります。
🔗 Original
The write-up above summarises the original. See it for the exact details.
Repository: dembrandt/dembrandt TypeScript
🔗 Related hubs and more new arrivals
The headline and summary are an AI's Japanese rendering of a page published by an individual or a small team. They can diverge from the original. For the exact wording, follow the link to the source. Terms of Use