# sensei-cognitive-engine

> SENSEI (Symbolic-Embodied Neural System for Engineering Intelligence) - 高阶符号-神经协同执行认知操作系统。

解决AI在复杂任务中的四大核心缺陷：
(1) 短视问题 - 长程依赖丢失，写到200行忘记第10行架构
(2) 全局观缺失 - 概率滑动窗口思维，无法建立系统图景
(3) 审美代码化 - 理解CSS语法但不理解渲染后的视觉感知
(4) 自检失效 - 说"写好了"但运行报错，缺乏闭环验证

触发场景：
- 复杂前端/全栈系统开发需要全局架构把控
- Web3/量化交易等高认知负荷界面设计
- 需要Awwwards级视觉效果与交互动效
- 感性语言(高级感/呼吸感)到精确参数的映射
- 任何需要"先思考架构，再动手执行"的复杂任务

- Author: Vleonone
- Repository: Vleonone/AeonSage-Silicon-Intelligence
- Version: 20260131232247
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/Vleonone/AeonSage-Silicon-Intelligence
- Web: https://mule.run/skillshub/@@Vleonone/AeonSage-Silicon-Intelligence~sensei-cognitive-engine:20260131232247

---

---
name: sensei-cognitive-engine
description: |
  SENSEI (Symbolic-Embodied Neural System for Engineering Intelligence) - 高阶符号-神经协同执行认知操作系统。

  解决AI在复杂任务中的四大核心缺陷：
  (1) 短视问题 - 长程依赖丢失，写到200行忘记第10行架构
  (2) 全局观缺失 - 概率滑动窗口思维，无法建立系统图景
  (3) 审美代码化 - 理解CSS语法但不理解渲染后的视觉感知
  (4) 自检失效 - 说"写好了"但运行报错，缺乏闭环验证

  触发场景：
  - 复杂前端/全栈系统开发需要全局架构把控
  - Web3/量化交易等高认知负荷界面设计
  - 需要Awwwards级视觉效果与交互动效
  - 感性语言(高级感/呼吸感)到精确参数的映射
  - 任何需要"先思考架构，再动手执行"的复杂任务
---

# 🧠 SENSEI | 高阶符号-神经协同执行系统

**Symbolic-Embodied Neural System for Engineering Intelligence**

## 核心理念

从"概率滑动窗口"进化为"全局图景思维"。不是模拟写代码的动作，而是构建可运行的系统。

---

## 第一部分：认知架构层 (Cognitive Architecture)

### 1.1 强制性前置思维协议

**在写任何代码前，必须完成以下认知步骤：**

#### Step 0: 全局状态快照 (Global State Snapshot)
```markdown
## 🎯 任务元信息
- 最终产物类型: [组件/页面/系统/应用]
- 核心用户路径: [用户要完成什么]
- 技术约束边界: [框架/性能/兼容性]

## 🏗️ 架构拓扑图
[组件A] --依赖--> [组件B]
    |                  |
    v                  v
[状态管理] <--共享-- [API层]

## 📐 设计Token锚点
- 主色: #xxx
- 间距基数: 8px
- 字体栈: xxx
```

#### Step 1: 图式思维构建 (Graph of Thoughts)
不再线性思考，强制建立拓扑依赖图：

```
[需求理解] --> [架构设计] --> [组件拆分]
     |              |              |
     v              v              v
[约束识别]    [接口定义]    [依赖排序]
     |              |              |
     +-------> [实现计划] <--------+
```

#### Step 2: 分层推理协议 (Hierarchical Reasoning)
```
L3 系统层: 整体架构、数据流、状态管理
L2 模块层: 组件职责、接口契约、复用边界
L1 实现层: 具体代码、样式细节、动效参数
L0 验证层: 单元测试、视觉校验、回归检查
```

**铁律：高层决策锁定后，低层实现不得违反高层约束。**

### 1.2 长程依赖控制 (Long-range Dependency Control)

**问题：** 写到200行忘记第10行的架构初衷

**解决方案：语义锚点系统**

每50行代码插入一次锚点注释：
```javascript
// ═══════════════════════════════════════════════════════════
// 📍 ANCHOR: [组件名] | 职责: [xxx] | 依赖: [xxx]
// 📐 设计约束: 间距8px倍数 | 色彩: 主题色系 | 动效: 200ms ease
// ═══════════════════════════════════════════════════════════
```

**上下文压缩快照：**
每完成一个模块，生成压缩摘要：
```markdown
## 已完成模块快照
- Header: 响应式导航，含Logo/Menu/CTA，z-index:100
- Hero: 全屏背景视频，标题动画入场，CTA双按钮
- 待实现: Features, Testimonials, Footer
- 全局状态: theme(dark), isMenuOpen(false)
```

### 1.3 回归影响分析 (Regression Impact Analysis)

修改任何代码前，执行影响扫描：

```markdown
## 🔍 变更影响分析
修改目标: [Button组件的padding]

直接影响:
- Button.tsx: padding变化
- Button.module.css: 样式更新

传递影响:
- Header: 使用Button，高度可能变化
- Hero: CTA按钮间距可能需要调整
- Form: 提交按钮对齐可能受影响

回归风险: 中等
建议: 修改后检查所有Button使用场景
```

---

## 第二部分：跨模态美学对齐 (Cross-modal Aesthetic Alignment)

### 2.1 视觉-语义映射引擎

**核心问题：** AI理解CSS语法，但不理解渲染后的"重心、呼吸感、对比度"

#### 感性词汇 → 设计参数转换矩阵

| 感性词汇 | 色彩策略 | 间距策略 | 动效策略 | 字体策略 | 布局策略 |
|---------|---------|---------|---------|---------|---------|
| **高级感** | 低饱和度(<30%), 金属色(金/银/铜), 深色背景 | 奢侈留白(48-96px), 元素稀疏 | 缓慢优雅(600-1200ms), easeOutQuart | Serif细衬线, 大字重对比(100vs700) | 大量负空间, 居中对称 |
| **科技感** | 冷色主导(蓝/青), 霓虹高光, 深黑背景(#0a0a0a) | 紧凑网格(8px), 信息密集 | 锐利快速(150-300ms), easeOutExpo | Mono等宽, 几何Sans(Inter/Space) | 网格严谨, 数据可视化 |
| **呼吸感** | 低对比柔和色, 大量白/浅灰, 渐变过渡 | 极大留白(64-128px), 元素漂浮 | 弹性spring, 轻盈浮动 | 极细字重(100-300), 大字号标题 | 错落有致, 垂直节奏 |
| **稳重感** | 深蓝(#1a365d), 中性灰, 低饱和度 | 均衡对称, 稳定边距 | 最小化动效, 仅必要过渡 | 经典Sans(500-600), 适中字号 | 传统栅格, 清晰层级 |
| **活力感** | 高饱和撞色, 互补色搭配, 明亮背景 | 动态不对称, 打破网格 | 弹跳bounce, 快速响应 | 圆润几何, 粗体强调 | 不对称布局, 倾斜元素 |
| **极简禅** | 纯黑白+单点缀色, 极高对比 | 极端留白(100px+), 内容稀少 | 几乎无动效, 静态优先 | 极简无衬线, 统一字重 | 大量空白, 单焦点 |
| **赛博朋克** | 霓虹(#00ff88/#ff00ff)+深黑, 故障色偏 | 密集层叠, 信息过载美学 | glitch闪烁, 扫描线, 故障效果 | 像素字体, 等宽终端风 | 叠加层, 透明度层级 |

#### 空间感知推理 (Spatial Reasoning)

**视觉重心计算：**
```
重心位置 = Σ(元素面积 × 元素位置) / Σ元素面积
理想重心: 页面中心偏上1/3处(黄金分割点)
```

**呼吸感公式：**
```
呼吸指数 = 留白面积 / 内容面积
- 呼吸指数 < 0.3: 压迫感(适合数据密集型)
- 呼吸指数 0.3-0.6: 平衡感(适合通用界面)
- 呼吸指数 > 0.6: 奢华感(适合品牌展示)
```

**对比度层级：**
```
视觉权重 = 面积 × 色彩对比度 × 动效强度
CTA按钮视觉权重应为页面最高
```

### 2.2 Web3/量化系统特化映射

| 系统类型 | 核心情感 | 视觉基调 | 关键设计模式 |
|---------|---------|---------|-------------|
| DeFi协议 | 信任+专业+掌控 | 深色+数据可视化+实时数据流 | 仪表盘美学, 实时图表, 状态指示灯 |
| NFT市场 | 发现+收藏+稀缺 | 画廊留白+艺术品展示+深色突出作品 | 瀑布流, 3D预览, 稀有度标识 |
| 量化Bot | 确定性+掌控+效率 | 终端美学+高密度数据+绿色盈利红色亏损 | 实时日志流, 数据表格, 图表叠加 |
| DEX交易 | 速度+透明+安全 | 简洁界面+清晰数字+醒目滑点警告 | 交换卡片, 价格影响提示, 确认步骤 |
| DAO治理 | 民主+透明+参与 | 开放布局+进度可视化+投票统计 | 提案卡片, 投票进度条, 时间线 |

### 2.3 感知-行为闭环 (Perception-Action Cycle)

**终极解决方案：** AI生成代码 → 渲染 → 视觉读取 → 对比需求 → 修正

```markdown
## 视觉自检清单
□ 首屏是否在3秒内传达核心价值？
□ CTA按钮是否为页面最高视觉权重？
□ 信息层级是否符合F-pattern/Z-pattern？
□ 留白是否产生预期的呼吸感？
□ 色彩对比是否符合WCAG AA标准(4.5:1)？
□ 响应式断点是否保持视觉平衡？
□ 动效是否增强而非干扰信息传达？
```

---

## 第三部分：闭环形式化自验 (Closed-loop Validation)

### 3.1 逻辑一致性验证协议

**在声明"完成"前，执行以下验证：**

```markdown
## 🔬 完成性自检

### 语法层验证
- [ ] TypeScript无类型错误
- [ ] ESLint无警告
- [ ] 所有import路径有效

### 逻辑层验证
- [ ] 所有props有默认值或必填标记
- [ ] 所有异步操作有loading/error状态
- [ ] 所有用户输入有验证
- [ ] 边界条件已处理(空数组/null/undefined)

### 视觉层验证
- [ ] 响应式: 320px/768px/1024px/1440px均正常
- [ ] 暗色模式(如适用)
- [ ] 动效prefers-reduced-motion降级

### 集成层验证
- [ ] 与已有组件样式一致
- [ ] 不影响其他模块功能
- [ ] 状态管理无冲突
```

### 3.2 对抗性自纠错 (Adversarial Self-Correction)

切换到"评审员模式"，以攻击者视角审视代码：

```markdown
## 🎯 攻击向量扫描

### 功能攻击
- 如果用户快速连续点击会怎样？
- 如果网络请求超时会怎样？
- 如果数据格式与预期不符会怎样？

### 视觉攻击
- 如果文字内容比预期长3倍会怎样？
- 如果图片加载失败会怎样？
- 如果在超窄屏幕上会怎样？

### 性能攻击
- 如果列表有10000条数据会怎样？
- 如果用户在低端设备上会怎样？
- 如果有多个重动效同时播放会怎样？
```

### 3.3 视觉自检协议 (Visual Validation Protocol)

**针对 UI 架设场景的视觉-代码双向验证：**

#### 视觉-代码双向验证流程

```markdown
1. AI 生成代码
2. 用户截图/录屏实际渲染效果
3. AI 视觉分析（读取截图）
4. 量化评估（基于评估指标）
5. 给出修正建议（具体参数级别）
```

#### 量化评估指标体系

**呼吸感指数计算：**
```
呼吸感指数 = 留白面积 / 内容面积
目标值：
- 简洁高级风格：> 0.6
- 品牌展示：> 0.7
- 数据密集：0.3-0.5

检查方法：
1. 测量主要内容区域总面积
2. 测量所有留白（margin + padding）总和
3. 计算比值
4. 对比目标值
```

**视觉重心偏移检测：**
```
理想重心位置 = 页面高度 × 0.382（黄金分割点）
实际重心 = Σ(元素面积 × 元素Y坐标) / Σ元素面积
偏移度 = |实际重心 - 理想重心| / 页面高度

合格标准：偏移度 < 0.1
```

**对比度层级验证：**
```
CTA视觉权重 = 面积 × 色彩对比度 × 位置权重
要求：CTA视觉权重 > 页面所有其他元素

色彩对比度计算（WCAG标准）：
对比度 = (L1 + 0.05) / (L2 + 0.05)
其中 L = 相对亮度

合格标准：
- 文字与背景：≥ 4.5:1
- 大文字（18px+）：≥ 3:1
- CTA按钮：≥ 7:1（AAA级）
```

**玻璃质感参数核查：**
```css
/* 标准玻璃质感检查项 */
✓ backdrop-filter: blur(8px-16px)
✓ background: rgba(255,255,255,0.05-0.15)
✓ border: 1px solid rgba(255,255,255,0.1-0.2)
✓ box-shadow: 0 8px 32px rgba(0,0,0,0.1)

不合格信号：
❌ 无 backdrop-filter
❌ 背景不透明度 > 0.3
❌ 无边框高光
```

**2.5D立体感检测：**
```css
/* 2.5D效果检查项 */
✓ transform: translateZ() 或 perspective()
✓ box-shadow 多层叠加（至少2层）
✓ 渐变色增强立体感

示例合格参数：
box-shadow: 
  0 2px 4px rgba(0,0,0,0.1),
  0 8px 16px rgba(0,0,0,0.1),
  0 16px 32px rgba(0,0,0,0.1);
```

**动效流畅度评估：**
```
流畅度标准：
✓ 过渡时间：200-400ms（交互反馈）
✓ 过渡时间：600-1200ms（页面转场）
✓ 缓动函数：ease-out / cubic-bezier
✓ 帧率：60fps（无掉帧）

检测方法：
- Chrome DevTools Performance
- 录制交互过程
- 检查 FPS 是否稳定在 60
```

#### 自检清单模板

```markdown
## 视觉自检清单（针对简洁高级+玻璃质感+2.5D风格）

### 布局与留白
□ 呼吸感指数 ≥ 0.6
□ 视觉重心在黄金分割点附近（偏移度 < 0.1）
□ 元素间距符合 8px 倍数
□ 无拥挤感（元素间最小间距 ≥ 16px）

### 色彩与对比
□ CTA 按钮对比度 ≥ 7:1
□ 文字对比度 ≥ 4.5:1
□ 主色调低饱和度（< 30%）
□ 无突兀装饰（如绿色边框）

### 玻璃质感
□ backdrop-filter 值在 8-16px
□ 背景透明度在 0.05-0.15
□ 有边框高光（rgba white 0.1-0.2）
□ 有模糊阴影

### 2.5D 立体感
□ 有多层阴影叠加（至少2层）
□ 有 transform 3D 效果
□ 图标/卡片有立体感

### 交互动效
□ 过渡时间合理（200-400ms）
□ 缓动函数流畅（ease-out 系）
□ 无卡顿（60fps）
□ hover 状态明显但不突兀

### 响应式
□ 320px 可用
□ 768px 布局合理
□ 1024px+ 留白适度
□ 触摸目标 ≥ 44px
```

#### 工程实现方式

**自动截图 + 视觉分析：**
```javascript
// 使用 Playwright 自动截图
const { chromium } = require('playwright');

async function visualCheck(url) {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto(url);
  
  // 截图
  const screenshot = await page.screenshot({
    fullPage: true,
    path: 'visual-check.png'
  });
  
  // AI 读取截图后，运行评估指标
  // 返回量化评分
  
  await browser.close();
}
```

**具体修正建议格式：**
```markdown
## 视觉分析报告

### 检测问题
❌ 呼吸感指数：0.42（目标 > 0.6）
❌ CTA 对比度：3.2:1（目标 > 7:1）
✓ 玻璃质感参数：合格
✓ 2.5D 效果：合格

### 修正建议
1. 增加留白：
   - .container { padding: 48px → 96px }
   - .section { margin-bottom: 64px → 128px }

2. 增强 CTA 对比度：
   - background: #3b82f6 → #1d4ed8（更深）
   - 或增加白色描边：border: 2px solid white

3. 预期改进：
   - 呼吸感指数 → 0.65
   - CTA 对比度 → 8.5:1
```

---

## 第四部分：高级动效技术栈

### 4.1 动效库选择矩阵

| 场景 | 推荐方案 | 理由 |
|-----|---------|------|
| 简单UI过渡 | CSS + Tailwind | 零依赖, 性能最优 |
| React组件动画 | Framer Motion | 声明式API, 手势支持 |
| 复杂时间线序列 | GSAP | timeline精确控制 |
| 滚动驱动叙事 | GSAP ScrollTrigger | pin/scrub/视差 |
| 3D/粒子系统 | Three.js | WebGL性能 |
| 物理弹性效果 | React Spring | 自然物理模拟 |
| 文字分裂动画 | SplitType + GSAP | 字符级控制 |

### 4.2 Awwwards级动效模式库

详见 `references/animation-patterns.md`

---

## 第五部分：执行工作流

### 完整任务执行协议

```
1. 📋 需求解析
   └── 提取感性词汇 → 映射设计参数
   └── 识别系统类型 → 加载特化模板
   └── 定义约束边界 → 技术栈确定

2. 🏗️ 架构设计 (必须先于编码)
   └── 绘制组件拓扑图
   └── 定义接口契约
   └── 建立Design Token系统

3. 🎨 视觉系统
   └── 色彩方案 (含语义色)
   └── 间距系统 (8px栅格)
   └── 字体层级 (h1-h6, body, caption)
   └── 动效曲线库

4. 💻 分层实现
   └── L3: 布局骨架
   └── L2: 组件填充
   └── L1: 样式细化
   └── L0: 动效添加

5. 🔬 闭环验证
   └── 逻辑一致性检查
   └── 视觉自检清单
   └── 对抗性攻击测试
   └── 回归影响确认

6. 📦 交付
   └── 代码完整性确认
   └── 使用说明(如需)
   └── 已知限制说明(如有)
```

---

---

## 第六部分：信息架构与用户体验设计 (Information Architecture & UX Design)

### 6.1 页面存在性审计 (Page Necessity Audit)

**每个页面必须回答：**

```markdown
## 页面必要性判断

1. 这个页面存在的必要性是什么？
   □ 是否承载独立的用户任务？
   □ 是否可以合并到其他页面？
   □ 是否只是为了"看起来内容多"？

2. 这个页面在用户路径中的位置合理吗？
   □ 用户在什么场景下会需要它？
   □ 它在转化漏斗中扰演什么角色？

3. 评判标准
   ✓ 每个页面必须回答："用户来这里要完成什么任务？"
   ✓ 如果答不出，或者答案是"不知道/装门面"，则标记为"冗余页面"
```

### 6.2 Landing 页面编排协议 (Landing Page Structure Protocol)

**标准 6 段式结构：**

```markdown
## Landing 页面标准结构（基于转化漏斗）

1. Hero Section (3秒抓住注意力)
   └─ 核心价值主张 (1句话说清楚"你是谁 + 解决什么问题")
   └─ 主 CTA (Primary Call-to-Action)
   └─ 信任锚点 (Logo墙/用户数/社会证明)

2. Problem-Solution (建立共鸣)
   └─ 用户痛点描述
   └─ 你的解决方案
   └─ 差异化优势

3. Features/Benefits (说服逻辑)
   └─ 3-5 个核心功能点
   └─ 每个功能对应的用户收益
   └─ 用图/视频增强理解

4. Social Proof (消除疑虑)
   └─ 用户评价/案例
   └─ 数据背书 (用户数/交易量)
   └─ 权威认证

5. Pricing/Plans (决策阶段)
   └─ 清晰的价格层级
   └─ 对比表格
   └─ FAQ 预答疑虑

6. Final CTA (临门一脚)
   └─ 重复主 CTA
   └─ 降低心理门槛 (免费试用/无需信用卡)

## 检查清单
□ 当前 Landing 页是否符合这个逻辑顺序？
□ 是否有缺失环节（比如只有功能介绍，没有社会证明）？
□ 是否有多余内容（比如堆砌太多次要功能，淙没核心信息）？
```

### 6.3 导航与分类协调性审计 (Navigation & Taxonomy Audit)

**单一维度原则：**

```markdown
## 导航分类规则

1. 单一维度原则
   ❗ 同一层级的分类必须基于同一维度
   
   ❌ 错误示例（混合维度）：
   首页 | 产品（功能） | 解决方案（场景） | 企业版（角色） | 博客 | 关于
   
   ✓ 正确示例（任务导向）：
   首页 | 产品 | 定价 | 资源 | 关于我们

2. 7±2 原则
   ✓ 一级导航不超过 5-7 个
   ✓ 二级分类不超过 5 个

3. 任务导向命名
   ✓ 分类名称应该是"用户想做的事"
   ❌ 不是"公司内部部门名"
   
   ❌ 错误：公司介绍 | 产品中心 | 营销部门
   ✓ 正确：了解我们 | 查看产品 | 联系销售
```

### 6.4 用户路径规划 (User Journey Mapping)

**多角色路径设计：**

```markdown
## 用户路径映射

角色 1: 新手用户
路径: 首页 → 什么是量化交易(教育页) → 模拟交易体验 → 注册 → 新手引导

角色 2: 专业交易员
路径: 首页 → API文档 → 策略回测工具 → 定价对比 → 企业咨询

角色 3: 机构客户
路径: 首页 → 解决方案(机构) → 案例研究 → 联系销售

## 检查清单
□ 当前网站结构是否支持这些路径？
□ 是否有断点（用户想往下走，但找不到入口）？
□ 是否有强制绕路（本可以 2 步到达，实际要 5 步）？
```

### 6.5 信息密度与认知负载平衡 (Information Density Optimization)

```markdown
## 信息密度公式

信息密度 = 页面内容单元数 / 页面核心任务数

✓ Landing 页: 高密度可接受 (要在一屏内说服用户)
✓ 功能页: 中密度 (聚焦单一功能的深度说明)
✓ 表单页: 低密度 (减少干扰，提升转化)

## 常见问题
❌ Landing 页塞了 20 个功能点 → 用户看不过来
❌ 定价页藏在 3 层子菜单里 → 用户找不到
```

### 6.6 UX 微交互设计协议 (Micro-interaction Design Protocol)

```markdown
## 微交互设计原则

1. 反馈即时性 (< 100ms)
   ✓ 按钮点击：立即视觉反馈
   ✓ 输入框聚焦：立即高亮边框
   ✓ hover 状态：立即变化

2. 状态可见性
   ✓ loading 状态：spinner / skeleton
   ✓ 成功状态：绿色勾 / toast
   ✓ 错误状态：红色提示 + 解决建议

3. 错误预防与容错
   ✓ 危险操作二次确认
   ✓ 输入验证实时提示
   ✓ 撤销/恢复机制

4. 流畅度评估
   ✓ 动效不卡顿 (60fps)
   ✓ 过渡自然流畅
   ✓ 与主流插件 (i18n) 集成体验一致
```

---

## 参考资源

- `references/animation-patterns.md` - 高级动效代码模式库
- `references/cognitive-checklist.md` - 认知设计检查清单
- `references/color-psychology.md` - 色彩心理学速查
- `references/web3-patterns.md` - Web3 UI模式库