ランディングページデザインスキル · ai-design-skills

ブックマーク1万5千件を集めたLPの数々、制作に使ったAIスキルをデザイナーが無料公開

Claude CodeやCursorなどのコーディングAIにこのスキルを入れてランディングページを頼むと、AIはまず訪問者にしてほしい行動をひとつ尋ね、ページ構成・コピー・FAQ・デザインの値を決めてから一から作ってくれます。ドバイを拠点にする経験8年のプロダクトデザイナー、Elayaさんが無料で公開したスキルです。このスキルで自社サービスのホームページを作り直して公開した事例を集めました。

2026年10月26日·事例 3件

Elaya — 公開投稿、2026-10-24（2026-10-26時点：表示530,942 · いいね9,255 · ブックマーク15,082）

elayadesign/ai-design-skills README（MITライセンス、使い方）

ai-design-skills コミット履歴（2026-10-26 a2735a3 出典表記）

10月24日、ドバイのプロダクトデザイナーElayaさんが、ランディングページを何枚もつなげた15秒の動画をXに投稿しました。投稿文は「I designed all of these landing pages in the last two months, using @higgsfield, Claude, and Cursor with my custom AI designer skill. The skill is open source（この2か月で、ここにあるランディングページはすべてHiggsfield、Claude、Cursorと自作のAIデザイナースキルでデザインしました。スキルはオープンソースです）」というものです。10月26日までに表示回数は53万回を超え、あとで見返すための保存（ブックマーク1万5千件）が「いいね」（9千件）を上回りました。このスキルで自社サービスのホームページを作り直して公開した創業者3人の事例を集めました。1人は公開投稿の4日前の10月20日、2人は公開投稿の翌日の10月25日です。ランディングページ用のスキル自体は、7月から同じリポジトリで公開されていました。

このスキルを試した日本のソフトウェアエンジニアnoguさんは、こう書いています。「素のAIエージェントでもLP自体の完成はできると思うけど、原理原則に沿って作成することができる」

Elayaさんは経験8年のプロダクトデザイナーで、自身のプロダクトslopscan.coを開発しながら、デザインの依頼も受けています。スキルはMITライセンスで無料公開されており、これで作ったページを販売しても出典を書く必要はありません。公開直後、別のデザインスキルtaste-skillの作者Leon Linさんがクレジット表記を求め、Elayaさんは10月26日に出典を明記し、重なっていた部分を書き直しました。

このスキルは、AIにコードを書く前にまず質問させます。最初の質問は「What is the ONE primary action?（訪問者にしてもらう、ただひとつの主要な行動は何ですか？）」です。答えを受け取ると、AIはページの概要、ファーストビューのコピー、メリット、利用の流れ、FAQ、検索対策（SEO/AEO）、レイアウト案を先に出し、デザイナーが決めておいたフォント・余白・角丸・モーションの値でページを組み立てます。

Reference 01湾岸地域の企業向けAI財務ツールHysaabを作ったWahaj Siddiquiさん · 自社プロダクトのホームページ

AI財務ツールのホームページに、3ステップを動く図で見せる利用の流れとFAQ 8問が加わった

Wahajさんはこのリポジトリのスキルを使って、Hysaabの英語版ホームページを作り直しました。スキルに入っているフォントと色の値は自社ブランドの値に差し替え、構成・コピー・余白・角丸・モーションのルールを適用したとPRに書いています。

新しいホームでは、Request accessを唯一のメインボタンにし、そのすぐ横にBook a demoを置きました。新設のHow it worksでは3つのステップそれぞれに実際に動く図が付き、4枚の成果カードは画面に入ったときだけ動いて、画面の外に出ると止まります。スクロールすると単語がひとつずつ点灯するタグラインと、サイトにすでに書かれている内容で答えたFAQ 8問も加わりました。

10月25日の同じ作業で、アラビア語版のホームページも同じデザインに切り替えています。

Hysaabのホームページのファーストビュー。「Your finance team. Without changing your accounting system.」という見出しの下にRequest accessボタンとBook a demoリンク、Xero・Zoho Books・QuickBooks・Odoo・Wafeq・ERPNextの連携サービスの帯、右側に月次決算カレンダーのパネル — hysaab.aiのファーストビュー、2026年10月26日のキャプチャです。右側パネルの数字は、ページ上で例として示されている値です。

Reference 02議事録アプリBreezeを作ったJulianchooさん · 自社プロダクトのホームページ

議事録アプリのホームページから守れない「録音の聞き直し」の約束が消え、ボタンひとつで始まるページに

Julianchooさんは、landing-page-designをプロジェクトの.claude/skills/フォルダに入れる前に、まず中身を読みました。「plain markdown with no scripts and no hidden content（スクリプトも隠れた内容もない、ただのMarkdown）」だったと書き、スキルを適用する範囲は公開ホームページだけに絞りました。

新しいホームは、ファーストビューにGoogleログインから始まる「Record your first meeting」ボタンをひとつだけ置き、課題と解決策、5つのメリット、録音から要約までの3ステップ、プライバシー・デバイス・音声の扱いに関するFAQ 11問、試す前の不安を和らげる案内、最後のCTAボタンの順に続きます。

以前のホームは「音声を聞き直せる」と約束していましたが、サーバーにアップロードされた音声は文字起こしが終わると削除されます。新しいコピーは、この事実をそのまま書きました。スマートフォン幅（390px）とデスクトップ幅（1440px）、ライトテーマとダークテーマのどちらでも画面が横にはみ出さず、コンソールエラーもなかったとのことです。

Breezeのホームページのファーストビュー。クリーム色の背景に「Stay in the conversation. Breeze writes the notes.」という見出し、「Record your first meeting」ボタンがひとつ、「No bot joins your call. Breeze listens from its own tab.」という文言 — breeze-ai-lime.vercel.appのファーストビュー、2026年10月26日のキャプチャです。

Reference 03アラビア語・英語のAI履歴書サービスSeera AIを作ったNasserさん · 自社プロダクトのホームページ

アラビア語の履歴書サービスのホームページから、存在しなかった「レビュー53件・4.8点」が消え、2言語のFAQが加わった

NasserさんがClaude Codeに任せて作ったPRによると、元のホームにはFAQも、大きく見せるタグラインも、本文へのスキップリンクもありませんでした。英語ページのタイトルは旧名のCVCraftのままで、検索向けの構造化データには、実際には存在しない「レビュー53件、4.8点」の評価が入っていました。

変更後は、ファーストビューの見出しの1行目が白からグレーへと薄れ、金色の2行目はそのまま残ります。最後のCTAボタンの前にアラビア語・英語のFAQ 6問が加わり、キーボードで操作する人のための本文スキップリンクも入りました。英語のブランド名はSeera AIに変え、偽の評価は削除しました。

スキルのルールをすべて守ったわけではありません。「I skipped the skill rules that clash with Seera glass on purpose（Seeraのガラス調デザインとぶつかるスキルのルールは、あえて外した）」と書いています。動く背景とReadex Proフォントは残し、スキルが決めたフラットな背景・フォント・余白・角丸の値は使いませんでした。

Seera AIのホームページ、アラビア語版のファーストビュー。濃い緑の背景に「سيرتك الذاتية الاحترافية، جاهزة في دقائق.」という見出し、履歴書エディタのパネル、CTAボタン — cvcrft.comのアラビア語版ファーストビュー、2026年10月26日のキャプチャです。見出しは「あなたのプロフェッショナルな履歴書が、数分で完成」という意味です。

みんなの反応

よかったという声

“craft tells 14→0 ... the judge picked this branch on all three.”
作り込みの粗 14件→0件……判定役は3回ともこのブランチを選んだ。
Claude Code向けのツール集gstackに「Absorb all the interesting parts of this design skill（このデザインスキルの面白い部分を全部取り込んで）」と依頼して/design-htmlに合わせて組み込んだあと、3つのブリーフで既存版とブラインド比較した結果です。
Garry Tan · gstack管理者 · GitHubgithub.com
“The skill arm had all six. The control had none.”
スキルありの側には6つすべてが入っていた。対照群にはひとつもなかった。
同じブリーフで自社プロダクトのランディングページを、スキルありとスキルなしで1回ずつ作り、デザイナーが決めたモーションカーブ・見出しのグラデーション・本文幅など6つの値が入っているかを数えた実験です。自社プロダクトを紹介する記事です。
ThakiCloud · 技術ブログthakicloud.com
“Clean work. The hero spacing beats most hand-built pages I see.”
きれいな仕事。ヒーローの余白は、私が目にする手作りのページの大半より優れている。
公開動画を見てのリプライです。
PrinceOwems · Webデザイナー · Xx.com
“Another design-related skill, looks pretty cool.”
またデザイン系のスキルが出た。かなりよさそう。
Povilas Korop · AIコーディング講師 · Xx.com

物足りなかったという声

“the skill does not control facts.”
スキルは事実までは制御しない。
スキルを入れた側のページに、ブリーフになかった「9m 41s」「$38.42」といった数字が入っていたという指摘です。
ThakiCloud · 技術ブログthakicloud.com
“does the skill need a lot of planning and direction? it js gave me back a generic tech look for a perfume store”
このスキルって、計画や方向性をたくさん与えないといけないの？香水店を頼んだのに、ありがちなテック系の見た目を返してきただけだった。
simpcns · Xx.com
“Not carried over because they conflict with gstack's rules: fixed font lists, gradient hero text, fixed palettes and spacing, mandatory scroll reveals, one designer's signature nav.”
gstackのルールと衝突するため取り込まなかったもの：固定のフォントリスト、グラデーションのヒーロー見出し、固定のカラーパレットと余白、必須のスクロール表示演出、一人のデザイナーのシグネチャーナビ。
Garry Tan · gstack管理者 · GitHubgithub.com
“The skill's aesthetic (light, minimal editorial) is tuned to one direction”
このスキルの美学（明るくミニマルなエディトリアル）は、ひとつの方向に合わせて調整されている。
ThakiCloud · 技術ブログthakicloud.com
“What used to be a leet landing page 2 months ago looks like ai slop rn”
2か月前ならイケてたランディングページが、今はAIが量産した粗悪品に見える。
公開投稿へのリプライです。
The Web Tailor(@r3ttila) · Xx.com

始め方

Claude Code、Cursor、Codexなどのコーディングエージェントに、下の依頼を貼り付けるだけです。ターミナルを使わない場合は、Claude.aiのプロジェクトにSKILL.mdをアップロードして「follow this」と伝えます。完成した画面を短い紹介動画（MP4・GIF）としても書き出したいなら、同じリポジトリのdesign-to-motionも一緒に入れるよう頼みましょう。動画の書き出しにはパソコンにffmpegが、Figmaのフレームを使うにはFigmaの個人アクセストークンが必要です。

はじめの依頼
この記事を参考にしてください: https://www.working-ref.com/ja/reference/ai-design-skills-2026-10 GitHubのelayadesign/ai-design-skillsリポジトリにあるlanding-page-designスキルを、このプロジェクトに入れてください（Claude Codeなら.claude/skills/、CodexならAGENTS.md、Cursorなら.cursor/rules/）。入れる前に、SKILL.mdにスクリプトや隠れた指示がないかを先に確認してください。そのあと私のサービスを見て、このスキルで試す価値のあることを3つ提案してください。私がひとつ選んだら、スキルの質問をまとめて聞いてから、すぐに始めてください。選ぶものがなければ、ホームページのファーストビューから作り直してください。フォントと色は、いま使っている私のブランドの値をそのまま使ってください。

このリファレンスを共有

毎週1回・無料

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

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

Work Smarter with AI

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