Vibe Coding | AI Learning Playground

Vibe Codingでの色の見やすさ改善：ライト・ダークモードと操作状態の確認

2026年6月28日更新 2026年10月3日

Vibe Codingで実装したUIコンポーネントの色が、ライト/ダーク、ホバー、選択、フォーカス状態で崩れた経験から、再発を減らすために構築しているハーネスを整理します。

2026年6月21日更新 2026年10月18日

2026年3月22日〜6月21日の148件の変更記録と、共通ルール・検査の実装から、Vibe Codingの開発と保守の違い、測定できていない範囲を整理します。

2026年6月19日更新 2026年10月3日

Claude Designで初期案を作り、Figma・Canva・Claude Codeで仕上げる工程との役割分担を、非技術者にも分かる作業例と判断表で説明します。

2026年6月18日更新 2026年10月3日

Vibe Codingの本来の意味と、会話しながらAIに実装を任せる開発との違いを整理し、試作品と本番利用で人が確認すべき範囲を説明します。

2026年5月17日更新 2026年10月12日

AIにMermaid記法の作成を依頼した際に実際に発生した5つの問題パターン（特殊文字、矢印の向き、ラベル長、日本語、入れ子）と、それぞれの対処方法を記録します。