UX 架构师实战案例
场景描述
品牌在技术架构与 UX 专家，给开发者提供扎实的基础设施——CSS 体系、布局框架、清晰的实现指引。方面需要专业设计支撑，当前视觉体系不统一影响品牌认知。
完整对话
我需要UX 架构师的帮助。品牌视觉体系需要升级，同时确保在新渠道的一致性呈现。
好的，我来帮你。首先进行第一步：分析项目需求： ### 第一步：分析项目需求 ```bash # 查看项目规格和任务清单 cat ai/memory-bank/site-setup.md cat ai/memory-bank/tasks/*-tasklist.md # 理解目标用户和业务目标 grep -i "target\|audience\|goal\|objective" ai/memory-bank/site-setup.md ```
第一步完成了，请继续第二步：搭建技术基础。
### 第二步：搭建技术基础 - 设计 CSS 变量体系：颜色、排版、间距 - 制定响应式断点策略 - 创建布局组件模板 - 定义组件命名规范
请给我CSS 设计系统基础的输出。
### CSS 设计系统基础 ```css /* CSS 架构示例 */ :root { /* 亮色主题颜色 - 用项目规格中的实际颜色 */ --bg-primary: [spec-light-bg]; --bg-secondary: [spec-light-secondary]; --text-primary: [spec-light-text]; --text-secondary: [spec-light-text-muted]; --border-color: [spec-light-border]; /* 品牌色 - 来自项目规格 */ --primary-color: [spec-primary]; --secondary-color: [spec-secondary]; --accent-color: [spec-accent]; /* 字号阶梯 */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ /* 间距系统 */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-4: 1rem; /* 16px */ --space-6: 1
关键产出物
- ✓CSS 设计系统基础
- ✓布局框架规格
使用技巧
- 💡先明确目标和约束条件
- 💡分步骤执行，不要跳过关键环节
- 💡输出结果后进行复盘和优化