frontend-design-system

Name: frontend-design-system
Author: oikon48

68stars6forks

How to install frontend-design-system?

oikon48/cc-frontend-skills/frontend-design-system

$npx -y skills add oikon48/cc-frontend-skills --skill frontend-design-system

Installs into the current project.

Summary

フロントエンドUIデザインを洗練された独自性のあるスタイルで生成します。ランディングページ、ダッシュボード、Webアプリケーションのデザイン、UIコンポーネント作成時に使用してください。「AIっぽい」汎用デザインを避け、プロフェッショナルで記憶に残るUIを実現します。

Files · 1

View on GitHub

SKILL.md

1	# Frontend Design System
2
3	## Overview
4
5	このスキルは、AIが生成しがちな「汎用的で無個性なデザイン」を避け、洗練された独自性のあるフロントエンドUIを作成するためのガイドラインです。
6
7	## Anti-Patterns（避けるべきパターン）
8
9	以下のパターンは「AIスロップ美学」と呼ばれ、避けるべきです：
10
11	### Typography（タイポグラフィ）
12
13	- ❌ Inter, Roboto, Open Sans などの過度に使用されたフォント
14	- ❌ すべてのテキストに同じフォントファミリーを使用
15	- ❌ 標準的なフォントウェイトのみの使用
16
17	### Colors（カラー）
18
19	- ❌ 紫からピンクへのグラデーション
20	- ❌ 汎用的な青/緑のアクセントカラー
21	- ❌ 彩度の高すぎるネオンカラー
22	- ❌ デフォルトのTailwindカラーパレットそのまま
23
24	### Layout（レイアウト）
25
26	- ❌ 左テキスト・右画像の標準ヒーローセクション
27	- ❌ 3カラムの均等グリッド機能セクション
28	- ❌ 中央揃えの単調なカードレイアウト
29
30	### Effects（エフェクト）
31
32	- ❌ 過度なぼかし効果（blur）
33	- ❌ 全要素へのアニメーション適用
34	- ❌ グラスモーフィズムの乱用
35
36	## Best Practices（推奨パターン）
37
38	### Typography
39
40	推奨フォントの組み合わせ例：
41
42	\| ヘッダー \| ボディ \| 特徴 \|
43	\| ---------------- \| --------------- \| ---------------------- \|
44	\| Playfair Display \| Source Sans Pro \| クラシック＆モダン \|
45	\| Space Grotesk \| Inter \| テック＆ミニマル \|
46	\| Fraunces \| Work Sans \| エレガント＆読みやすい \|
47	\| DM Serif Display \| DM Sans \| 統一感のある対比 \|
48	\| Syne \| Outfit \| 大胆＆現代的 \|
49
50	タイポグラフィ原則：
51
52	- 見出しと本文で異なるフォントファミリーを使用（セリフ×サンセリフの組み合わせ）
53	- フォントウェイトのバリエーションを活用（300, 400, 600, 800）
54	- レタースペーシングで視覚的階層を作成
55
56	### Colors
57
58	カラーパレット構築原則：
59
60	```
61	プライマリ：ブランドアイデンティティを表す主色
62	セカンダリ：プライマリを補完する色（補色または類似色）
63	アクセント：CTAやハイライトに使用する注目色
64	ニュートラル：背景やテキストに使用するグレー系
65	```
66
67	独自性を出すテクニック：
68
69	- HSL調整で微妙な色相のずれを作る
70	- ダークモードでは彩度を下げ、明度を調整
71	- セマンティックカラー（success, warning, error）もブランドに合わせて調整
72
73	### Layout
74
75	差別化するレイアウトパターン：
76
77	- 非対称グリッド（5:7, 2:3比率）
78	- オーバーラップ要素とネガティブマージン
79	- 斜めのセクション区切り
80	- ベントグリッドと有機的な配置
81	- 大胆な余白（ホワイトスペース）の活用
82
83	### Animation & Motion
84
85	効果的なアニメーション原則：
86
87	1. 高影響度の瞬間に集中
88	- ページロード時の単一の調整されたアニメーション
89	- ユーザーアクション（クリック、ホバー）への即座のフィードバック
90	- 状態変化（成功、エラー）の視覚的表現
91
92	2. タイミングの指針
93	- マイクロインタラクション: 150-300ms
94	- ページ遷移: 300-500ms
95	- 複雑なアニメーション: 500-800ms
96
97	3. イージング関数
98	```css
99	/* 推奨イージング */
100	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
101	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
102	--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
103	```
104
105	### Background & Texture
106
107	背景デザインのアイデア：
108
109	- 微妙なノイズテクスチャ
110	- 幾何学的パターン（控えめに）
111	- グラデーションメッシュ
112	- 抽象的なブロブ/シェイプ
113	- パララックス効果のある背景レイヤー
114
115	## Implementation Checklist
116
117	進捗チェックリスト：
118
119	- [ ] タイポグラフィ：見出しと本文に異なるフォントを選定
120	- [ ] カラーパレット：5色以上の調和したパレットを作成
121	- [ ] レイアウト：非対称または独自のグリッドシステムを検討
122	- [ ] アニメーション：1-2の高影響度アニメーションを実装
123	- [ ] 背景：テクスチャまたは独自の背景要素を追加
124	- [ ] 一貫性：すべての要素がデザインシステムに従っているか確認
125
126	## Theme Examples
127
128	詳細なテーマ例については以下を参照：
129
130	- [テーマ例集](themes.md)
131	- [コンポーネントリファレンス](components.md)
132
133	## Quick Reference
134
135	フォントペアリング即決リスト：
136
137	1. モダン・クリーン → Space Grotesk + Inter
138	2. エレガント・高級 → Playfair Display + Lato
139	3. テック・スタートアップ → Syne + Outfit
140	4. 温かみ・親しみやすい → Fraunces + Work Sans
141	5. 大胆・クリエイティブ → DM Serif Display + DM Sans
142
143	カラー参考：
144
145	- Coolors.co で調和したパレット生成
146	- Realtime Colors でライブプレビュー
147	- Happy Hues でインスピレーション

People who liked this also viewed

6 picks

Type

frontend-design-system

68stars6forks

View on GitHub

How to install frontend-design-system?

oikon48/cc-frontend-skills/frontend-design-system

$npx -y skills add oikon48/cc-frontend-skills --skill frontend-design-system

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Frontend Design System
2
3	## Overview
4
5	このスキルは、AIが生成しがちな「汎用的で無個性なデザイン」を避け、洗練された独自性のあるフロントエンドUIを作成するためのガイドラインです。
6
7	## Anti-Patterns（避けるべきパターン）
8
9	以下のパターンは「AIスロップ美学」と呼ばれ、避けるべきです：
10
11	### Typography（タイポグラフィ）
12
13	- ❌ Inter, Roboto, Open Sans などの過度に使用されたフォント
14	- ❌ すべてのテキストに同じフォントファミリーを使用
15	- ❌ 標準的なフォントウェイトのみの使用
16
17	### Colors（カラー）
18
19	- ❌ 紫からピンクへのグラデーション
20	- ❌ 汎用的な青/緑のアクセントカラー
21	- ❌ 彩度の高すぎるネオンカラー
22	- ❌ デフォルトのTailwindカラーパレットそのまま
23
24	### Layout（レイアウト）
25
26	- ❌ 左テキスト・右画像の標準ヒーローセクション
27	- ❌ 3カラムの均等グリッド機能セクション
28	- ❌ 中央揃えの単調なカードレイアウト
29
30	### Effects（エフェクト）
31
32	- ❌ 過度なぼかし効果（blur）
33	- ❌ 全要素へのアニメーション適用
34	- ❌ グラスモーフィズムの乱用
35
36	## Best Practices（推奨パターン）
37
38	### Typography
39
40	推奨フォントの組み合わせ例：
41
42	\| ヘッダー \| ボディ \| 特徴 \|
43	\| ---------------- \| --------------- \| ---------------------- \|
44	\| Playfair Display \| Source Sans Pro \| クラシック＆モダン \|
45	\| Space Grotesk \| Inter \| テック＆ミニマル \|
46	\| Fraunces \| Work Sans \| エレガント＆読みやすい \|
47	\| DM Serif Display \| DM Sans \| 統一感のある対比 \|
48	\| Syne \| Outfit \| 大胆＆現代的 \|
49
50	タイポグラフィ原則：
51
52	- 見出しと本文で異なるフォントファミリーを使用（セリフ×サンセリフの組み合わせ）
53	- フォントウェイトのバリエーションを活用（300, 400, 600, 800）
54	- レタースペーシングで視覚的階層を作成
55
56	### Colors
57
58	カラーパレット構築原則：
59
60	```
61	プライマリ：ブランドアイデンティティを表す主色
62	セカンダリ：プライマリを補完する色（補色または類似色）
63	アクセント：CTAやハイライトに使用する注目色
64	ニュートラル：背景やテキストに使用するグレー系
65	```
66
67	独自性を出すテクニック：
68
69	- HSL調整で微妙な色相のずれを作る
70	- ダークモードでは彩度を下げ、明度を調整
71	- セマンティックカラー（success, warning, error）もブランドに合わせて調整
72
73	### Layout
74
75	差別化するレイアウトパターン：
76
77	- 非対称グリッド（5:7, 2:3比率）
78	- オーバーラップ要素とネガティブマージン
79	- 斜めのセクション区切り
80	- ベントグリッドと有機的な配置
81	- 大胆な余白（ホワイトスペース）の活用
82
83	### Animation & Motion
84
85	効果的なアニメーション原則：
86
87	1. 高影響度の瞬間に集中
88	- ページロード時の単一の調整されたアニメーション
89	- ユーザーアクション（クリック、ホバー）への即座のフィードバック
90	- 状態変化（成功、エラー）の視覚的表現
91
92	2. タイミングの指針
93	- マイクロインタラクション: 150-300ms
94	- ページ遷移: 300-500ms
95	- 複雑なアニメーション: 500-800ms
96
97	3. イージング関数
98	```css
99	/* 推奨イージング */
100	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
101	--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
102	--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
103	```
104
105	### Background & Texture
106
107	背景デザインのアイデア：
108
109	- 微妙なノイズテクスチャ
110	- 幾何学的パターン（控えめに）
111	- グラデーションメッシュ
112	- 抽象的なブロブ/シェイプ
113	- パララックス効果のある背景レイヤー
114
115	## Implementation Checklist
116
117	進捗チェックリスト：
118
119	- [ ] タイポグラフィ：見出しと本文に異なるフォントを選定
120	- [ ] カラーパレット：5色以上の調和したパレットを作成
121	- [ ] レイアウト：非対称または独自のグリッドシステムを検討
122	- [ ] アニメーション：1-2の高影響度アニメーションを実装
123	- [ ] 背景：テクスチャまたは独自の背景要素を追加
124	- [ ] 一貫性：すべての要素がデザインシステムに従っているか確認
125
126	## Theme Examples
127
128	詳細なテーマ例については以下を参照：
129
130	- [テーマ例集](themes.md)
131	- [コンポーネントリファレンス](components.md)
132
133	## Quick Reference
134
135	フォントペアリング即決リスト：
136
137	1. モダン・クリーン → Space Grotesk + Inter
138	2. エレガント・高級 → Playfair Display + Lato
139	3. テック・スタートアップ → Syne + Outfit
140	4. 温かみ・親しみやすい → Fraunces + Work Sans
141	5. 大胆・クリエイティブ → DM Serif Display + DM Sans
142
143	カラー参考：
144
145	- Coolors.co で調和したパレット生成
146	- Realtime Colors でライブプレビュー
147	- Happy Hues でインスピレーション

People who liked this also viewed

6 picks

Type