Communitygithub.com

Castor6/tactus

このスキルは、ユーザーがフロントエンドのインターフェースやビジュアル要素の構築、作成、デザイン、開発、改善、スタイリングを依頼したときに使用します。特定のデザインシステム（Neo-brutalism、Modern Darkなど）を自動的に読み込み、汎用的なUIではなく、特徴的でプロダクションレベルのコードを生成します。

tactus とは？

このスキルは、Claude Codeが美しく特徴的なフロントエンドインターフェースを生成するためのものです。ユーザーがフロントエンドの構築やスタイリングを依頼したときに自動的にトリガーされ、`prompts/`ディレクトリから適切なデザインシステムプロンプト（例：Neo-brutalism、Modern Dark、Bauhaus、Cyberpunkなど）を読み込みます。これにより、AIが生成するような見分けのつかない汎用的なUIではなく、特定の美学に基づいたプロダクショングレードのコードが生成されます。スキルは、ユーザーの意図を理解し、適切なスタイルを選択し、デザインシステムを適用し、既存のコードベースに統合するという5つのステップで動作します。React、Vue、Next.js、Svelteなど、あらゆるフロントエンドフレームワークをサポートし、ランディングページからUIコンポーネントまで幅広く対応します。スタイルが指定されていない場合でも、プロジェクトの文脈に基づいて最適なスタイルを提案します。

対応✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/Castor6/tactus/tree/HEAD/.agents/skills/design-style
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

デザインスタイルスキル

目的

このスキルは、Claude Codeがprompts/ディレクトリからデザインシステムプロンプトを自動的に取得することで、美しく特徴的なフロントエンドインターフェースを作成するのに役立ちます。汎用的なUIを生成する代わりに、このスキルによりClaudeは、Neo-brutalism、Modern Dark、Luxury、Cyberpunkなどの特定のデザイン美学に基づいたインターフェースを構築できるようになります。

使用タイミング

このスキルは、以下の場合に自動的に呼び出されます:

  • ユーザーがWebページ、ランディングページ、またはWebアプリケーションの構築を依頼した場合
  • ユーザーが特定のデザインスタイルを持つUIコンポーネントを要求した場合
  • ユーザーがフロントエンド、React、Vue、またはWeb開発について言及した場合
  • ユーザーが特定の美的スタイルを要求した場合（例：「モダンでダークな見た目にして」や「ブルータリズムスタイルを使って」）

利用可能なデザインスタイル

以下のデザインシステムがprompts/ディレクトリで利用可能です:

  • Academia - 学術的、クラシック、洗練された
  • ArtDeco - 豪華な1920年代のグラマー
  • Bauhaus - 機能主義的、幾何学的ミニマリズム
  • BoldTypography - タイポグラフィ主導のデザイン
  • Botanical - 自然に着想を得た、有機的
  • Claymorphism - ソフトで粘土のような3D要素
  • Cyberpunk - 未来的、ネオン、ハイテク
  • Enterprise - プロフェッショナル、コーポレート、スケーラブル
  • FlatDesign - クリーンでミニマルな2D
  • Fluent2 - Microsoft Fluent 2 デザインシステム
  • HumanistLiterary - 温かみのある、文学的な、会話調（Claudeの美学）
  • Industrial - 生々しい、メカニカル、実用的
  • Kinetic - ダイナミック、モーション重視
  • Luxury - プレミアム、エレガント、洗練された
  • Material - Google マテリアルデザイン
  • Maximalism - 大胆で、表現力豊か、豊富
  • MinimalDrak - ミニマルダークテーマ（原文にタイポあり）
  • ModernDark - 奥行きのある現代的なダークUI
  • Monochrome - 白黒、ハイコントラスト
  • Neo-brutalism - 大胆で、生々しく、カラフルなブルータリズム
  • Neumorphism - ソフトUI、スキューモーフィズム
  • Newsprint - 新聞に着想を得た
  • Organic - 自然で流れるような形状
  • PlayfulGeometric - 楽しい幾何学模様
  • Professional - クリーンでビジネス向け
  • Retro - ビンテージ、ノスタルジック
  • Saas - モダンなSaaS美学
  • Sketch - 手描き風、アーティスティック
  • Swiss - インターナショナルタイポグラフィックスタイル
  • TerminalCLI - コマンドラインインターフェースの美学
  • Vaporwave - 80年代/90年代の美学、ノスタルジック
  • Web3 - 分散型、暗号通貨に着想を得た

動作の仕組み

ステップ1: ユーザーの意図を理解する

ユーザーがフロントエンドの作業を依頼した場合、まず以下を特定します:

  1. 技術スタック - どのフレームワークを使用していますか？（React、Vue、Next.jsなど）
  2. デザインの好み - 特定のスタイルや美学について言及しましたか？
  3. コンポーネントの範囲 - 単一のコンポーネント、ページ全体、またはアプリケーション全体？

ステップ2: デザインスタイルを選択する

ユーザーがスタイルを指定した場合:

  • リクエストを利用可能なスタイルにマッピングします（例：「ブルータリズム」→ Neo-brutalism）
  • 大文字小文字を区別しません（brutalism、Brutalism、BRUTALISM すべて動作）

ユーザーがスタイルを指定しなかった場合:

  • モダンでプロフェッショナルなプロジェクト → ModernDark または Professional
  • クリエイティブで大胆なプロジェクト → Neo-brutalism または BoldTypography
  • ミニマルでクリーンなプロジェクト → FlatDesign または Swiss
  • エンタープライズ/コーポレート → Enterprise

どのスタイルがニーズに合うか確信が持てない場合は、ユーザーに質問してください。

ステップ3: デザインシステムを取得する

Read ツールを使用して、適切なプロンプトファイルを読み込みます:

Read: prompts/<StyleName>.md

例えば:

  • prompts/Neo-brutalism.md
  • prompts/ModernDark.md
  • prompts/Cyberpunk.md

ステップ4: デザインシステムを適用する

デザインシステムプロンプトを読み込んだら:

  1. デザイン哲学を内面化する - 核となる原則、視覚的な特徴、差別化要因を理解する
  2. デザイントークンを抽出する - 色、タイポグラフィ、スペーシング、シャドウ、ボーダー
  3. コンポーネントパターンに従う - 指定されたボタンスタイル、カードレイアウトなどを使用する
  4. 「大胆さの要素」を適用する - デザインを本物にするための特徴的な要素を実装する
  5. アンチパターンを避ける - 美学を壊すようなテクニックを使用しない

ステップ5: コンテキストを考慮して構築する

コードを書く前に:

  • ユーザーの既存の技術スタックを特定する
  • コンポーネントアーキテクチャを理解する
  • 制約事項（CSSフレームワーク、デザインライブラリなど）に注意する

コードを書くとき:

  • 既存のパターンと規約に合わせる
  • デザイントークンをCSS変数または設定ファイルに集中させる
  • 再利用可能で構成可能なコンポーネントを作成する
  • アーキテクチャ上の選択を簡潔に説明する

品質基準:

  • アクセシビリティを維持または向上させる
  • デバイス間でレスポンシブデザインを確保する
  • 意図的でクリエイティブなデザインの選択を行う（汎用的なボイラープレートではない）
  • コードベースを見つけたときよりもきれいな状態で残す

例

例1: ユーザーがスタイルを指定する場合

ユーザー:「SaaS製品のランディングページをネオブルータリストデザインで作成してください」

スキルのアクション:

  1. キーワードを検出: 「ランディングページ」、「ネオブルータリスト」
  2. 「ネオブルータリスト」→ prompts/Neo-brutalism.md にマッピング
  3. デザインシステムプロンプトを読み込む
  4. 明確化のための質問をする: 「どの技術スタックを使用していますか？ React、Vue、それともプレーンなHTML/CSSですか？」
  5. Neo-brutalismの原則（太いボーダー、ハードシャドウ、大胆な色など）に従ってランディングページを構築する

例2: ユーザーがスタイルを指定しない場合

ユーザー:「ポートフォリオサイトの作成を手伝ってください」

スキルのアクション:

  1. 検出: 「ポートフォリオサイト」（クリエイティブなコンテキスト）
  2. オプションを提案する: 「特定のデザインスタイルはありますか？ Modern Dark（洗練された）、Neo-brutalism（大胆でクリエイティブ）、Swiss（ミニマルでクリーン）で作成できます。」
  3. ユーザーが好みを応答する
  4. 適切なプロンプトを読み込んで構築する

例3: コンポーネントのリクエスト

ユーザー:「Next.jsアプリに問い合わせフォームを追加してください。モダンでプロフェッショナルな見た目にしてください。」

スキルのアクション:

  1. キーワード: 「Next.js」、「モダンでプロフェッショナル」
  2. 選択: ModernDark.md（モダン）または Professional.md（プロフェッショナル）
  3. デザインシステムを読み込む
  4. Next.jsのパターンに合わせてフォームコンポーネントを構築する
  5. プロンプトからのデザイントークン（色、タイポグラフィ、シャドウなど）を使用する

クイックリファレンスコマンド

実装時には、特定のセクションをすばやく参照できます:

色:

Grep: pattern "Token|Value|Usage" path "prompts/<Style>.md"

タイポグラフィ:

Grep: pattern "Font|Weight|Size" path "prompts/<Style>.md"

コンポーネントパターン:

Grep: pattern "Button|Card|Input" path "prompts/<Style>.md"

最良の結果を得るためのヒント

  1. プロンプト全体を読む - 斜め読みしないでください。デザイン哲学と差別化のセクションは非常に重要です。
  2. 特徴的な要素を実装する - すべてのデザインシステムには「大胆さの要素」セクションがあります。これらの要素がデザインを本物にします。
  3. アンチパターンを避ける - 各プロンプトには「やってはいけないこと」がリストされています。これらのルールを厳守してください。
  4. 質問をする - ユーザーのニーズが不明確な場合は、構築する前に質問してください。
  5. 既存のコードに合わせる - 技術スタックと戦わないでください。デザインシステムを既存のパターンに統合してください。

注意事項

  • すべてのデザインシステムプロンプトは同じ構造に従っています: <role> セクションと <design-system> セクション
  • プロンプトには、詳細なカラーパレット、タイポグラフィスケール、コンポーネントパターン、実装例が含まれています
  • 各スタイルはプロダクションレディであり、視覚的な独自性を慎重に作り込まれています
  • プロンプトは、AIが生成したような見分けのつかないインターフェースを防ぐように設計されています

将来の拡張

このスキルの潜在的な改善点:

  • スタイルの組み合わせサポート（例：「Cyberpunk + Minimal」）
  • カスタムスタイル作成ワークフロー
  • デザイントークンのJSON/CSSへの抽出
  • プロンプトからのコンポーネントライブラリ生成

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community