コンポーネント基本
このサイトはTailwind CSSを使って作られています。Claude Codeにコンポーネント名を指定すると、自動的に適切なパーツを作成してくれます。
開発の基本方針
簡単なパーツは作成中のページで直接変更できますが、変更前に必ずgitでコミットして保存しましょう。
複雑なパーツを作り込む場合は、別のページで実験してから本番環境に適用する方が安全です。
パーツ作成の手順
実験用ページを作成
以下のプロンプトでClaude Codeに実験用ページを作成してもらいます。
tailwind css のパーツ(コンポーネント)を実験したいので、
ダミーページをproject-docsフォルダの下に demo.html を作ってください。
よく使うパーツを色々と実装して見せてください。
このページは、sitemap.xml に追加しないでください。パーツを実験
作成した実験用ページで、必要なパーツを試作します。
@project-docs/作成した実験用Webページ.html に、
(ここにパーツの説明を詳しく書く) を作ってください。本番環境に反映
実験が成功したら、運用中のWebページに適用します。
@project-docs/実験してたページ.html のXXXセクションを参考に、
(具体的な要件を記述)セクションを、(配置場所)セクションの次に挿入してください。
(追加の要件があれば記述)参考にするコンポーネントサイト
Tailwind CSSの高品質なコンポーネント集です。Claude Codeにこれらのサイトのパーツ名を伝えると、同様のデザインを作成できます。
💡
これらのサイトでデザインを探し、Claude Codeに「このサイトのXXXのようなパーツを作って」と伝えるだけで、同様のコンポーネントを作成できます。
もっとパーツを知りたい方は、 Curated UI List も参考にしてください。
tailwindcss テールウィンド UI部品 uiパーツ ウェブパーツ webコンポーネント ユーザーインターフェース デザインパーツ レイアウト フロントエンド ui設計 ボタン カード モーダル アコーディオン ナビゲーション フォーム テンプレート 実験環境 テスト環境 サンドボックス プロトタイプ 試作 開発手順 ワークフロー git管理 バージョン管理 floatui flowbite merakiui tailwind公式 コンポーネント集 ライブラリ デザインシステム スタイルガイド マーケティング ランディングページ 再利用可能 モジュラー cssフレームワーク レスポンシブ モダンデザイン クロード支援開発 ai開発 自動生成 パーツ作成