AIが作るページの「AIっぽさ」を消すデザインスキル「Hallmark v2」が話題。Claude CodeやCodexで使える

AIにウェブページを作らせると、どこかで見たような「AIっぽい」見た目になりがちです。その「AIっぽさ」を避けてページを作るためのデザインスキル「Hallmark」が、作り直したv2として公開され、X上で話題になりました。Claude Code、Codex、Cursor、OpenCodeで使えます。

AIが作るページを「AIっぽく見えない」ようにできるようになった

Hallmarkは、AI企業のTogether AIが作っているオープンソースのスキルです。GitHubのREADMEでは、「AIが作ったように見えることを拒む」デザインスキルと説明されています。開発者のHassanさんの投稿によると、v1はGitHubのスターが3万、インストールが6万を超え、今回ゼロから作り直したv2が公開されました。

READMEでは、AIが作ったページによくある特徴として、すべての見出しの上に置かれる小さなラベル、見出しの中の1語だけに色を付ける表現、どのページの最後にもあるメール登録欄、送信されないのに「ありがとうございます」と表示するフォームなどが挙げられています。Hallmarkは、こうした特徴が出ていないかを実際のブラウザで確かめながらページを作ります。

どんな仕組みなのか（初心者向け）

「スキル」とは、AIコーディングツールに特定の仕事のやり方を教え込む追加の手順書のようなものです。Hallmarkを入れると、AIはページを作るときに次の流れをたどります。

1. プロジェクトの中身（フォント、色、使っている仕組み）を読み、写真や画面写真、実際の数字などの素材を一度だけたずねる。素材にない情報は作り出さない
2. 48種類のテーマから、依頼に合うものを3つ提案する
3. ページの一番上（ファーストビュー）だけを先に作って確認してから、残りを作る
4. 8つの画面幅でページを表示して検査し、最後に別のAI（サブエージェント）が新しい目で見直す

検査には段階があり、文字と背景の色の差（コントラスト）、スマホでの表示崩れ、作り話の情報などは、出してはいけない最低ラインとして必ず止められます。

基本情報

業務でどう使える？どう変わる？

一言でいうと、AIに作らせたページを「そのまま人に見せられる」水準に近づける道具です。使い方は3つあり、目的に合わせて選べます。

READMEで案内されている導入と使い方は次のとおりです。

1. npx skills add nutlope/hallmark -g でインストールする（-g を付けるとすべてのプロジェクトで使える。外すと今のプロジェクトだけ）
2. Claude Codeで /hallmark に続けて作りたいページを伝える（Codexでは $hallmark）
3. 既存のページは /hallmark redesign ./index.html で作り直し、/hallmark audit ./index.html で点検だけを行う

作り直しでは、文章やリンク、入力欄などの中身と仕組みは残したまま、見た目と配置を変えます。リンクや入力欄が1つでも消えると作り直しを失敗扱いにする確認も入るとされています。

職種別の活用アイデア

• マーケター：キャンペーンのLPやセミナーの告知ページを作らせ、デザイナーに渡す前のたたき台にする
• Web制作者・デザイナー：AIで作ったページに /hallmark audit をかけ、「AIっぽい」と言われがちな箇所を洗い出してから仕上げる
• 営業・事業開発：提案先に見せるサービス紹介ページの試作を短時間で作り、打ち合わせで見た目のイメージをすり合わせる
• PM・エンジニア：社内ツールや管理画面の見た目を /hallmark redesign で整え、動きはそのままに使いやすくする

よくある質問

まとめ：まずは今あるページを「点検」してみる

Hallmark v2は、AIに作らせたページから「AIっぽさ」を減らし、ブラウザで検査しながら仕上げてくれるデザインスキルです。新しいページを作るだけでなく、既存ページの作り直しや点検にも使えます。

いきなり新しいページを作るより、まずはAIで作った手元のページに /hallmark audit をかけ、どこが「AIっぽい」と判定されるかを見てみるのがおすすめです。

今回の内容は、Hallmarkの開発者であるHassanさん（@nutlope）の投稿をきっかけに紹介させていただきました。v1から大きく作り直したスキルを無料で公開してくださっている、ありがたいポストです。

「AIを業務で使える側になりたい」という方は、デイトラのAI業務活用コースで、プロンプトの基本からMCP・AIエージェントの活用まで体系的に学べます。