Frontend Design Pro
「AIっぽい量産デザイン」を避け、独創的かつ実用的なフロントエンドUI（HTML/CSS/JS・React・Vue）を生成する公式 skill。
BtoB SaaS契約管理ダッシュボード(React+Tailwind+shadcn/ui)のUI設計と実装
React+TypeScript+Tailwind+shadcn/ui ダッシュボード(サマリーカード3+一覧テーブル+期限アラート+アクション)を含むレスポンシブ実装
情報密度の調整(サマリーは大きく/詳細は折り畳む)とアクセシビリティ(キーボード操作・色のコントラスト比 4.5:1以上)を両立した設計を返してくる
頼んでいないのに『dark mode 対応』『スマホ表示時のテーブル折り畳み挙動』『フォーカス可視化のリングカラー』まで実装に含めてくれた
デザインシステムが指定されていない場合、shadcn/ui のデフォルトに引っ張られがち。組織独自のトークンを使いたい場合は事前に共有が必要
BtoB SaaSのフロントエンドエンジニアで、デザイナー不在のチーム
B2Cコンシューマー向けで強いブランドアイデンティティが必要な場合(独自感より定型に寄りがち)
Figmaで設計→コード起こしの2ステップが、これは『コードが直接出る』。デザインフェーズをスキップして仮で前に進めるのに最適
どんな skill か
「Create distinctive, production-grade frontend interfaces」を目的とした Anthropic 公式 skill。汎用的な AI 美学に陥らない、本番品質のフロントエンドコードとデザインを生成します。
どんな人に向くか
- ランディングページ・ダッシュボードを質高く作りたい人
- React コンポーネント開発
- HTML / CSS レイアウト設計とスタイリング
どんな人に向かないか
- ノーコードで完結させたい非エンジニア
- フレームワーク選択肢が固定されている既存プロジェクトへの追加
ライセンス
Apache-2.0。商用利用 OK。
⚠️ このスキルは運営による実機検証はまだ行っていません。掲載は実在確認のみ済み。
非商用。個人利用・社内利用は可能ですが、再配布・販売は禁止されています。
公式ライセンスを確認 →