1 つの Prompt からランディングページを
製品について説明するだけ。Skill には Hero、機能グリッド、料金、FAQ がすでに用意されているので、エージェントは機能するレイアウトにあなたのコピーを書き込みます。
ランディングページやサイト全体 · 今のサイトに追加するセクション · ポートフォリオや履歴書
AI エージェント向けのホームページテンプレート Skills
各 Skill は検証済みの Web サイトデザイン 1 つ分です。インストールして製品について説明すれば、Claude Code、Codex、Cursor がランディングページ、ポートフォリオ、サイト全体を動く HTML として作ります。
対応エージェント
まずは Web デザイン Skill を 1 つ選びましょう
Web デザイン Skill がエージェントにもたらすもの
ここにある Claude デザイン Skill はどれも、指示、レイアウトの参考資料、チェック項目のフォルダです。ページを依頼するとエージェントが読み込むので、デザイン上の判断はすでに済んでいます。
一貫性を保つテンプレート
ポートフォリオ、SaaS サイト、オンラインストアで、追加するどのページも同じ書体、余白、モーションを保ちます。
コードとして納品されるフロントエンドデザイン
毎回、開いて編集し、デプロイできる HTML ファイルで完成します。Claude Code、Codex、Cursor はすべて同じ SKILL.md を読み込みます。
役割に合った Web デザイン Skills を探す
各役割のページで、その仕事に最も合う Skill を選んでいます。
Skill で Web サイトを作る方法
Claude Code、Codex、Cursor で 3 ステップ。デザインアプリは不要です。
- 1
インストール用 Prompt を貼り付ける
インストール用 Prompt をエージェントにコピーするか、下のコマンドを実行してください。Skill はエージェントの skills フォルダに入ります。
npx skillry-cli@latest install bs-testimonial-masonry-wall - 2
スラッシュで呼び出す
スラッシュと Skill 名を入力し、続けてやりたいことをふだんの言葉で伝えます。
/bs-testimonial-masonry-wall このブリーフ、コピー、ブランドキットからレスポンシブなランディングページを作ってください。 - 3
レビューして届ける
作られたファイルを開き、同じチャットで修正を依頼し、公開または引き渡します。
index.html
Prompt ではなく Web デザイン Skill を使う理由は？
| 比較項目 | ふつうの Prompt | Skill |
|---|---|---|
| レイアウト | 実行のたびに作り直される | 検証済みの Hero、グリッド、フッター |
| タイポグラフィ | デフォルトのシステムフォント | 選び抜いた文字サイズの階層とフォントの組み合わせ |
| 一貫性 | ページごとに見た目がばらばら | すべてのページが 1 つのシステムに従う |
| 出力 | モデルが書いたものがそのまま | チェック済みで、すぐに開ける HTML ファイル |
1 つのプランで、すべての Skill を
このページのすべての Skill と、今後追加されるすべての Skill をインストールできます。いつでも解約できます。
いつでも解約可能
月額
$9.99 / 月
Premium のすべてにアクセス、月払い。
- すべての Premium Skill にアクセス
- Web または CLI からインストール
- ブラウザ認可による安全な CLI アクセス
- Skill の継続的なアップデート
- 新しい Premium Skill も追加料金なし
- 必要なときにいつでも解約
年間 34% お得
いちばん人気年額
$79 / 年
Premium のすべてに、お得な年額料金でアクセス。
- すべての Premium Skill にアクセス
- Web または CLI からインストール
- ブラウザ認可による安全な CLI アクセス
- Skill の継続的なアップデート
- 新しい Premium Skill も追加料金なし
- 必要なときにいつでも解約
一度の支払い・創設メンバー価格
創設メンバー特典Founding Lifetime
$169 買い切り
創設メンバー価格。ライブラリの拡充に合わせて値上げ予定です。
- すべての Premium Skill にアクセス
- Web または CLI からインストール
- ブラウザ認可による安全な CLI アクセス
- Skill の継続的なアップデート
- 新しい Premium Skill も追加料金なし
- サブスクリプションも更新料金もなし
いつでも解約できます。お支払い済みの料金は 返金できません.
Web デザイン Skills よくある質問
Web デザイン Skill とは？
SKILL.md、レイアウトの参考資料、チェック項目を含むフォルダで、実績のある 1 つの Web サイトデザインを AI エージェントに教えます。ページを依頼すると、エージェントが自動で読み込みます。
Claude Code は Skill を使って Web サイトを作れますか？
はい。Skill を Claude Code にインストールしてサイトについて説明すると、Skill のレイアウトに沿って HTML を書きます。Codex と Cursor でも同じように動きます。
HTML、React、Figma ファイルのどれがもらえますか？
ほとんどの Web デザイン Skill は、動く HTML ファイルを納品します。詳細ページに Next.js やコンポーネントでの出力を記載しているものもありますが、Figma ファイルを納品するものはありません。
Web サイトのテンプレートは無料ですか？
一部は無料です。無料の Skill には Free のラベルが付いています。それ以外は Pro に含まれるか、1 つずつ購入できます。