结构化卡片 — AI 交互模式实验室

设计思路

解决的问题：AI 容易输出大段纯文本。用户面对"文字墙"时认知负荷极高——找不到重点、记不住内容、不想读下去。

设计决策：要求 AI 输出结构化 JSON，前端解析后渲染为层级卡片。每张卡片有明确的信息层级：评分星级、分类标签、具体发现、关联设计原则。引用F 型阅读模式（人眼扫描呈 F 型，重要信息应放在顶部和左侧）和米勒定律 7+/-2（工作记忆上限，信息需分组）。

生活类比：超市货架——同一类商品放一起，每层有标签。你不会在超市里迷路，因为信息架构帮你把几万件商品变成了可扫读的区块。而纯文本就像把所有商品随机堆在地上——你根本不想找。

F 型阅读模式米勒定律 7+/-2 信息层级格式塔-邻近性

交互 Demo

切换查看：同样的评审数据，纯文本 vs 结构化卡片。哪个更好读？

纯文本输出（文字墙）

实现方式

DeepSeek 返回结构化 JSON

System Prompt 约束 AI 输出严格 JSON 格式，包含 overall_score、dimensions 数组、findings 子数组和 principle 关联对象。

前端解析 JSON 并渲染卡片

前端按模板渲染：综合评分、维度卡（评分 + 摘要）、发现列表（类型标签 + 具体描述）、设计原则（生活类比 + 改进建议）。CSS Grid 响应式布局。

分类标签与颜色编码

issue（问题）红色标签 + strength（亮点）绿色标签，用户可快速区分正面发现和待改进项。关联原则以可展开面板展示。

源码参考

src/backend/routers/review.py + src/frontend/js/review.js

# review.py - JSON response
@router.post("/api/review")
async def review_design(image: UploadFile, dimensions: str = Form(...)):
    analysis = await glm_analyze(image)
    raw = await deepseek_review(analysis, json.loads(dimensions))
    result = parse_json_response(raw)  # 3-layer fallback parsing
    return result  # { overall_score, dimensions: [{ name, score, summary, findings: [...] }] }

// review.js - Card rendering
function renderReviewCards(data) {
  const html = data.dimensions.map(d => `
    <div class="dimension-card">
      <div class="card-header">
        <h3>${d.name}</h3>
        <span class="score-badge">${d.score}/10</span>
      </div>
      <p>${d.summary}</p>
      ${d.findings.map(f => `
        <div class="finding">
          <span class="tag ${f.type}">${f.type === 'issue' ? '可改进' : '亮点'}</span>
          <strong>${f.title}</strong>
          <p>${f.description}</p>
          <div class="principle">${f.principle.name}: ${f.principle.explanation}</div>
        </div>
      `).join('')}
    </div>
  `).join('');
}