基于设计图的组件自动拆分

可视化演示

展示图层聚类、命名推断、嵌套关系还原与Token映射全流程，实现从设计图到结构化组件的自动化转换，含数据流背景和发光动画。

图层聚类

拆乐高别墅的第一步，是把混在一起的积木先归堆。一个训练有素的小助手不会一块块随机翻，而是看积木的颜色、大小和摆放位置：四块灰色小砖叠在门边，多半属于“窗”；几块蓝色大板平放在屋顶附近，多半属于“屋顶”。这种“位置相近、外观相称就放一堆”的策略，正是图层聚类的直觉来源。

在 AI 组件拆分里，图层就是那一块块积木。每个图层有尺寸（宽高）、位置（坐标）、视觉属性（填充色、圆角）等信息。做聚类前，先要定义“两个图层像不像”，也就是相似度。我们把外观接近和空间邻近两类信息抽成特征，用加权公式合并，得到一个 0 到 1 的分数。

$$\displaystyle \mathrm{sim}(i,j) = 1 - \Big( w_1 \times \frac{|h_i - h_j|}{\max(h_i, h_j)} + w_2 \times \frac{\mathrm{dist}(i,j)}{D_{\max}} \Big)$$

1. 高度差异项：比较两个图层高度差占较大者的比例，值越小说明尺寸越协调。

$$\displaystyle \frac{|h_i - h_j|}{\max(h_i, h_j)}$$

2. 空间距离项：把中心点距离除以画布最大可能距离，压缩到 0 到 1。

$$\displaystyle \frac{\mathrm{dist}(i,j)}{D_{\max}}$$

3. 加权合并：给两项分配权重并求和，得到“不相似程度”。

$$\displaystyle w_1 \times \frac{|h_i - h_j|}{\max(h_i, h_j)} + w_2 \times \frac{\mathrm{dist}(i,j)}{D_{\max}}$$

4. 取补转换：用 1 减去差异得到相似度，越大越应归为同一组件。

$$\displaystyle 1 - \Big( w_1 \times \frac{|h_i - h_j|}{\max(h_i, h_j)} + w_2 \times \frac{\mathrm{dist}(i,j)}{D_{\max}} \Big)$$

当相似度矩阵算完，小助手就开始按分数归堆：分数超过阈值的积木块装进同一个塑料袋，像乐高套装里按零件类型分好的小格子。这一堆堆零件，就是后面要命名的“组件候选”。

命名推断

积木归堆之后，每堆还需要一个铭牌。如果袋子外面写着“窗框”、“屋顶”，组装时就能直接拿起；如果只写着“零件 A1”，后道工序就要反复猜测。命名推断要做的，正是给每个候选组件贴上一块靠谱的铭牌。

命名推断的主要来源是图层名——设计工具里每个图层都有一个名字，比如 card_title、user_avatar。很多团队有命名规范，但更多时候命名是混乱的（如 group_123、Copy）。既然不能指望规范，就要靠语义词典：把 “title/header/heading“ 归到标题类，把 ”avatar/photo/head” 归到头像类，然后看图层名里命中了哪些关键词。

$$\displaystyle \mathrm{Conf}(C|L) = \frac{\sum_{k \in C} \mathbb{I}[k \in L]}{|C|} \times \log\frac{N}{n_C + 1}$$

1. 指示函数：统计关键词 k 是否出现在图层名 L 中，出现记 1，不出现记 0。

$$\displaystyle \mathbb{I}[k \in L]$$

2. 命中率：把组件类型 C 的所有关键词做平均命中，衡量匹配强度。

$$\displaystyle \frac{\sum_{k \in C} \mathbb{I}[k \in L]}{|C|}$$

3. 稀有度权重：组件类型在全库越少见，该项权重越高，避免常见词霸榜。

$$\displaystyle \log\frac{N}{n_C + 1}$$

4. 置信度乘积：命中率与稀有度权重相乘，即得命名推断的置信度分数。

$$\displaystyle \frac{\sum_{k \in C} \mathbb{I}[k \in L]}{|C|} \times \log\frac{N}{n_C + 1}$$

命名就像给零件袋贴标签，标签不只靠袋子上的旧文字，还要看里面的零件长什么样、装在哪：多层证据叠加后，置信度最高的类型成为组件名。铭牌一旦贴好，组件库的索引就有了名字。

嵌套关系还原

乐高别墅拆完后，零件虽已归堆，但你还想留下一张“装配说明书”，说明哪个零件装进哪个大件里。小助手会拿着每个零件袋的边界框，按大小和包含关系，画出父子树。嵌套关系还原，就是把平面上的组件边界框重建为树状结构。

父组件通常是一个大矩形，完全包住子组件的小矩形。但真实设计稿里，弹窗浮层可能盖住父组件，图片会和说明文字部分重叠，因此不能只看“是否包含”，还要综合打分：包含面积越大、距离越近、自身占页面比例越大，越可能是父容器。

$$\displaystyle \mathrm{Score}(a \to b) = \frac{\mathrm{overlap}(a,b)}{A_b} - \frac{\mathrm{dist}(a,b)}{D_{\max}} + \frac{A_a}{A_{\text{page}}}$$

1. 包含面积比：b 的面积有多少落在 a 的矩形内，越大代表 a 越可能是 b 的父容器。

$$\displaystyle \frac{\mathrm{overlap}(a,b)}{A_b}$$

2. 间距惩罚：两者中心距离归一化，距离越远父子关系越不可信。

$$\displaystyle \frac{\mathrm{dist}(a,b)}{D_{\max}}$$

3. 容器先验：a 占页面比例越大，它更可能是容器而非子元素。

$$\displaystyle \frac{A_a}{A_{\text{page}}}$$

4. 综合打分：用三项加减合成嵌套得分，对每个候选父容器打分，最高分者成为父节点。

$$\displaystyle \frac{\mathrm{overlap}(a,b)}{A_b} - \frac{\mathrm{dist}(a,b)}{D_{\max}} + \frac{A_a}{A_{\text{page}}}$$

画出父子树之后，原来的乐高别墅就像有了结构图纸：页面在最外层，是最大的容器；下一层是导航栏、内容卡、底栏等组件；内容卡里头还有标题、图片、按钮这些子组件。组装代码时，只需照着装配树逐层生成。

Token映射

乐高工厂有一种标准色卡：不同的红不是使用千种红色，而是统统归为“砖红153号”。拆解别墅时，小助手也会把外观相近的颜色和尺寸归到标准色号上——这一步就是 Token 映射。设计稿里每个图层可能有几十种近似颜色（如 #FF0000、#FE0000），如果直接输出到代码，会产生大量无意义变量。

Token 是设计系统的最小符号，指颜色、字号、间距值等命名变量。Token 映射就是把这些裸值，映射到设计系统预设的 Token 上，让组件代码里出现的是 colorPrimary、spacing-md 这样的语义变量，而不是魔法数字。

$$\displaystyle \mathrm{map}(v) = \arg\min_{t \in T} \Big( \lambda_1 \times \Delta_{\text{color}}(v, \mu_t) + \lambda_2 \times \frac{|s - \hat{s}_t|}{\hat{s}_t} \Big)$$

1. 颜色距离：比较实际颜色值 v 与 Token 中心色 μ_t 的差距，通常按 RGB 通道归一化计算。

$$\displaystyle \Delta_{\text{color}}(v, \mu_t)$$

2. 尺寸偏差：实际尺寸 s 与 Token 基准值 ŝ_t 的相对差距，消除不同量级间的影响。

$$\displaystyle \frac{|s - \hat{s}_t|}{\hat{s}_t}$$

3. 加权组合：用权重 λ₁、λ₂ 把色差与尺寸差合并为统一代价，权重可按设计系统偏好调节。

$$\displaystyle \lambda_1 \times \Delta_{\text{color}}(v, \mu_t) + \lambda_2 \times \frac{|s - \hat{s}_t|}{\hat{s}_t}$$

4. 选择最小代价：遍历 Token 集合 T，取总代价最小者作为映射结果。

$$\displaystyle \arg\min_{t \in T} \Big( \lambda_1 \times \Delta_{\text{color}}(v, \mu_t) + \lambda_2 \times \frac{|s - \hat{s}_t|}{\hat{s}_t} \Big)$$

经过 Token 映射，一堆花花绿绿的积木终于变成了标准色号；从前端角度看，组件代码里出现的是可复用的语义变量，而不是一长串未经整理的魔法数字。

工程落地路径

从手工拆解到产线自动化，不是买一台机器就搞定。拆乐高的工厂会先搭一条小试验线：先用几套别墅手工验证拆解逻辑，再建立标准零件库，最后才让机器全速跑起来。工程落地路径与之对应：先做概念验证（POC），再解决数据标注，接着做模型与阈值调优，最后集成到生产环境。

概念验证阶段只验证一件事：设计稿进、组件树出，这条路是否端到端走得通。随后要有人工标注的高质量样本集（组件边界、组件名、父子关系），用于衡量算法效果。调优阶段主要搜索聚类阈值、命名词典与 Token 权重，并用统一指标把关。

$$\displaystyle F1 = \frac{2 \times \text{Precision} \times \text{Recall}}{\text{Precision} + \text{Recall}}$$

1. 精确率：预测为正的样本里真正正确的比例，衡量“拆出来的对不对”。

$$\displaystyle \text{Precision} = \frac{TP}{TP + FP}$$

2. 召回率：真正的正样本里被成功找回的比例，衡量“该拆的是否都拆了”。

$$\displaystyle \text{Recall} = \frac{TP}{TP + FN}$$

3. F1 调和平均：在精确率和召回率之间求平衡，防止只追求其中一项。

$$\displaystyle F1 = \frac{2 \times \text{Precision} \times \text{Recall}}{\text{Precision} + \text{Recall}}$$

POC 相当于在车间试拆一架玩具直升机的试验线；生产部署则变身为全自动流水线，支持批量页面同时拆解。有了稳定的指标做质检，工厂才敢宣称“自动化拆解率显著提升”。

实践案例与陷阱

老拆件师傅知道一些翻车场景：有的包装标签贴错、有的零件和相邻件粘得太紧，还有的盒子里混进了其他套装的件。组件自动拆分也一样，有不少反复踩过的坑。命名混乱、浮层重叠、设计稿只导出局部图层，都可能导致拆分结果大幅下降。

面对这些失败因素，工程上不能只凭感觉，需要一组指标来驱动迭代。常用的质量评估指标有三个：组件复用率衡量拆分出的组件能否被多处使用；还原精度衡量拆分结构与原图视觉的对齐程度；层级正确率衡量父子关系与人工标注的一致性。

$$\displaystyle Q = \lambda_1 R_{\text{复用}} + \lambda_2 A_{\text{还原}} + \lambda_3 C_{\text{层级}}$$

1. 复用率：可复用组件数占总组件数的比例，反映拆解出的组件有多少能被工程复用。

$$\displaystyle R_{\text{复用}} = \frac{\text{可复用组件数}}{\text{组件总数}}$$

2. 还原精度：用 1 减去偏差样本占比，衡量拆分结果与设计稿的视觉一致性。

$$\displaystyle A_{\text{还原}} = 1 - \frac{\text{偏差样本数}}{\text{样本总数}}$$

3. 层级正确率：父子关系与人工标注一致的比例，衡量结构树重建的准确性。

$$\displaystyle C_{\text{层级}} = \frac{\text{正确关联边数}}{\text{关联边总数}}$$

4. 综合质量分：三项指标加权求和，作为拆分结果是否可以发布的统一门禁。

$$\displaystyle Q = \lambda_1 R_{\text{复用}} + \lambda_2 A_{\text{还原}} + \lambda_3 C_{\text{层级}}$$

每次拆完一批乐高，老师傅会清点复用率和还原度，低于标准的零件袋重新回炉。持续用指标驱动优化，组件自动拆分才能从“能跑”走到“好用”。

AI 应用场景

Python 演示

import math # 模拟一张设计图的图层数据：每一块"积木"都有 id、位置和尺寸LAYERS = [    {"id": "user_avatar", "x": 10, "y": 10, "w": 40, "h": 40},    {"id": "user_nickname", "x": 60, "y": 14, "w": 80, "h": 16},    {"id": "user_followers", "x": 60, "y": 36, "w": 90, "h": 14},    {"id": "card_title", "x": 10, "y": 110, "w": 200, "h": 20},    {"id": "card_desc", "x": 10, "y": 140, "w": 200, "h": 40},    {"id": "card_more", "x": 10, "y": 190, "w": 60, "h": 20},    {"id": "card_cover", "x": 460, "y": 110, "w": 160, "h": 90},    {"id": "card_caption", "x": 460, "y": 208, "w": 160, "h": 16},] # 组件类型判定时使用的词典顺序，用于平分时取靠前的类型COMPONENT_ORDER = ["avatar", "content", "button", "image", "text"]COMPONENT_KEYWORDS = {    "avatar": ["avatar", "head", "photo", "profile"],    "content": ["title", "abstract", "content", "paragraph", "desc"],    "button": ["more", "btn", "button", "action", "link"],    "image": ["cover", "image", "img", "pic", "banner"],    "text": ["caption", "text", "label"],}  def dist(a, b):    """两个图层中心点的欧氏距离"""    ca = (a["x"] + a["w"] / 2, a["y"] + a["h"] / 2)    cb = (b["x"] + b["w"] / 2, b["y"] + b["h"] / 2)    return math.hypot(ca[0] - cb[0], ca[1] - cb[1])  def height_diff(a, b):    """高度差异的归一化度量"""    return abs(a["h"] - b["h"]) / max(a["h"], b["h"], 1)  def similarity(a, b, w1=0.3, w2=0.7, dmax=200.0):    """第1节：图层的加权相似度"""    if a is b:        return 1.0    hd = height_diff(a, b)    sp = min(dist(a, b) / dmax, 1.0)    return 1.0 - (w1 * hd + w2 * sp)  def greedy_cluster(layers, threshold=0.5):    """贪心聚类：相似度超过阈值的图层归并为同一组"""    groups = []    for layer in layers:        best = None        best_sim = threshold        for g in groups:            s = min(similarity(layer, item) for item in g)            if s > best_sim:                best_sim = s                best = g        if best is None:            groups.append([layer])        else:            best.append(layer)    return groups  def infer_name(group):    """第2节：根据图层 id 中的关键词推断组件名"""    tag = " ".join(l["id"] for l in group)    scores = {}    for comp, kws in COMPONENT_KEYWORDS.items():        scores[comp] = sum(1 for k in kws if k in tag)    top = max(COMPONENT_ORDER, key=lambda c: scores[c])    return top if scores[top] > 0 else "unknown"  def nested_tree(groups):    """第3节：按边界框包含关系还原父容器与子组件"""    boxes = []    for idx, g in enumerate(groups):        x0 = min(l["x"] for l in g)        y0 = min(l["y"] for l in g)        x1 = max(l["x"] + l["w"] for l in g)        y1 = max(l["y"] + l["h"] for l in g)        boxes.append({"idx": idx, "x": x0, "y": y0, "w": x1 - x0, "h": y1 - y0})    page = {"idx": len(boxes), "x": 0, "y": 0, "w": 1000, "h": 600}    boxes.append(page)    tree = []    for a in boxes:        parent = None        for b in boxes:            if a is b:                continue            inside = (                b["x"] <= a["x"]                and b["y"] <= a["y"]                and b["x"] + b["w"] >= a["x"] + a["w"]                and b["y"] + b["h"] >= a["y"] + a["h"]            )            if inside:                if parent is None or b["w"] * b["h"] < parent["w"] * parent["h"]:                    parent = b        if parent is not None:            tree.append((parent["idx"], a["idx"]))    return boxes, tree  def token_mapping(boxes, tokens):    """第4节：把组件宽度量化到最近的 token 值"""    mapped = []    for b in boxes[:-1]:        nearest = min(tokens, key=lambda t: abs(t - b["w"]))        mapped.append(nearest)    return mapped  def main():    # 1. 图层聚类    groups = greedy_cluster(LAYERS, threshold=0.5)    # 2. 命名推断    names = [infer_name(g) for g in groups]    # 3. 嵌套关系还原    boxes, tree = nested_tree(groups)    # 4. Token 映射：把组件宽度量化到 8 的倍数    mapped = token_mapping(boxes, [8 * k for k in range(2, 60)])    # 5. 输出组件清单    for i, name in enumerate(names):        b = boxes[i]        print(            "component[%d] name=%s box=(%d,%d,%d,%d) w_token=%d layers=%d"            % (i, name, b["x"], b["y"], b["w"], b["h"], mapped[i], len(groups[i]))        )    print("nested(parent,child):", tree)  if __name__ == "__main__":    main()

1. similarity(layer, item)用高度差异与中心距离的加权组合计算两图层相似度，是聚类的地基。
2. greedy_cluster(LAYERS, threshold=0.5)贪心归并相似图层，超过阈值就放进同一个候选组件。
3. infer_name(group)用关键词词典对图层名做语义匹配，计算每个组件名字的置信度。
4. nested_tree(groups)通过矩形包含关系给每个组件找最小父容器，最后加上“页面”作为根。
5. token_mapping(boxes, tokens)把连续宽度量化到离它最近的 8px 网格 Token 上。
6. boxes[:-1]排除最后加入的 page 根容器，只对真实组件做 Token 映射。

常见误区

面试题