‹ 首页

frontend-design-system

@oikon48 · 收录于 1 周前

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

场景着陆页设计仪表盘设计web应用设计

适合你，如果希望前端UI设计专业、独特且令人印象深刻

/ 下载安装
frontend-design-system.skill双击,或拖进 Claude 桌面版 / Cowork,即完成安装↓ .skill↓ .zip
用别的 agent?下载 .zip 解压,把文件夹放进它的技能目录
Claude Code~/.claude/skills/(项目级 .claude/skills/)
Codex CLI~/.codex/skills/
Cursor自动读取上面两处目录
其他工具见其文档的「skills」目录;两个下载是同一份文件,只是名字不同
/ 通过 npx 安装 校验哈希
npx oh-my-skill add oikon48/cc-frontend-skills/frontend-design-system
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- oikon48/cc-frontend-skills/frontend-design-system
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify oikon48/cc-frontend-skills/frontend-design-system
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
68GitHub stars
~1.8K最小装载
~4.2K含声明引用
~4.2K文本包总量
镜像托管

怎么用

技能原文 SKILL.md作者撰写 · MIT · 12989e3

Frontend Design System

Overview

このスキルは、AIが生成しがちな「汎用的で無個性なデザイン」を避け、洗練された独自性のあるフロントエンドUIを作成するためのガイドラインです。

Anti-Patterns（避けるべきパターン）

以下のパターンは「AIスロップ美学」と呼ばれ、避けるべきです：

Typography（タイポグラフィ）
  • ❌ Inter, Roboto, Open Sans などの過度に使用されたフォント
  • ❌ すべてのテキストに同じフォントファミリーを使用
  • ❌ 標準的なフォントウェイトのみの使用
Colors（カラー）
  • ❌ 紫からピンクへのグラデーション
  • ❌ 汎用的な青/緑のアクセントカラー
  • ❌ 彩度の高すぎるネオンカラー
  • ❌ デフォルトのTailwindカラーパレットそのまま
Layout（レイアウト）
  • ❌ 左テキスト・右画像の標準ヒーローセクション
  • ❌ 3カラムの均等グリッド機能セクション
  • ❌ 中央揃えの単調なカードレイアウト
Effects（エフェクト）
  • ❌ 過度なぼかし効果（blur）
  • ❌ 全要素へのアニメーション適用
  • ❌ グラスモーフィズムの乱用
Best Practices（推奨パターン）
Typography

推奨フォントの組み合わせ例：

| ヘッダー | ボディ | 特徴 | | ---------------- | --------------- | ---------------------- | | Playfair Display | Source Sans Pro | クラシック＆モダン | | Space Grotesk | Inter | テック＆ミニマル | | Fraunces | Work Sans | エレガント＆読みやすい | | DM Serif Display | DM Sans | 統一感のある対比 | | Syne | Outfit | 大胆＆現代的 |

タイポグラフィ原則：

  • 見出しと本文で異なるフォントファミリーを使用（セリフ×サンセリフの組み合わせ）
  • フォントウェイトのバリエーションを活用（300, 400, 600, 800）
  • レタースペーシングで視覚的階層を作成
Colors

カラーパレット構築原則：

プライマリ：ブランドアイデンティティを表す主色
セカンダリ：プライマリを補完する色（補色または類似色）
アクセント：CTAやハイライトに使用する注目色
ニュートラル：背景やテキストに使用するグレー系

独自性を出すテクニック：

  • HSL調整で微妙な色相のずれを作る
  • ダークモードでは彩度を下げ、明度を調整
  • セマンティックカラー（success, warning, error）もブランドに合わせて調整
Layout

差別化するレイアウトパターン：

  • 非対称グリッド（5:7, 2:3比率）
  • オーバーラップ要素とネガティブマージン
  • 斜めのセクション区切り
  • ベントグリッドと有機的な配置
  • 大胆な余白（ホワイトスペース）の活用
Animation & Motion

効果的なアニメーション原則：

  1. 高影響度の瞬間に集中
  2. ページロード時の単一の調整されたアニメーション
  3. ユーザーアクション（クリック、ホバー）への即座のフィードバック
  4. 状態変化（成功、エラー）の視覚的表現
  1. タイミングの指針
  2. マイクロインタラクション: 150-300ms
  3. ページ遷移: 300-500ms
  4. 複雑なアニメーション: 500-800ms
  1. イージング関数 ```css /* 推奨イージング */ --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); ```
Background & Texture

背景デザインのアイデア：

  • 微妙なノイズテクスチャ
  • 幾何学的パターン（控えめに）
  • グラデーションメッシュ
  • 抽象的なブロブ/シェイプ
  • パララックス効果のある背景レイヤー
Implementation Checklist

進捗チェックリスト：

  • [ ] タイポグラフィ：見出しと本文に異なるフォントを選定
  • [ ] カラーパレット：5色以上の調和したパレットを作成
  • [ ] レイアウト：非対称または独自のグリッドシステムを検討
  • [ ] アニメーション：1-2の高影響度アニメーションを実装
  • [ ] 背景：テクスチャまたは独自の背景要素を追加
  • [ ] 一貫性：すべての要素がデザインシステムに従っているか確認
Theme Examples

詳細なテーマ例については以下を参照：

  • [テーマ例集](themes.md)
  • [コンポーネントリファレンス](components.md)
Quick Reference

フォントペアリング即決リスト：

  1. モダン・クリーン → Space Grotesk + Inter
  2. エレガント・高級 → Playfair Display + Lato
  3. テック・スタートアップ → Syne + Outfit
  4. 温かみ・親しみやすい → Fraunces + Work Sans
  5. 大胆・クリエイティブ → DM Serif Display + DM Sans

カラー参考：

  • Coolors.co で調和したパレット生成
  • Realtime Colors でライブプレビュー
  • Happy Hues でインスピレーション
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…