메뉴
フロントエンドUIデザインを洗練された独自性のあるスタイルで生成します。ランディングページ、ダッシュボード、Webアプリケーションのデザイン、UIコンポーネント作成時に使用してください。「AIっぽい」汎用デザインを避け、プロフェッショナルで記憶に残るUIを実現します。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
認証実装、ユーザー入力処理、シークレット管理、APIエンドポイント作成、決済機能等のセキュリティ関連作業時に使用。包括的なセキュリティチェックリストとパターンを提供。
アプリケーションアーキテクチャ設計。DDD、クリーンアーキテクチャ、マイクロサービス、イベント駆動設計時に使用。
指定されたコードまたはファイルに対して包括的なコードレビューを実施する。
バックエンド開発パターン。API設計、データベース最適化、認証、キャッシング、エラーハンドリングに使用。
フロントエンド開発パターン。React、Next.js、状態管理、パフォーマンス最適化、UIベストプラクティスに使用。
コーディング標準とベストプラクティス。TypeScript、JavaScript、React、Node.js開発の品質基準に使用。
| name | frontend-design-system |
| description | フロントエンドUIデザインを洗練された独自性のあるスタイルで生成します。ランディングページ、ダッシュボード、Webアプリケーションのデザイン、UIコンポーネント作成時に使用してください。「AIっぽい」汎用デザインを避け、プロフェッショナルで記憶に残るUIを実現します。 |
| user-invocable | true |
このスキルは、AIが生成しがちな「汎用的で無個性なデザイン」を避け、洗練された独自性のあるフロントエンドUIを作成するためのガイドラインです。
以下のパターンは「AIスロップ美学」と呼ばれ、避けるべきです：
推奨フォントの組み合わせ例：
| ヘッダー | ボディ | 特徴 |
|---|---|---|
| Playfair Display | Source Sans Pro | クラシック＆モダン |
| Space Grotesk | Inter | テック＆ミニマル |
| Fraunces | Work Sans | エレガント＆読みやすい |
| DM Serif Display | DM Sans | 統一感のある対比 |
| Syne | Outfit | 大胆＆現代的 |
タイポグラフィ原則：
カラーパレット構築原則：
プライマリ：ブランドアイデンティティを表す主色
セカンダリ：プライマリを補完する色（補色または類似色）
アクセント：CTAやハイライトに使用する注目色
ニュートラル：背景やテキストに使用するグレー系
独自性を出すテクニック：
差別化するレイアウトパターン：
効果的なアニメーション原則：
高影響度の瞬間に集中
タイミングの指針
イージング関数
/* 推奨イージング */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
背景デザインのアイデア：
進捗チェックリスト：
詳細なテーマ例については以下を参照：
フォントペアリング即決リスト：
カラー参考：