oil-oil/draw-ui

何を解決するか

draw-ui は、AIエージェント向けの専門的なUIデザインスキルを提供し、抽象的なページ要件と具体的な視覚的デザインまたは機能コードの間のギャップを埋めます。要件の確認プロセスと参照ベースの生成を強制することで、AI生成インターフェースが一般的すぎたり、ビジネスニーズから視覚的に乖離する問題を解決します。

動作方法

このツールは2つの主要モードで動作します：

1. デザイン生成：テキスト要件をUIデザインドラフトに変換します。エージェントはまずページの核心機能、利用可能な参照スクリーンショット、固定領域（ナビゲーションバーなど）を確認します。2つのプロンプティング戦略を使用します：「アナロジー」で創造的な方向性を提示し、「チェックリスト」で正確なビジネスデータを確保します。参照画像を使用してスタイルの一貫性を維持したり、特定のレイアウトフレームを固定できます。
2. コード再構築：デザインドラフトやスクリーンショットを実行可能なHTML/CSSまたはWeChatミニプログラムページに変換します。レイアウト（コードで処理）と複雑な視覚的アセット（画像生成/抽出で処理）を分離し、生成されたページを元のデザインと比較して反復的に出力を最適化します。

対象ユーザー

• UIマックアップやプロトタイプの自動化を希望するAIエージェントユーザー。
• デザインスクリーンショットを迅速に機能的なフロントエンドコード（HTML/CSSまたはWeChatミニプログラム）に変換したい開発者。
• AIを活用して異なるUI方向性を迅速に検証したいプロダクトデザイナー。

特徴

• 参照駆動型デザイン：ナビゲーション／サイドバーを固定してコンテンツ領域のみを再生成する「フレームロック」をサポート。
• マルチプラットフォーム出力：標準的なWebコード（HTML/CSS）とWeChatミニプログラム専用コード（WXML/WXSS）の両方を生成可能。
• アセット分離：ページをCSS駆動のレイアウトと独立した画像アセットに知的に分割し、テキストのぼやけやアーティファクトを回避。
• 反復的最適化：スクリーンショットと比較するワークフローを用いて、最終的なコードが元のデザインのピクセルと一致することを保証。