Bento UI
サイズ違いのカードで主従を明確にする
QA: OK / D-rank: 1 / D-margin: 0.123278
各ページに参考リンク・非公式注記・スタイル別プロンプトを付与。QAスコアはPlaywright比較の結果を表示。
注記: 参考リンクは学習用途。最終デザインは独自実装であり、直接複製を目的にしていません。
詳細な比較結果(JSON/Markdown)を確認できます。
サイズ違いのカードで主従を明確にする
QA: OK / D-rank: 1 / D-margin: 0.123278
均一カードで比較しやすい構造
QA: NG / D-rank: 9 / D-margin: -0.078028
可変高カードの流動的配置
QA: OK / D-rank: 2 / D-margin: 0.097783
左説明+右ビジュアルで訴求
QA: NG / D-rank: 3 / D-margin: 0.031728
KPIと分析領域を格子配置
QA: NG / D-rank: 9 / D-margin: -0.099205
時系列を縦軸で表示
QA: NG / D-rank: 10 / D-margin: -0.010423
列で進捗を可視化
QA: NG / D-rank: 9 / D-margin: -0.008746
立体表現を抑えた平面設計
QA: NG / D-rank: 5 / D-margin: 0.046569
同系色で柔らかい凹凸
QA: NG / D-rank: 10 / D-margin: -0.200203
半透明パネルと背景グラデ
QA: NG / D-rank: 10 / D-margin: -0.007709
太線と高彩度で強い主張
QA: NG / D-rank: 1 / D-margin: 0.108969
厳格グリッドとタイポ主導
QA: OK / D-rank: 2 / D-margin: 0.254716