القائمة
Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/linnefromice/claude-code-workspace --skill design-systemيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
キャプチャ、診断、抑制されたリカバリ、内省レポートを用いた、AI エージェント障害向けの体系的なセルフデバッグワークフローです。
リポジトリ認識の並列レビューパスを使用してスキル、コマンド、ルール、フック、その他を DAILY と LIBRARY のバケットに分類することで、特定のリポジトリ向けにエビデンスに基づく ECC インストールプランを構築します。フルバンドルをロードするのではなく、プロジェクトが実際に必要とするものに ECC をトリミングすべき場合に使用します。
対象リポジトリの既存の統合パターンに正確に合わせて新しい API コネクタやプロバイダを構築します。第二のアーキテクチャを発明することなく、もう一つの統合を追加する場合に使用します。
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| name | design-system |
| description | Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling. |
| origin | ECC |
コードベースを分析し、統一的なデザインシステムを生成します:
1. CSS/Tailwind/styled-components の既存パターンをスキャン
2. 抽出: カラー、タイポグラフィ、スペーシング、border-radius、シャドウ、ブレークポイント
3. インスピレーションのために競合3サイトを調査（browser MCP 経由）
4. デザイントークンセットを提案（JSON + CSS custom properties）
5. 各決定の根拠を含む DESIGN.md を生成
6. インタラクティブな HTML プレビューページを作成（自己完結型、依存関係なし）
出力: DESIGN.md + design-tokens.json + design-preview.html
UI を10の指標（各0-10点）でスコアリングします:
1. カラーの一貫性 — パレットを使用しているか、ランダムな hex 値か？
2. タイポグラフィの階層 — 明確な h1 > h2 > h3 > body > caption か？
3. スペーシングのリズム — 一貫したスケール（4px/8px/16px）か、恣意的か？
4. コンポーネントの一貫性 — 類似要素が類似した見た目か？
5. レスポンシブ対応 — ブレークポイントで滑らかか、崩れるか？
6. ダークモード — 完全か、中途半端か？
7. アニメーション — 意図的か、過剰か？
8. アクセシビリティ — コントラスト比、フォーカス状態、タッチターゲット
9. 情報密度 — 雑然としているか、すっきりしているか？
10. 仕上げ — ホバー状態、トランジション、ローディング状態、空の状態
各指標にスコア、具体例、修正箇所（ファイル名:行番号）が付きます。
汎用的な AI 生成デザインパターンを特定します:
- すべてに過剰なグラデーション
- 紫から青のデフォルト配色
- 目的のない「グラスモーフィズム」カード
- 丸めるべきでないものへの角丸
- スクロール時の過度なアニメーション
- ストックグラデーション上の中央配置テキストによる汎用的なヒーロー
- 個性のない sans-serif フォントスタック
SaaS アプリ向けに生成:
/design-system generate --style minimal --palette earth-tones
既存 UI の監査:
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
AI スロップのチェック:
/design-system slop-check