「紫→青グラデ背景」「ベージュ」など、WebページのAI臭を消すスキル3種(生成AIクローズアップ)

テクノロジー AI
山下(Seamless)

2014年から幅広い分野の研究論文をピックアップして解説しているメディア「Seamless」(シームレス)を個人運営しています。

特集

1週間の気になる生成AI技術・研究をいくつかピックアップして解説する連載「生成AIウィークリー」から、特に興味深いAI技術や研究にスポットライトを当てる生成AIクローズアップ。

今回は、Claude CodeやCursorなどのコーディングAIにWebページやアプリなどを作らせると、AIっぽい(AIスロップ)UIになる現象を排除するスキル3つを取り上げます。

紫から青へのグラデーション背景、中央の大見出しとボタン、その下にアイコン付きカードが3枚など、AIが生成するWebページは同じUIになりがちです。このAIっぽい見た目を潰すスキル3つを厳選してご紹介します。

Hallmark

Together AIが開発した「Hallmark」は、Claude Code、Codex、Cursor、OpenCodeなどで利用できる、AI生成っぽさを排除して人間が作り込んだような自然なWebページを構築するためのデザインスキルです。

すべての見出しの上に小さなラベルを置く表現や、見出しの1語だけ色を変える手法、機能しないダミーフォーム、架空の数値や事実の捏造などのAIっぽさを禁止しています。

用意してある50種類のテーマから目的やプロンプトに応じたWebページを作り上げます。テーマを使わずにゼロから独自のデザインを起こすカスタム指示にも対応しています。オープンライセンス写真755点から題材に合った画像を自動で選び出しクレジット表記付きで配置する機能も備えています。

GitHubリポジトリはこちら。

Impeccable

jQuery UIの生みの親であるPaul Bakausさんが開発した「Impeccable」は、AIコーディングエージェントに組み込んで使うオープンソース(Apache 2.0)のデザインスキルで、WebページなどのAIっぽい量産型デザインを防ぎ、デザインを改善します。

改善には、「文字を読みやすく整える」「不要な要素を削る」「大胆にする」といった計24種類のコマンドが用意されており、曖昧な表現に頼らず狙い通りにUIを調整できます。

また、UXの採点や品質検査に加え、AIモデルを使わずに62のルールでAI特有の癖や文字切れ、コントラスト不足を自動検出する機能も備えています。

GitHubリポジトリはこちら。

Taste Skill

「Taste Skil」lは、Claude CodeやCursorなどのコーディングエージェントに、ありきたりで量産型のWebデザインから脱却した洗練されたWebサイトやアプリ画面を設計させるオープンソース(MITライセンス)のエージェントスキルです。

AIは依頼内容を読み取ってその要素を洗い出し、20のデザイン方針から提示された3候補のうち1つを選びます。その上で、オープンコレクションから実在の写真や映像を探し、クレジット付きで配置します。

さらにv2.1からは、一般的なWebページとアプリ画面を区別して構築できるようになりました。整列した数値やデータを見やすくする配色、スマホ向けの折りたたみメニューなど、実用的なUIを専用ルールでチェックしながら生成します。

既存サイトのリニューアル時も、まず実ブラウザで現状の画面を分析してから改善に着手します。

GitHubリポジトリはこちら。


《山下(Seamless)》

Amazon売れ筋ランキング

山下(Seamless)

2014年から幅広い分野の研究論文をピックアップして解説しているメディア「Seamless」(シームレス)を個人運営しています。

特集

BECOME A MEMBER

『テクノエッジ アルファ』会員募集中

最新テック・ガジェット情報コミュニティ『テクノエッジ アルファ』を開設しました。会員専用Discrodサーバ参加権やイベント招待、会員限定コンテンツなど特典多数です。