スロップフリーなAI UIエージェントのためのリバースエンジニアリングされたClaude設計システムプロンプト

ほとんどの「デザインアシスタント」プロンプトは、派手なグラデーション、絵文字デコレーション、角丸カード、そしてどこにでもInterフォントを使った、ありきたりなSaaSテンプレートを生成します。Trystan-SAのClaudeデザインシステムプロンプトは、それらのパターンを明確に拒否します。これはリバースエンジニアリングされたシステムプロンプト（MITライセンス）で、LLMを、偏りのある、アクセシビリティ対応、AIスロップ耐性のあるデザイン協力者に変えます。

含まれるもの

• claude/system-prompt.md — コンテンツの規律、美観の規律、視覚的階層、WCAGアクセシビリティ、インタラクション状態、システム思考（コンポーネント＋トークン）、メディアの尊重（本物のCSS Grid、oklch()、text-wrap: pretty）をカバーする20の章。
• claude/skills/ — 14の呼び出し可能な手続き。グループはプロダクション（発見質問、フロントエンド美観方向、ワイヤーフレーム、デッキ作成、プロトタイプ作成、調整可能化、バリエーション生成）、システム（デザインシステム抽出、コンポーネント抽出）、レビュー（アクセシビリティ監査、AIスロップチェック、階層リズムレビュー、インタラクション状態パス、ポリッシュパス）。
• codex/変種 — OpenAI Codex向けに適応（単一ループ、サブエージェントなし）。

使い方

system-prompt.mdの内容を任意のLLM（Claude、GPT、Gemini、ローカルモデル）のシステムプロンプトとして貼り付けます。エージェントは設計哲学に従い、タスクに応じてスキルを名前で参照します。スキルは連鎖可能で、典型的なグリーンフィールドフローは発見質問 → フロントエンド美観方向 → ワイヤーフレーム → プロトタイプ作成 → ポリッシュパスです。ブランド認識フローはデザインシステム抽出 → バリエーション生成 → 調整可能化 → ポリッシュパスです。

デザイン原則

このプロンプトは、コンテンツの規律（無駄なく、すべての要素がその場所に値する）、美観の規律（AIの決まり文句を避け、パレットとトーンにコミット）、視覚的階層とリズム（サイズ、色、太さ、位置、密度、間隔スケール）、アクセシビリティ（WCAG、セマンティックHTML、キーボードナビゲーション、フォーカスリング、モーション設定）、インタラクションフィードバック（ホバー、アクティブ、無効、フォーカス、ローディング、検証状態）、システム思考（個別ページではなくコンポーネントとトークン）を強制します。

対象者

AIコーディングエージェントを使用する開発者で、一般的なSaaSの決まり文句ではなく、偏りのあるアクセシブルなデザイン出力を求める方。