月額 $9.99 ですべての Premium Skill にアクセス。いつでも解約できます。プランを見る
ランディングページとプロダクトサイト · ポートフォリオサイトと個人サイト · ネットショップと管理画面

AI エージェント向けのフロントエンドデザイン Skills

エージェントが動く HTML にするフロントエンドデザインのテンプレート:ランディングページ、ポートフォリオ、ダッシュボード を丸ごと、あるいは Hero、料金、お客様の声のセクションだけでも。

対応エージェントClaude CodeCodexCursorGemini CLIGitHub CopilotOpenCodeKimi CodeOpenClaw
Web無料
Basalt 開発者ポートフォリオ
980

ほぼ黒の背景にシアンのアクセントを 1 色、すっきりした Geist 書体で仕上げた、個人開発者向けサイト一式です。控えめで自覚的な見出しのホームページに加え、描き起こしたプロダクト画面付きのケーススタディ、記事全文、ノート付きの講演、Uses ページ、キャリアの節目を載せた About ページ、レジュメ、お問い合わせフォームを備えています。作品・執筆・経歴を、リンクの羅列ではなく一貫した 1 つの仕事として見せたい開発者に向いています。

フロントエンドデザイン Skills でできること

ここにあるどの Skill も、最後はブラウザで開けるファイルで完成します。

モックアップではなく、動く HTML

ファイルを開いて、クリックして確かめて、デプロイ。間にデザインツールは要りません。

サイト全体でも、セクション単体でも

複数ページのサイト、または既存のページに追加できる Hero、お客様の声、グラフのセクション 1 つ。

最初からレスポンシブ

レイアウトは、納品前にデスクトップとモバイルの幅で検証済みです。

Skill で Web ページを作る方法

Claude Code、Codex、Cursor で 3 ステップ。デザインアプリは不要です。

  1. 1

    インストール用 Prompt を貼り付ける

    インストール用 Prompt をエージェントにコピーするか、下のコマンドを実行してください。Skill はエージェントの skills フォルダに入ります。

    npx skillry-cli@latest install bs-basalt-dev-portfolio
  2. 2

    スラッシュで呼び出す

    スラッシュと Skill 名を入力し、続けてやりたいことをふだんの言葉で伝えます。

    /bs-basalt-dev-portfolio このブリーフ、コピー、ブランドキットからレスポンシブなランディングページを作ってください。
  3. 3

    レビューして届ける

    作られたファイルを開き、同じチャットで修正を依頼し、公開または引き渡します。

    index.html

Prompt ではなく Web ページ Skill を使う理由は?

Prompt でもページは作れます。Web Skill は、製品に基づく内容、レスポンシブなインタラクション、検証、保守しやすい納品を加えます。

比較項目ふつうの PromptSkill
コンテンツよくあるテンプレートに仮のコピーを流し込む実際の対象者、製品情報、根拠をもとにページを組み立てる
インタラクション見た目だけそれらしいボタンやタブを描く実際の状態、ナビゲーション、エラー処理を組み込む
引き継ぎ完成しているように見えるコードを返すあなたのスタックに従い、依存関係を明記し、スマートフォンとキーボードでの操作を確認する

フロントエンドデザイン Skill とは?

フロントエンドデザインの Skill は、AI エージェントが Web ページを作るために従う指示のセットです。コピー、画像、製品情報を渡せば、PC でもスマートフォンでもきれいに表示されるページを作り、開いて編集し、そのまま公開できるコードとして納品します。

フロントエンドデザイン Skill で作れるもの

  • 01ローンチやキャンペーンのランディングページコピーと画像を、明確なセクションと登録・購入ボタンのあるページにします。
  • 02クリックできるプロトタイプ実際の画面とボタンをモックアップし、開発前にチームが製品を試せるようにします。
  • 03ダッシュボード数値、表、グラフを、どの画面でも読みやすくレイアウトします。
  • 04再利用できるページパーツボタン、カード、レイアウトを 1 つのスタイルで統一し、新しいページも既存のページと揃います。

フロントエンドデザイン Skill の選び方

  1. 1製品に合うスタイルを選ぶSaaS、ポートフォリオ、ショップ、イベントページ。作るものに合ったルックを選びましょう。
  2. 2ライブサンプルを試すどの Skill ページにも、デスクトップとスマートフォンでクリックして試せるサンプルサイトがあります。
  3. 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 が約束する書き出しやオフライン機能も確認しましょう。

ほかの出力タイプを見る

次の Web ページにぴったりの Skill を見つけましょう

ランディングページ、サイト、インタラクティブなページを動く HTML で。

すべての Skill を見る