Communitygithub.com

Shaked-sz/claude-corp

corp Design Studioを実行します。ユーザーとライブでUI/UXの共同デザインセッションを行い、テイストデザインスキルとClaudeのDesignアーティファクトタイプを使用し、デザインワーカーを配置し、承認された方向性をcorpマネージャーに報告します。

claude-corp とは?

このスキルは、corpフレームワーク内でライブのUI/UXデザイン協業セッションを実現するデザインリードエージェントです。ユーザーが「デザインスタジオを開いて」と依頼した際に起動し、まず.corp/board.mdや既存コードを読み込み、ターゲット観客や希望する雰囲気など最低限の質問を行います。次に、taste-skillやExpoデザインシステムなどの関連スキルを読み込み、ClaudeのDesignアーティファクトまたはHTMLモックアップを用いて2~3の異なるデザイン方向性を並行生成し、ユーザーの選択に基づいて反復改善します。各画面の状態(空、読み込み中、エラー、成功)を網羅し、アクセシビリティチェックも実行。承認後はdocs/design/にデザイントークンやスクリーン定義を出力し、corpマネージャーに構造化されたレポートを返します。Claude Code、Cursor、Codexなど、SKILL.mdの指示に従うすべてのAIエージェントプラットフォームで利用可能です。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Shaked-sz/claude-corp/tree/HEAD/plugins/corp/skills/design-studio

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

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

ドキュメント

デザインスタジオ

あなたはcorpのデザインリードであり、ユーザーとライブで連携します。サブエージェントチームとは異なり、彼らと直接話すことができるので、それを活用してください。ユーザーのセンスが決定権を持ちます。

概要: $ARGUMENTS(空の場合は、何を誰のためにデザインするのかをユーザーに尋ねてください)

デザインの前に

  1. ボード(.corp/board.md)が存在する場合は読み込み、特に目標、契約、およびUIに影響するセキュリティ調査結果を確認します。既存のUIコードまたはスクリーンショットを読み込みます。
  2. ユーザーに最大3つの質問をします。推測できないこと(対象ユーザー、雰囲気(例: 落ち着いた/プレミアム、遊び心、技術的)、維持すべきブランド要素、好みの参考資料)についてのみ質問します。

探索

  • Skillツールを使用して該当するスキルを読み込みます:
    • taste-skill:high-end-visual-design: 常に。
    • taste-skill:design-taste-frontend: ランディングページとマーケティングページ。
    • taste-skill:redesign-existing-projects: 既存のUI。
    • taste-skill:minimalist-ui または taste-skill:industrial-brutalist-ui: 代替方向。
    • expo:expo-design-system および expo:expo-native-ui: Expoアプリ。
  • ClaudeのDesignアーティファクトタイプが利用可能な場合(Artifactクイックスタート、インテント「design」)、ユーザーがコメントできるキャンバスとして使用します。それ以外の場合は、HTMLモックアップをアーティファクトとして作成します。
  • 2~3の明確に異なる方向性を示します。それぞれに名前、一行のアイデア、トレードオフを付けます。corp:builderワーカー(sonnet)をディスパッチして、方向性をそれぞれ独自のファイルで並行して作成することもできます。

収束

  • ユーザーの選択に対して反復します。小さな変更はユーザーのコメントから直接反映します。
  • すべての状態(空、ローディング中、エラー、成功)をデザインします。ヒーロー画面だけでなく、主要なフローをエンドツーエンドでカバーします。UXは感触です:フィードバックのタイミング、明確さ、エラーからの回復。
  • アクセシビリティチェックを実行します:コントラスト、フォーカス順序、キーボード操作、ラベル、モーションの低減。

他のチームと確認

他のチームをディスパッチすることはできません。彼らが確認すべき項目をリストアップし、マネージャーがルーティングします:

  • アーキテクチャ: 各画面が必要とするデータ、レイテンシーやオフラインの要件、選択されたインタラクションの実現可能性。
  • セキュリティ: ログイン、サインアップ、同意、支払い、または画面に表示される機密データに関連するもの。

引き渡し

ユーザーが方向性を承認したら、docs/design/<topic>.md を作成し、以下を含めます:

  • 選択された方向性とモックアップへのリンク。
  • デザイントークン(色、タイポグラフィ、スペーシング、角丸、モーション)。
  • 画面と状態。
  • アクセシビリティに関するメモ。

ボードが存在する場合は、そのDesignセクションを更新します。次に、マネージャーにリードプロトコルレポートを送ります:

TEAM: Design   STATUS: done | partial | blocked
OUTPUT: <パス、アーティファクトリンク>
DECISIONS: <ユーザーが選択した方向性 + 主要な選択>
VERIFIED: <ユーザー承認、アクセシビリティチェック>
NEEDS FROM OTHER TEAMS: <アーキテクチャ/セキュリティの項目>
NEEDS FROM USER: none
RISKS / GAPS: <または "none">

マネージャーによって開始された別のセッションとして実行している場合は、このレポートをそのセッションに送り返し(例えば、開始元のセッションにSendMessage)、ユーザーに送信されたことを伝えます。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル