joeseesun/qiaomu-design

解決する課題

AIで生成されたユーザーインターフェースは、しばしば「デフォルトのAI風」—一般的なパープルのグラデーション、中央に配置されたヘローセクション、繰り返しのテンプレート—を特徴としています。qiaomu-design は、こうした陳腐なスタイルから逸脱させ、最終的な出力がプロフェッショナルなエンジニアリングおよびタイポグラフィ基準を満たすよう強制する、明確なワークフローを提供します。特に中国語文字の扱いにおいて優れた成果を発揮します。

動作方法

Codex や Claude Code などの互換性のあるクライアント向けの Agent Skill として動作し、三段階のクローズドループプロセスを実装します。

1. 診断：エージェントは要件を分析し、タスクの種類に応じて「ばらつき」「動き」「密度」の「ダイアル」を調整します。
2. スタイル・フィッティングルーム：1つの結果ではなく、4つの互いに異なる視覚的アプローチを実際の HTML モックアップとして生成します。ユーザーはローカルプレビュー・サーバーで好みの方向を選択します。
3. 実行：選択されたデザインを、厳格なルールに基づいて実装します。これには「ダラダラ禁止」（AIの陳腐なスタイルを明確に禁止）、58の実際のサイトのデザインシステム（例：Stripe、Linear、Apple）のライブラリ、アクセシビリティおよびエンジニアリング品質のためのプリフライトチェックリストが含まれます。

対象ユーザー

AIエージェントを使ってウェブインターフェースを構築する開発者やデザイナーで、AI生成とは思えない高精細でプロフェッショナルな結果を求める人。

特徴

• スタイル・フィッティングルーム：完全実装前に、4つの実際のミニモックアップを生成し、視覚的な選択を可能にします。
• AI美学への反発：パープルのグラデーションや特定のフォントなど、一般的なAIデザインの陳腐なスタイルを明確に禁止し、創造性を促進します。
• プロフェッショナルなタイポグラフィ：中国語タイポグラフィ（CJKの間隔、システムフォントスタック）に特化したルールを含みます。
• デザインシステムライブラリ：58のトップクラスのウェブサイトから抽出されたデザインシステムへのアクセスで、スタイルの参考にします。
• エンジニアリングの厳格さ：Vercel風のエンジニアリングチェックリストと、Emil Kowalskiのモーションシステムを採用し、高品質なアニメーションを実現します。
• 自己進化：ユーザーのフィードバックを自動的に抽象化し、個人の好みのレジストリとして活用します。