PPPPPPPPPPPPPPPPP           CCCCCCCCCCCCC  MMMMMMMM               MMMMMMMM
P::::::::::::::::P       CCC::::::::::::C  M:::::::M             M:::::::M
P::::::PPPPPP:::::P    CC:::::::::::::::C  M::::::::M           M::::::::M
PP:::::P     P:::::P  C:::::CCCCCCCC::::C  M:::::::::M         M:::::::::M
  P::::P     P:::::P C:::::C       CCCCCC  M::::::M::::M     M::::M::::::M
  P::::P     P:::::PC:::::C                M:::::M M::::M   M::::M M:::::M
  P::::PPPPPP:::::P C:::::C                M:::::M  M::::M M::::M  M:::::M
  P:::::::::::::PP  C:::::C                M:::::M   M::::M::::M   M:::::M
  P::::PPPPPPPPP    C:::::C                M:::::M    M:::::::M    M:::::M
  P::::P            C:::::C                M:::::M     M:::::M     M:::::M
  P::::P            C:::::C                M:::::M      M:::M      M:::::M
  P::::P             C:::::C       CCCCCC  M:::::M       MMM       M:::::M
PP::::::PP            C:::::CCCCCCCC::::C  M:::::M                 M:::::M
P::::::::P             CC:::::::::::::::C  M:::::M                 M:::::M
P::::::::P               CCC::::::::::::C  M:::::M                 M:::::M
PPPPPPPPPP                  CCCCCCCCCCCCC  MMMMMMMM                 MMMMMMMM

-----------------------------------------------------------------------------
>>  P A X E L   |   C O N T E X T   |   M A T R I X
>>  The Spatial Intelligence Protocol for Code Agents
-----------------------------------------------------------------------------

📐 PCM (Pixel-to-Character Mapping)

🛑 别再让 AI 猜布局了。给它们一把尺子。

PCM (Pixel-to-Character Mapping) 是一个旨在为 Code Agent 赋予精准“空间感知能力”的开源协议与工具链。

在当前的前端开发工作流中，Code Agent（如 GPT-4o, Claude 3.5 Sonnet）在持续编码过程中经常因缺乏视觉反馈而产生“布局遗忘”和“样式幻觉”。PCM 彻底终结了这一盲盒现象。 它将复杂的网页像素降维映射为结构化的字符矩阵（Context Matrix），为 AI 提供了一套可读、可计算的 “视觉工作记忆”。

---

💎 核心价值 (Why PCM?)

1. 建立空间维度的一致性 (Context Consistency)

在长对话或大型项目迭代中，Agent 不需要重复“看图”。通过 PCM，它始终拥有一个清晰的页面全局缩略图和组件坐标系。PCM 充当了 AI 编程时的“浮动坐标系（persistent coordinate system）”。

2. 确定性的布局审计 (Deterministic Auditing)

GitLab 强调持续集成。PCM 可以作为一种声明式的布局单元测试（Declarative Layout Unit Test）。

• 流程：代码变更 -> 自动生成 PCM -> 比较 PCM 差异 -> 拦截异常变更。
• 价值：100% 像素级对齐，让布局变动变得像代码逻辑一样可审计、可回溯。

3. Token 效率与推理速度优化

PCM 是高语义密度的纯文本。相比昂贵的 Vision Token，它节省了 90% 以上的上下文窗口成本，且更易被 LLM 的注意力机制（Attention Matrix）捕获。

---

🧩 PCM 协议规范 (v1.0)

PCM 核心引擎（Observer）利用浏览器的渲染引擎抓取 DOM 元素的真实物理位置（Bounding Boxes），并将其投影到一个 $N \times M$ 的字符网格中。

语义字符集示例：

字符	含义	映射元素案例
H	Header	顶部通栏、导航菜单
S	Sidebar	侧边栏容器
C	Content	主内容区、列表卡片
B	Button	关键操作按钮
I	Input	搜索框、输入表单
L	Logo/Icon	品牌标识、关键状态图标
.	Whitespace	用于计算间距（Gap/Padding）

骨架投影示例 (48x12 栅格):

    012345678901234567890123456789012345678901234567
000 LL HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
001 SS .............................................
002 SS . CCCCCCCCCCCCCCCCCCCC . CCCCCCCCCCCCCCCCCCCC
003 SS . CCCCCCCCCCCCCCCCCCCC . CCCCCCCCCCCCCCCCCCCC
004 SS . CCCCCCCCCCCCCCCCCCCC . CCCCCCCCCCCCCCCCCCCC
005 SS . BBBBBBBBBBBB ........ . BBBBBBBBBBBB ......
006 FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF