AI 设计推理层

概述

AI 设计推理层是一种在 AI 助手生成 UI 代码之前插入专业设计决策过程的架构模式：通过知识库驱动的检索+推理，将用户的自然语言请求转化为产品类型专属的完整设计系统规范，再交由 AI 编码实现。

关键内容

为何需要这一层？

AI 助手直接生成 UI 代码的痛点：语法正确但美学随意——颜色随机、字体凑合、布局平庸，完全不知道行业视觉惯例（如 SaaS 深色 + 技术感，美容 Spa 柔粉 + 高端质感）。

设计推理层的作用：在"生成代码"之前插入一次"设计咨询"步骤。

工作流模式

用户请求（自然语言）
    ↓ 多域并行检索
知识库检索（产品类型 / 风格 / 色彩 / 字体 / 落地页模式）
    ↓ 推理引擎整合
完整设计系统输出（风格 + 颜色 + 字体 + 反模式警告）
    ↓
AI 按规范生成 UI 代码

与直接生成的对比

维度	直接生成	设计推理层介入
颜色选择	随机或训练数据均值	行业专属色彩体系
字体	通用（Arial/Inter）	品牌气质匹配字体对
反模式	无感知	明确输出禁止事项
个性化	无	按产品类型 161 种定制

实现方式

典型实现（UI-UX-Pro-Max）： - 知识库：CSV 文件集（风格/色彩/字体/UX准则/推理规则） - 检索：BM25 + Regex 混合，5 路并行（产品→风格→颜色→字体→落地页） - 推理：JSON 条件规则（行业专属决策树） - 集成：AI Skill 文件自动激活 or slash 命令触发

代表实现

UI-UX-Pro-Max — 67 种风格 + 161 种色彩 + 57 种字体配对的参考实现

来源

raw/articles/ai-tools/claude-skills/blog-01-overview.md