pulkitxm/claude-directory

Open-source AI interfaces built with Claude (Fable 5) including hero sections, GLSL shaders, design systems, animations, 3D components and and landing pages, in React, Tailwind, and Three.js. Plug them into your AI agent and ship faster.

解決する課題

Claude(特に Fable 5)を用いて生成された、高精細なウェブUI実験およびフロントエンドコンポーネントのキュレートされたオープンソースギャラリーを提供します。これは、AIが現代のウェブインターフェース、アニメーション、3Dシーンにおいて何を構築できるかを確認するための参考資料として機能します。

動作方法

リポジトリには、自己完結型のプロジェクトフォルダのコレクションが含まれています。各プロジェクトには、生成されたコード(React、TypeScript、Vite、Tailwind CSS、Three.js、GSAPなどのスタックを使用)と、そのプロジェクトを作成するために使用された特定のプロンプト(prompt.md)が含まれています。これにより、ユーザーはコンポーネントをコピー&ペーストしたり、特定の視覚的結果を達成するために使用されたプロンプト技術を学習したりできます。

対象ユーザー

  • AI生成UIのインスピレーションやコピペ可能なテンプレートを探しているフロントエンド開発者
  • LLMに対して複雑なウェブデザインやレイアウトをプロンプトする方法に興味があるプロンプトエンジニア
  • Claudeの「バイブコーディング」や迅速なプロトタイピングにおける能力を探求するAI愛好家

特徴

  • 多様なカテゴリ: ヘロセクション、ランディングページ、GLSLシェーダー、デザインシステム、3D/WebGLシーン、アニメーションを含む。
  • プロンプトの透明性: すべてのプロジェクトには元のプロンプトが同梱されており、生成プロセスを再現可能になっています。
  • 現代的なテクノロジースタック: Framer Motion、Three.js、Tailwind CSSなどの業界標準ツールを活用しています。
  • ライブディレクトリ: ホスティングされたギャラリーにより、コードに飛び込む前に視覚的に実験を閲覧できます。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト