mcpField
D
distinctive-frontend

distinctive-frontend

github.com/podoデザイン・UI29589 回インストール1 日前に更新
リポジトリ

distinctive-frontend について

distinctive-frontendは、明確なビジュアルスタイルに沿ったフロントエンドのコンポーネントコードを生成するスキルです。4種類のデザインシステムがあり、それぞれに書体、配色、アニメーションが含まれます。

主な機能

  1. 014種類のデザインシステム
  2. 02サイバーパンク、ブルータリズム、ヴェイパーウェイヴ、北欧ミニマリズム
  3. 03厳選された書体と配色
  4. 04段階的なアニメーション
  5. 05本番向けコンポーネントコードの生成

活用シーン

  1. 01指定したスタイルでコンポーネントを生成
  2. 02画面の配色と書体を統一
  3. 03画面に段階的なアニメーションを追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/podo/design-agent-skills --skill distinctive-frontend

インストール後、Claude Code で/distinctive-frontendを入力して読み込まれたか確認します。

同梱ファイルstub.yaml

詳細

distinctive-frontend

カタログ用の概要 — 完全なパッケージはこちらです：Koomook/claude-frontend-skills

判断ツリー

  1. パッケージはすでにインストールされていますか？ 確認方法：エージェントのスキルディレクトリに、スタブ以外の内容を含む distinctive-frontend があるか確認します。

    • はい → distinctive-frontend を呼び出して続行します
    • いいえ → ステップ 2 に進みます

  2. 使用しているエージェントはどれですか？

    • Claude Code → npm install -g @bong/claude-frontend-skills
    • Cursor → npm install -g @bong/claude-frontend-skills
    • その他 → npm install -g @bong/claude-frontend-skills を実行するか、GitHub README をご覧ください

インストールコマンド

npm install -g @bong/claude-frontend-skills

インストール後の呼び出し

  • スキル名：distinctive-frontend
  • トリガーフレーズ：「distinctive frontend」、「cyberpunk UI」、「brutalist frontend」、「vaporwave design」、「nordic minimalism」

概要

4 種類の詳細なデザインシステムを 1 つのスキルにまとめています。サイバーパンク（暗い背景にネオン、テクノロジー系のタイポグラフィ、グリッチ効果）、ブルータリスト（高コントラスト、無骨なグリッド、大胆なサンセリフ）、ヴェイパーウェイヴ（パステルグラデーション、レトロな書体、シンセウェイヴの動き）、北欧ミニマリズム（すっきりとした余白、落ち着いた配色、機能的なサンセリフ）を収録しています。各テーマには、厳選されたタイポグラフィの組み合わせ、完全なカラーシステム、構築済みの段階的なアニメーションシーケンスが用意されています。テーマ名を指定すると、その美学に沿った本番環境向けのコンポーネントコードをスキルが生成します。

使用しない場合

  • 本番環境に適した保守的なデザインが必要な場合（これらのテーマは個性が強く、実験的です。大幅な調整なしでは、エンタープライズ SaaS や規制対象の業界には適していません）
  • テーマを組み合わせたり、ハイブリッドな美学を作成したりする場合（各テーマは独立しており、明確な個性を持っています）

コメント

Markdown 対応