Communitygithub.com

superdesigndev/superdesign

Superdesignは、フロントエンドのUI/UXデザインに特化したデザインエージェントです。デザイン思考が必要なUIを実装する前に、このスキルを使用してください。

superdesign とは?

Superdesignは、フロントエンドUI/UXデザインに特化したAIエージェントスキルです。開発者がデザイン思考を必要とするUIを実装する前に、プロジェクトのセットアップ、デザイン草案の忠実な再現、テーマバリエーションの反復生成、複数ページへの展開、再利用可能なコンポーネントの抽出・更新、既存コンポーネントの一覧表示など、デザインワークフロー全体をコマンドラインから実行できます。CLIベースの操作で、`--context-file`オプションによりソースコードの特定行範囲を指定してコンテキストを提供可能。主なコマンドには、`create-project`、`create-design-draft`、`iterate-design-draft`、`execute-flow-pages`、`create-component`、`update-component`、`list-components`があり、テーマ変更やミニマルデザインへの反復など、`-p`オプションでプロンプトを渡してデザインのバリエーションを生成できます。このスキルは、Claude Code、Cursor、Codexなど、AIエージェントが利用可能なプラットフォームで動作し、フロントエンド開発におけるデザインと実装の橋渡しを効率化します。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/superdesigndev/superdesign-skill/tree/main/skills/superdesign

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

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

ドキュメント

superdesign は何をしますか?

Superdesignは、フロントエンドのUI/UXデザインに特化したデザインエージェントです。デザイン思考が必要なUIを実装する前に、このスキルを使用してください。一般的なコマンド: superdesign create-project --title "X" (プロジェクトのセットアップ), superdesign create-design-draft --project-id <id> --title "Current UI" -p "忠実に再現..." --context-file src/Component.tsx (忠実な再現), superdesign iterate-design-draft --draft-id <id> -p "dark theme" -p "minimal" --mode branch --context-file src/Component.tsx (デザインバリエーション), superdesign execute-flow-pages --draft-id <id> --pages '[...]' --context-file src/Component.tsx (さらにページを拡張), superdesign create-component --project-id <id> --name "NavBar" --html-file /tmp/navbar.html --props '[...]' (再利用可能なコンポーネントの抽出), superdesign update-component --component-id <id> --html-file /tmp/navbar.html (既存コンポーネントの更新), superdesign list-components --project-id <id> (既存コンポーネントの一覧表示)。行範囲の指定に対応: --context-file path:startLine:endLine

関連スキル