Web・UIデザイン

shadcn/ui と Tailwind CSS で、アクセシブルでレスポンシブな UI を作るためのガイド。ダークモード、テーマ設定、キャンバスを使ったビジュアルデザインの考え方も含みます。

UI のスタイル、配色、フォントの組み合わせ、UX ガイドライン、チャート、技術スタック別のヒントを検索できるデザイン知識ベース。実装前に見た目の方向性を決められます。

動いている Web サイトのレイアウト、レスポンシブ、アクセシビリティ、一貫性の問題を点検し、最小限の変更でソースコードを修正して再確認します。

ページやコンポーネントを WCAG 2.2 レベル AA に照らして監査します。キーボード、フォーカス、コントラスト、名前とラベル、構造、フォーム、ダイアログ、動的な更新、ズーム、ターゲットサイズを扱い、指摘ごとに達成基準を示します。

テーマからジェネレーティブアートの宣言文を書き、シード切替・パラメータスライダー・PNG出力を備えた p5.js 作品に仕上げます。

Penpot の MCP サーバー経由で、Web・モバイル・デスクトップの UI を Penpot 内で設計します。デザインシステムの確認、コンポーネントとアクセシビリティの規則、各プラットフォームのサイズを備えています。

画面やコンポーネントに必要なすべての状態を洗い出します。読み込み、空、エラー、一部のみ成功、無効、オフライン、権限なし、極端な内容まで、それぞれでユーザーに何が見え、何ができるかを決めます。

再設計なしにどんな言語でも載せられる UI にします。メッセージカタログ、ロケールに応じた書式、文字の長さが変わっても崩れないレイアウト、CJK と右から左への対応、適切な URL での言語切替を扱います。

特定の画面幅で崩れるレイアウトの本当の原因を見つけます。横スクロール、はみ出し、縮まない flex の子要素、効かない sticky、スマホでの 100vh、ブラウザの UI の下に隠れる固定バーを扱います。

どちらのテーマでも正しく表示されるライトモードとダークモードを作ります。意味ベースの色トークン、システム設定＋手動切替、読み込み時に誤ったテーマが一瞬出ないこと、両テーマでのコントラスト確認までを扱います。

3 層のデザイントークン（プリミティブ、セマンティック、コンポーネント）の設計、コンポーネント仕様の作成、トークンに準拠した Chart.js 付き HTML スライドの生成を支援します。

TypeScript、Tailwind CSS、shadcn/ui で複雑な自己完結型 React Web アーティファクトを構築します。