Webデザイン改善スキル「Hallmark」の機能と使い方

Claude Code / Codex / Cursorで使えるデザインスキル

ウミノ｜サブスタックの教科書著者

6月 01, 2026

バイブコーディングでWebサイトを作ってみたものの、なんだかデザインが垢抜けない…

そんなお悩みはありませんか？

せっかく良いサービスを提供しているのに、デザインのせいで魅力が伝わらないのはもったいない。とくに仕事に直結するサイトなら、見た目や使いやすさはとても重要になってきますよね。

こんにちは、ウミノです。普段はnoteメンバーシップ「自動化オタクの頭の中（ジドオタ）」で、非エンジニアでも自動化・仕組み化を取り入れて自分の時間を作り出そう！をコンセプトにした発信をしています。

今回は、AIを使ってWebサイトのデザインを自動で整えてくれる「Hallmark（ホールマーク）」という便利なスキルをご紹介します。

デザインの知識がなくても、AIの力でサイトの目的を達成しやすくなるので、ぜひ最後まで読んでみてください😊

ClaudeやCursor、Codexで使えるデザイン支援スキル

最近はClaudeやCursor、CodexといったAIツールを使って、誰でも簡単にWebサイトを作れるようになりましたよね。

でも、AIに指示を出して出来上がったサイト、どれも似たり寄ったりになってませんか？そんなときに活用できるのが、今回ご紹介する「Hallmark」というデザイン支援スキルです。

Hassan@nutlope

Introducing Hallmark! An open source design skill to make beautiful UIs and landing pages by default. Works in Claude Code, Cursor, and Codex. npx skills add nutlope/hallmark

3:12 PM · May 19, 2026 · 671K 表示

157 返信 · 420 再投稿 · 4.93K Like

https://www.usehallmark.com/

このツールはAIが作成するWebサイトなどのデザインを美しく整えてくれるスキル（Skills）です。デザインやプログラミングの深い知識がなくても、AIに指示を出すだけでプロのデザイナーが手がけたような洗練されたレイアウトを実現してくれます。

実際にWebサイトを立ち上げるとなると、配色や余白のバランスなど、細かな調整にどうしても時間がかかってしまいます。

Hallmarkを使えば、そうした時間のかかる作業をAIがサポートしてくれるため、本来注力すべきサービス作りや文章作成に集中できるようになります。時短しながらクオリティを上げられる、とても実用的なツールなんです。

https://github.com/Nutlope/hallmark

オープンソースだからこそ確認できる安全性

便利なAIツールが増える一方で、セキュリティへの不安を感じる方も多いはず。わたしは基本的に、出所が不明な「野良スキル」と呼ばれるものは、セキュリティの観点から安易に導入しないように気をつけています。

ですが、このHallmarkはオープンソースとしてGitHubというプラットフォームで公開されています。中身のプログラムがどうなっているかをしっかりとチェックできる状態になっているため、Codexに安全性を自分で確認したうえで安心して導入することができました。ツール選びにおいて、中身が透明であることはとても大切なポイントになります。

なお、開発者のHassanさんはTogether AIという企業の開発者であり、公式アカウントのバッヂもついているのでより安心して試せました。（一応、npmではなくてコピーでインストールしました）

https://www.together.ai/

目的に合わせて使い分けるHallmarkの4つの機能

まずHallmarkができることはざっくりこんな感じ。

AIっぽい雑なデザインを避ける
LPやWebページの見た目を整える
ファーストビューの印象を強くする
クリックされる導線をわかりやすくする
余計なカード、表、説明文を削る
情報の優先順位を整理する
見出し、説明文、ボタンの強弱をつける
文字サイズや余白を整える
色の使い方を調整する
カードやセクションの見た目を洗練させる
スマホ表示で崩れないように確認する
PC表示で見栄えが悪くないか確認する
「どこをクリックすればいいか」を明確にする
既存サイトの雰囲気を読み取って改善する
URLやスクショを見て、改善案を出す
実際のHTML/CSSに反映する
ローカルで表示確認する
必要ならVercelなどにデプロイする

そしてHallmarkの便利なところは、たった4つのコマンドでそれらをいい感じにやってくれるところ。

/build：サイトデザインを構築

まず1つ目の「build（ビルド）」は、ユーザー側の質問に答えていくだけで、最適なサイトデザインを構築してくれる機能です。ゼロからデザインを考えるのが苦手な方でも、対話形式で進められるのでとても使いやすい機能になっています。

/study：他のサイトから学ぶ

2つ目の「study（スタディ）」は、特定のサイトのスクリーンショットやURLを読み込ませる機能です。読み込んだサイトのデザインテーマや特徴をAIが自動で抽出し、似た雰囲気のデザインを見事に再現してくれます。気になるデザインのサイトを見つけたときに、そのエッセンスを自分のサイトに取り入れることができるので非常に便利ですよね。

/redesign：すでにあるサイトを再構築

3つ目の「redesign（リデザイン）」は、既存の文章やブランドのイメージを維持したまま、サイト構成を再構築してくれる機能です。今の雰囲気を残しつつ改善したいときに役立ちます。

/audit：監査レポートを作成する

そして4つ目の「audit（オーディット）」はAIのレポートを取得する機能です。デザイン・導線・表示崩れ・実装面のリスクを監査した上で、クリック動線や危険性などをレポートにしてくれるんです。

たとえばわたしの公式サイトについては以下のようなレポートを出してくれました。

Hallmark Audit
結論として、見た目と導線はかなり良い状態です。

https://www.umino-ai.com/

は Systeme ページ内で Vercel版を iframe 表示していて、Vercel側の最新版は読み込まれています。スマホ/PC幅でも横はみ出しはありませんでした。

指摘
P1: iframe構造でスクロール体験が少し不安定
www.umino-ai.com 側は Vercelページを height:100vh の iframe で表示しています。中身のLPは長いので、ブラウザ全体ではなく iframe 内をスクロールする形になります。
いま表示はできていますが、スマホで「ページ全体をスクロールしている感覚」とズレる可能性があります。該当: /tmp/umino-ai-home.html (line 166)

P2: CTAリンクがHTML直書きではなくJS後付け
ヒーローカードや無料講座カードは、HTML上では data-link だけで、JSが動いてから href が入ります。通常は問題ありませんが、JS失敗時はクリック先が消えます。
該当: index.html (line 1098), index.html (line 1506)

P2: index.html が約6MBで重い
写真やフォントがHTML内にbase64で埋め込まれていて、単一HTMLとしてはかなり大きいです。表示はできていますが、モバイル回線では初回読み込みが重くなりやすいです。
該当: index.html (line 1123)

P3: 削除済み要素のCSSが少し残っている
fcard-meta はHTMLから消えていますが、CSSだけ残っています。表示には影響なし。掃除対象です。
該当: index.html (line 607)

優先して直すなら、次は iframeのスクロール問題とリンクのhref直書き化です。