モックアップではなく、動く HTML
ファイルを開いて、クリックして確かめて、デプロイ。間にデザインツールは要りません。
ランディングページとプロダクトサイト · ポートフォリオサイトと個人サイト · ネットショップと管理画面
AI エージェント向けのフロントエンドデザイン Skills
エージェントが動く HTML にするフロントエンドデザインのテンプレート：ランディングページ、ポートフォリオ、ダッシュボード を丸ごと、あるいは Hero、料金、お客様の声のセクションだけでも。
対応エージェント
まずは Web ページ Skill を 1 つ選びましょう
フロントエンドデザイン Skills でできること
ここにあるどの Skill も、最後はブラウザで開けるファイルで完成します。
サイト全体でも、セクション単体でも
複数ページのサイト、または既存のページに追加できる Hero、お客様の声、グラフのセクション 1 つ。
最初からレスポンシブ
レイアウトは、納品前にデスクトップとモバイルの幅で検証済みです。
役割に合った Web ページ Skills を探す
各役割のページで、その仕事に最も合う Skill を選んでいます。
Skill で Web ページを作る方法
Claude Code、Codex、Cursor で 3 ステップ。デザインアプリは不要です。
- 1
インストール用 Prompt を貼り付ける
インストール用 Prompt をエージェントにコピーするか、下のコマンドを実行してください。Skill はエージェントの skills フォルダに入ります。
npx skillry-cli@latest install bs-interactive-system-map - 2
スラッシュで呼び出す
スラッシュと Skill 名を入力し、続けてやりたいことをふだんの言葉で伝えます。
/bs-interactive-system-map このブリーフ、コピー、ブランドキットからレスポンシブなランディングページを作ってください。 - 3
レビューして届ける
作られたファイルを開き、同じチャットで修正を依頼し、公開または引き渡します。
index.html
Prompt ではなく Web ページ Skill を使う理由は？
Prompt でもページは作れます。Web Skill は、製品に基づく内容、レスポンシブなインタラクション、検証、保守しやすい納品を加えます。
| 比較項目 | ふつうの Prompt | Skill |
|---|---|---|
| コンテンツ | よくあるテンプレートに仮のコピーを流し込む | 実際の対象者、製品情報、根拠をもとにページを組み立てる |
| インタラクション | 見た目だけそれらしいボタンやタブを描く | 実際の状態、ナビゲーション、エラー処理を組み込む |
| 引き継ぎ | 完成しているように見えるコードを返す | あなたのスタックに従い、依存関係を明記し、スマートフォンとキーボードでの操作を確認する |
フロントエンドデザイン Skill で作れるもの
- 01ローンチやキャンペーンのランディングページコピーと画像を、明確なセクションと登録・購入ボタンのあるページにします。
- 02クリックできるプロトタイプ実際の画面とボタンをモックアップし、開発前にチームが製品を試せるようにします。
- 03ダッシュボード数値、表、グラフを、どの画面でも読みやすくレイアウトします。
- 04再利用できるページパーツボタン、カード、レイアウトを 1 つのスタイルで統一し、新しいページも既存のページと揃います。
フロントエンドデザイン Skill の選び方
- 1製品に合うスタイルを選ぶSaaS、ポートフォリオ、ショップ、イベントページ。作るものに合ったルックを選びましょう。
- 2ライブサンプルを試すどの Skill ページにも、デスクトップとスマートフォンでクリックして試せるサンプルサイトがあります。
- 3ダウンロードして試すエージェントにインストールし、自分のコンテンツでページを 1 つ作ってみてください。数分で判断できます。
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 がプロジェクトに合わせると明記している場合は可能です。そうでなければ単体のページが納品されるので、組み込みはご自身で計画してください。
編集可能な HTML がもらえますか？それともプレビューだけですか？
編集可能なコードです。HTML ファイルはエージェントが書き出し、具体的なファイル、素材、実行手順は詳細ページの You get に記載されています。
決済とアナリティクスは接続されていますか？
詳細ページに記載がない限り、接続されていません。デザイン内の購入ボタンやグラフは、ご自身のサービスに接続するまではただの UI です。
ページを公開する前に何を確認すべきですか？
すべてのコントロールをクリックし、デスクトップ幅とスマートフォン幅、キーボードのみ、視差効果を減らす設定をオンにした状態でページを試してください。長いテキスト、エラー状態、Skill が約束する書き出しやオフライン機能も確認しましょう。