lijianfei.com

随着以 Claude Code、Cursor、Codex 为代表的编码智能体（Coding Agents）深入实际工程研发，让大语言模型自动生成系统架构图、数据流转拓扑和业务时序图已成为日常高频需求。然而，当前让智能体直接手搓 SVG 的做法往往面临严峻的工程瓶颈：单张图表动辄吞噬超过 15,000 个 Token，且因大模型在连续二维空间几何计算上的先天短板，极易出现文字重叠、贝塞尔连线穿模、布局畸变等灾难性排版；而传统的轻量图表语法又受限于静态表现力与死板的排版规则，无法满足现代技术设计的审美与交互诉求。

为了彻底打破这一困境，开发者 Aryan Utkarsh 开源了面向编码智能体的声明式图表引擎 SeeCode。它提出了一种革命性的架构范式——“声明与几何计算彻底解耦”：智能体仅需编写 30 至 150 行极为精简的粗粒度 JSON 规范，其余所有节点拓扑、正交布线（Orthogonal Routing）、自适应防碰撞、色彩美学、交互探索与多端无头导出均由本地运行时引擎接管，将单图消耗的 Agent Token 锐减 90% 以上。在深入研读 SeeCode 的全部源码后，我从其声明式语法设计、正交布线算法、自愈编译循环以及无头导出管线四大维度，全面复盘其工程实现。

在前端工程动辄被 Webpack、Vite、数以万计的 npm 依赖与庞大运行时框架层层包裹的今天，你是否还记得最初打开一个纯 HTML 文件即可在浏览器运行复杂交互应用的纯粹与震撼？开源项目 floorplan-3d 给出了一个教科书级别的范例：全站仅由一个 185 KB 的单体 index.html 构成，没有多余的构建流水线与外部依赖包，却完整实现了一套毫厘级 2D CAD 户型设计器与逼真沉浸的 Three.js 3D 第一人称漫游引擎。

从 2D 矢量平面布置、家具贴墙磁性吸附、非承重墙拆改、高斯多边形算量到 3D 剖切建筑挤出、程序化家具参数建模、日照光影与动态门体碰撞，本文将深度剖析其架构设计精髓与底层图形学实现细节。

在 AI 辅助编程时代，开发者借助 Claude Code、Cursor、Gemini CLI 或 Codex 可以极快地生成后端业务逻辑与算法代码。然而，一旦涉及前端用户界面（UI）与交互流程的开发，体验往往大打折扣。

用纯自然语言向 AI 描述复杂的前端需求，往往面临巨大的“表达鸿沟”：“左边留白大一点”、“用稍浅一点的紫色”、“按钮要圆角带有微投影”、“手机端折叠成抽屉导航”……这些模糊的人类语言，导致 AI 反复理解偏差，开发者在几十轮对话中消耗数百万 Token 依然得不到符合视觉规范的界面。

开源项目 M3E Canvas 带来了一个极具创意的解法：将 Google 2025 年推出的最新设计规范 Material 3 Expressive 做成轻量可视化画布，开发者在浏览器中拖拽布局、编排页面流转，画布可一键将其编译为结构化、工业级、强约束的“AI 智能体专属 Prompt”，直接喂给 Coding Agent 开始写代码。本文将深度剖析其架构设计。