design-system とは？
明確なデザイン トークン、レイアウト ルール、モーション ガイダンス、およびアクセシビリティ チェックを使用して実稼働グレードの UI デザインを作成し、一貫性のあるスケーラブルなフロントエンド開発を実現します。 ソース: supercent-io/skills-template。
·design-system
*
design-system
✓明確なデザイン トークン、レイアウト ルール、モーション ガイダンス、およびアクセシビリティ チェックを使用して実稼働グレードの UI デザインを作成し、一貫性のあるスケーラブルなフロントエンド開発を実現します。
design-system のインストール方法
コマンドラインで design-system AI スキルを開発環境にすばやくインストール
- ターミナルを開く: ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます
- インストールコマンドを実行: このコマンドをコピーして実行します: npx skills add https://github.com/supercent-io/skills-template --skill design-system
- インストールを確認: インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
ソース: supercent-io/skills-template。
SKILL.md
原文を見るThis is a skill for production-grade UI design. It supports consistent and scalable frontend development through clear design tokens, layout rules, motion guidelines, and accessibility checks.
Issue: UI feels generic Cause: No visual direction or tokens Solution: Provide style references and palette
Issue: Layout breaks on mobile Cause: No responsive grid rules Solution: Define breakpoints and stacking behavior
明確なデザイン トークン、レイアウト ルール、モーション ガイダンス、およびアクセシビリティ チェックを使用して実稼働グレードの UI デザインを作成し、一貫性のあるスケーラブルなフロントエンド開発を実現します。 ソース: supercent-io/skills-template。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/supercent-io/skills-template --skill design-system- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-03-07
- 更新日
- 2026-03-10
クイックアンサー
design-system のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/supercent-io/skills-template --skill design-system インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/supercent-io/skills-template
詳細
- カテゴリ
- *クリエイティブ
- ソース
- skills.sh
- 初回登録
- 2026-03-07