Communitygithub.com

jay439055-creator/stripe-system-practice

DESIGN.md、スキル、プロンプト、Clineを使用したAI駆動のStripeスタイルUI生成システム

stripe-system-practice とは?

このスキルは、AIエージェント(特にCline)がStripeのようなモダンなUIコンポーネントを生成するためのシステムを提供します。主にDESIGN.mdという設計ドキュメントを基に、AIがUIコンポーネントのコード(HTML、CSS、JavaScript)を自律的に生成・修正します。このスキルは、スキル定義、プロンプトテンプレート、Clineのワークフローを組み合わせて、デザインの一貫性とコード品質を保ちながらUI開発を効率化します。開発者は、このスキルを使用することで、繰り返しのUI実装作業から解放され、デザインシステムに準拠したStripeスタイルのUIを迅速に作成できます。主にCline環境で動作し、DESIGN.mdに定義されたトークンやルールを参照してUIを生成します。

対応~Claude Code~Codex CLI~Cursor
npx skills add jay439055-creator/stripe-system-practice

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

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

ドキュメント

stripe-system-practice は何をしますか?

DESIGN.md、スキル、プロンプト、Clineを使用したAI駆動のStripeスタイルUI生成システム

このシステムは、AIエージェント(特にCline)がDOM生成のためのパターンとプロンプトを使用して、StripeスタイルのUIコンポーネントを生成できるようにします。

動作の仕組み

  1. DESIGN.md -- コアとなる設計システム(トークン、スキーマ、コンポーネント定義を含む)を定義します。
  2. スキル -- エージェントが実行できるアクションを定義します(create-component、update-styleなど)。
  3. プロンプト -- スキルを使用してUIを生成するための指示です。
  4. Cline -- プロンプトを実行し、スキルとDESIGN.mdを調整するエージェントです。

はじめに

このスキルは、clineのようなAIエージェントアシスタントと一緒に使用するように設計されています。

使用例

# Clineに以下のようなプロンプトを送信します
"Stripeスタイルの[支払いフォーム] コンポーネントを生成してください。
"Stripe Payments"のスタイルに基づいています。

または、コンポーネントを直接リクエストします:

フォーム要素、ボタン、色を持つログインコンポーネントをStripeスタイルで生成してください。

LICENSE

このプロジェクトのライセンスはMITです。

関連スキル