AI 对话 UI 主题设计工具架构方案

一、 核心交互设计理念

为了提供极致的“交互友好”体验，我们在 UI/UX 设计层面遵循以下三个原则：

1. 所见即所得 (WYSIWYG)： 屏幕左侧为配置面板，右侧为 1:1 还原的聊天窗口预览。任何修改（如气泡颜色、圆角大小）必须在 <50ms 内反映在预览区。
2. 分层配置 (Layered Config)： 将配置项分为“基础设置”（主题色、字体）、“组件设置”（头像、气泡、Loading动画）和“高级设置”（Markdown渲染样式、代码块高亮主题），避免信息过载。
3. 预设驱动 (Preset Driven)： 提供“ChatGPT风”、“Claude风”、“极简风”等一键预设，降低用户上手门槛。

二、 技术架构设计 (Architecture)

本工具采用现代前端框架（React/Vue）构建，核心流程如下：用户操作表单 -> 更新全局 State -> State 映射为 CSS 变量 -> 注入预览组件 -> 导出为 JSON/CSS 代码。

三、 核心功能模块详解

1. 动态样式注入系统 (The Style Engine)

这是工具的心脏。我们不生成静态 CSS 文件，而是通过 JavaScript 动态修改 CSS CSS Custom Properties (Variables)。这种方式性能最高，且易于集成。

2. 组件级定制

• 对话气泡 (Bubbles)： 支持定义背景色、文字色、圆角 (Border Radius)、阴影 (Box Shadow)。
• 头像 (Avatars)： 支持上传图片、设置形状（圆形/方形）、位置（左/右）。
• 打字机效果 (Typing)： 自定义光标颜色、打字速度模拟。

四、 核心代码实现 (Implementation)

1. 定义样式变量映射 (Variables Mapping)

首先，我们需要定义配置状态如何映射到 CSS 变量。这里使用 TypeScript 定义接口：

// ThemeConfig 类型定义
interface ThemeConfig {
  primaryColor: string;
  secondaryColor: string;
  userBubbleBg: string;
  botBubbleBg: string;
  fontSize: number;
  borderRadius: number;
}

// 将配置转换为 CSS 变量对象
const generateCssVars = (config: ThemeConfig) => {
  return {
    '--primary-color': config.primaryColor,
    '--user-bubble-bg': config.userBubbleBg,
    '--bot-bubble-bg': config.botBubbleBg,
    '--chat-font-size': `${config.fontSize}px`,
    '--bubble-radius': `${config.borderRadius}px`,
  };
};
    

2. React 实时预览组件 (Preview Container)

在 React 组件中，我们将计算出的 CSS 变量直接应用到根元素的 style 属性上，实现即时渲染。

import React from 'react';

const ChatPreview = ({ config }) => {
  // 获取动态样式对象
  const styleVars = generateCssVars(config);

  return (
    // 核心：将变量注入到这个 Wrapper 的作用域中
    

      
      

        
AI
        

          你好！我是你的 AI 助手。请问有什么可以帮您？
        
      

      

        

          我想设计一套暗黑风格的 UI。
        
        
Me
      

    
  );
};
    

3. 配套的 CSS (CSS Structure)

CSS 只需要引用上述定义的变量即可，无需关心具体数值。

.chat-preview-wrapper {
  font-size: var(--chat-font-size, 16px);
  background-color: var(--bg-color, #fff);
}

.bubble {
  padding: 12px 16px;
  border-radius: var(--bubble-radius, 8px);
  max-width: 80%;
}

.bot-bubble {
  background-color: var(--bot-bubble-bg, #f3f4f6);
  color: var(--text-color, #000);
  border-bottom-left-radius: 2px; /* 拟态风格 */
}

.user-bubble {
  background-color: var(--primary-color, #3b82f6);
  color: #fff;
  border-bottom-right-radius: 2px;
}
    

五、 总结与展望

通过这套架构，我们不仅实现了一个设计工具，更建立了一套 AI 对话 UI 的设计规范 (Design System)。未来的扩展方向包括：

• 导出 Tailwind Config： 直接生成 `tailwind.config.js` 文件供开发者使用。
• Web Component 封装： 将设计好的 Chat UI 导出为单一的 `` 标签，随处可用。