デザインスキル · Hallmark v2

デザイナーでもないのにブログのデザインをAIに任せたら、前のデザインが恥ずかしく見えるほど良くなった

Claude CodeやCodexといったコーディングAIにHallmarkを入れてランディングページを頼むと、AIはまず誰が見るページなのか、何をクリックしてほしいのかを尋ね、テーマを選んでから組み立てます。完成したページは実際のブラウザで開き、AIが作ったと分かる箇所を探して直します。10月23日にはゼロから作り直したv2が登場しました。すでにある自分のページも、リンクや入力欄はそのままに作り直したり、点検だけ受けたりできます。自分のサイトを任せてみた人たちの事例を集めました。

2026年10月26日·事例 3件

Nutlope/hallmark README（AIっぽさのリスト、v2のテーマ48個・写真755枚、redesignの安全策）

Hallmark公式サイト — 開発元のデモ（Five Mile Gin）、テーマ三つの選定と実ブラウザでの検査の説明, 2026-10-22

Hassan — We rebuilt Hallmark from scratch（v2発表）, 2026-10-22 UTC（10月26日時点で閲覧148,729・ブックマーク3,395）

日本時間10月23日未明、デザインスキルHallmarkを作ったTogether AIのHassanさんが、Xで"We rebuilt Hallmark from scratch."（Hallmarkをゼロから作り直した）とv2を発表しました。v2の発表ポストは4日で閲覧14万8千回、ブックマーク3,395件を集めました。5月に投稿されたv1のリリースポストは、10月26日までの5か月で閲覧89万回、ブックマーク1万件を超えています。

ミュンヘンの自動車データ企業でCTOを務めるBrian Porterさんは、自分はデザイナーではないと公言しています。7月にv1で自分のブログをデザインし直し、こう書きました。"What came out was so much better it made the old version look embarrassing."（出てきたものがはるかに良くて、前のデザインが恥ずかしく見えるほどだった）

Hallmarkは、見出しごとに上に付く小さなラベル、見出しの一語だけを別の色にする演出、ページの最後に毎回付くメール購読欄、何も送信せずお礼だけを表示するフォームを「AIが作った感じ」の兆候として挙げています。

開発元のデモを見ると、AIはすぐには作り始めず、まず質問します。"/hallmark a site for Five Mile Gin, a small distillery that forages its botanicals"（植物素材を自ら採集する小さな蒸留所Five Mile Ginのサイトを作って）の一行を入れると、AIは"Any photos of the still?"（蒸留器の写真はありますか？）、"Who buys a bottle?"（ボトルを買うのはどんな人ですか？）、"The one thing to click?"（必ずクリックしてほしいものを一つ挙げるなら？）から尋ねました。

Together AIが無料で公開しているこのスキルのv2には、テーマ48個とオープンライセンスの写真755枚が入っています。開発元の説明によると、Hallmarkは依頼に合うテーマを三つ選び、完成したページを実際のブラウザで8種類の画面幅で検査します。既存のページを作り直すときは、リンク・入力欄・見出しを先に記録しておき、一つでも欠けたら失敗として扱います。

Reference 01ミュンヘンの自動車データ企業CTO Brian Porter · 個人ブログ（7月、v1）

四つのデザイン案から一つ選ぶと、AIがデスクトップとモバイルの画面を自分で撮りながらブログ全体を作り直しました

BrianさんはそれまでGoogle Stitchでレイアウトを組み、Claude Designで仕上げるやり方でブログを作っていました。HallmarkをClaude Codeのスキルとして入れ、ブログとホームページのデザインし直しを頼むと、AIはまず"just the blog, or everything?"（ブログだけですか、それとも全部ですか？）と範囲を尋ねました。続いて方向性の異なるデザイン案を四つ示し、Brianさんが一つ選ぶと、その中でダークモードを入れるかどうかといったバリエーションをもう一度選ばせました。

そこから先はAIが一人で進めました。ブラウザを自分で操作してデスクトップとモバイルの画面を撮り、結果を確かめながら40分以上修正を続けました。Brianさんは"It doesn't just hand me pixels. It does the part I'd skip."（画面を渡して終わりではない。自分なら飛ばしてしまう部分までやってくれる）と書いています。

以前のpoornerdのデザインのAbout画面。薄いグレーの背景に「Technologist. Entrepreneur. Programmer.」の文言 — 以前のデザインのAbout画面です。Google StitchとClaude Designで作りました。

Hallmarkでデザインし直したpoornerdのホーム画面。カプセル型の上部バーとダークモードボタン、「poornerd」のタイトル、「Read journal」ボタン、記事カード — Hallmarkでデザインし直したホーム画面です。上部バーの右側にダークモードボタンがあります。

Reference 02AI活用講座とメンバーシップを運営する日本の講師ウミノ · X（6月、v1）

「サイトを作り直して」と頼んだだけで、AIがサイトの目的を読み取り、無料講座の案内をファーストビューに上げました

ウミノさんはCodexにHallmarkを入れ、自身の公式サイトに作り直し（redesign）コマンドを実行しました。結果を見て"「メルマガの無料講座に登録してもらう」という一番の目的を、サイトの構成からAIが自動的に汲み取ってくれたんです。"と書いています。ファーストビューは、メッセージの文言が大きく置かれた構成から、無料講座の申し込みにそのままつながる構成に変わりました。ウミノさんは"一番クリックしてほしいものがファーストビューに入って、かつクリックするとちゃんとそこに飛ぶのが嬉しい。"と話しています。

同じサイトを点検（audit）させると、レポートが返ってきました。結論は"結論として、見た目と導線はかなり良い状態です。"でした。その下には、ファーストビューがiframe構造のためスクロールがやや不安定だという指摘（P1）、申し込みリンクをHTMLに直接書かずJSで後から付けているという指摘（P2）、index.htmlが約6MBと重いという指摘（P2）が並びました。最後の行は、先に直すべき二つでした。"優先して直すなら、次は iframeのスクロール問題とリンクのhref直書き化です。"

記事の最後には、ウミノさん自身の講座へのリンクが付いています。

白い背景に「AIを相棒にして、仕事・発信・商品づくりを、前に進める。」の文言が大きく置かれた、ウミノさんのサイトの以前のファーストビュー — 作り直す前のファーストビューです。

濃い緑の背景に「AIで、今日の仕事をひとつ軽くする。」の文言と無料講座のカード3枚が並ぶ新しいファーストビュー。カードの周りに赤い枠と「ここが追加」の注記 — Hallmarkで作り直したファーストビューです。赤い枠と「ここが追加」はウミノさんが自分で書き込んだものです。

Reference 03ルーマニアのソフトウェアエンジニア Mihai-Cristian Farcaș · X（10月24日、v2）

Hallmarkの新版（v2）公開からわずか2日で、学習アプリのライブラリ・復習カード・概念グラフを一つのデザインで作り直しました

Mihaiさんはv2が出た2日後、自身の学習プラットフォームの画面をHallmark v2でデザインし直し、その結果の動画を投稿しました。動画には、クリーム色の背景にセリフ体で書かれた"Good afternoon."のあいさつと"Ask your library anything…"の入力欄、読みかけの本の進み具合、復習カードが映ります。続いて、本の表紙が並ぶライブラリ（Library）、ノート（Notes）、概念同士をつないだグラフ（Brain）の画面が順に流れます。

Mihaiさんは"I used @nutlope 's Hallmark v2 skill to redesign my learning platform and I'm pretty impressed! Smooth transitions, clean animations, mindful of the layout."（@nutlopeさんのHallmark v2スキルで自分の学習プラットフォームをデザインし直したけど、かなり感心した！画面遷移はなめらかで、アニメーションはきれいで、レイアウトにも気を配っている）と書いています。

みんなの反応

よかったという声

“the only one that didn't make up stats or testimonials: every number is labelled "sample data".”
統計や推薦の声をでっち上げなかった唯一のもの。数字にはすべて「サンプルデータ」と書かれている。
人気のデザインスキル8つに同じランディングページの依頼を出し、結果を並べて比べた記事です（10月、v1時点）。
Paralect · 開発エージェンシーのデザインスキル比較記事paralect.com
“Every page without the skill had the tell; half the pages with it did not.”
スキルなしのページはどれもその兆候があり、スキルありのページは半分がそうではなかった。
純粋な黒・白を使っているかを自分で数えています。スキルなしでは40ページ中40ページ、スキルありでは28ページ中14ページでした（9月、v1、claude-haiku-4-5）。
ktlesr · GitHubgithub.com
“Hallmark by nutlope for UI its a deductiv list and forces AI to make anti slop UI instead of forcing a pattern that quickly becomes recognisable(an issue i spotted with impeccable and others).”
UIならnutlopeのHallmark。やってはいけないことを削っていくリストなので、すぐに見分けられてしまう型を押しつけるのではなく、AIにAIっぽくないUIを作らせる（impeccableなどで自分が気づいた問題）。
v2が出る前（10月16日）のコメントです。impeccableは別のデザインスキルです。
u/General_Cap_6316 · Reddit r/ClaudeAIreddit.com
“Nice skill, much needed these days; I know I'm not the only one that yearns for variety, even in our internal tool pages.”
いいスキル。最近まさに必要とされている。社内ツールのページでさえ多様さを求めているのは、自分だけじゃないはず。
v1紹介記事についたコメントです。
mondainx · Hacker Newsnews.ycombinator.com
“Impeccable and https://www.usehallmark.com/ works well for me.”
Impeccableと https://www.usehallmark.com/ が自分にはうまく合っている。
v2発表の3日後の投稿です。
Thet Hmuu · Xx.com

物足りなかったという声

“12 of the 40 attempts with the skill ended without building anything”
スキルありの40回のうち12回は、何も作らずに終わった
依頼の中にすでに答えがあるのに、質問ばかりして止まってしまったと書いています（9月、v1、claude-haiku-4-5）。
ktlesr · GitHubgithub.com
“The catch: cream, a serif and one accented word is close to the default frontend-design bans.”
難点：クリーム色、セリフ体、強調した一語という組み合わせは、標準のfrontend-designが禁じているものに近い。
同じ比較記事で、Hallmarkの出力について述べた部分です（10月、v1時点）。frontend-designはAnthropicが公開している標準のデザインスキルです。
Paralect · 開発エージェンシーのデザインスキル比較記事paralect.com
“Has anyone got this or impeccable or any other to actually work? For me it still pretty much looks like slop.”
これでもimpeccableでも、ほかの何でもいいけど、実際にうまく機能させられた人はいる？自分には相変わらずAIが作った感じ（slop）にしか見えない。
v1紹介記事へのコメントです。続けて、結局は指示を出し続けて直す必要があると書いています。
aleksiy123 · Hacker Newsnews.ycombinator.com
“Loving the collage of screenshots where every one screams of being AI generated”
どれもこれも「AIが作りました」と叫んでいるスクリーンショットのコラージュ、実にいいね
v1のREADMEにある作例画面の一覧を皮肉ったものです。作例のうちCold SnapとMend Assemblyの二つだけは良いと言っています。
loopmonster · Hacker Newsnews.ycombinator.com

始め方

Claude Code、Codex、Cursor、OpenCodeなどのコーディングエージェントに、下の依頼を貼り付けるだけです。無料で、APIキーも要りません。ブラウザでの検査まで行うにはパソコンにChromeが必要で、エージェントからpuppeteer-coreのインストール許可を求められることがあります。

はじめの依頼
Hallmarkというデザインスキルを試してみたい。この記事を参考にして: https://www.working-ref.com/ja/reference/hallmark-v2-2026-10 まだ入っていなければ npx skills add nutlope/hallmark -g でインストールして。そのあと、私の関心と今のこのプロジェクトを見て、Hallmarkで試せそうなことを三つ提案して（例：今あるページの点検だけ受ける、リンクと入力欄はそのままに作り直す、新しいランディングページを作る）。私が一つ選んだらすぐ始めて、選ぶものがなければ、このプロジェクトのページの点検（audit）から始めて。

このリファレンスを共有

毎週1回・無料

このリファレンスは役に立ちましたか？

毎週あふれるAIニュースから
BEST 3つだけ、受信箱へ

Work Smarter with AI

購読完了次号から受信箱でお会いしましょう。