Skillset
デザイン概要
Skillset は、アイコンカードではなく、コード、文章、調査における使用前後の出力を通して、開発者がエージェントSkillを発見できるようにします。検索・絞り込みを行い、エージェントを切り替えて対応するインストールコマンドを確認できます。
検証記録
確認済み最終スクリーンショットと録画から復元したフレームで、コード、文章、ルーティング、調査の具体的な使用前後の成果と、それに対応する検索、フィルター、エージェント切り替え、コピー確認の状態を確認しました。
検証の範囲レビュアーはページを再実行せず、表示されているテストやインストールコマンドを実行せず、システムのクリップボードも確認していません。コピーの検証はインターフェースのフィードバックに限られます。
プロンプト
AIエージェントSkillのコレクションウェブサイト(1440×900を基準とし、幅390ピクセルまでレスポンシブ対応)。英語のインターフェースとし、開発者が Claude Code や Codex などのエージェント向けSkillを閲覧、検索、インストールできるようにする。各Skillには用途、対応エージェント、インストールコマンド、バージョン、インストール数、エージェントがそれを使って生成する成果物の例を表示する。Skill名と作者は架空とする。エージェント名はロゴを使わずテキストだけで示す。
創造性を最優先する。アイコンと角丸カードのグリッドで画面を埋めてはいけない。中核は、閲覧が便利なツールを発見する体験になること。Skillを開くと、使用前後のエージェント出力を比較でき、自分のエージェントを選ぶと対応するインストールコマンドをワンクリックでコピーできる。
ホームページでの発見、検索とフィルターの結果、個別Skillの詳細とインストールの3状態をデザインする。
中国語の元のプロンプトを見る
一个 AI Agent Skill 的合集网站(1440×900 起,响应式到 390 宽),界面用英文:开发者在这里浏览、搜索和安装给 Claude Code、Codex 等 Agent 用的 Skill。每个 Skill 有用途、支持哪些 Agent、安装命令、版本、安装量,以及用了它之后 Agent 做出来的东西。Skill 名和作者虚构,Agent 名称只用文字,不放对方标志。
有创意是第一要求,不要做成一屏图标加圆角卡片的网格。核心:逛的时候像在发现好用的工具;打开一个 Skill,能看到 Agent 用它之前和之后的产出对比,选好自己的 Agent 后一键复制对应的安装命令。
设计三个状态:首页发现、搜索和筛选结果、单个 Skill 详情与安装。
ライブデモを開く