【WorkBuddy专栏46】用WB做UI设计（下）——一套设计规范，小程序和PC网站两端通用

上篇你学会了用 WorkBuddy 从零搭建设计系统。现在问题来了：你花了三天时间做了一套漂亮的 PC 网页，老板说「顺便做个小程序版本」。你打开微信开发者工具，发现 WXML 和 HTML 长得像但有差别，WXSS 和 CSS 基本兼容但有坑，组件名完全不一样——<div>变成了<view>，<img>变成了<image>。你是不是要重写一遍？答案是不需要。这篇文章告诉你：用 WB 做「设计一体化」——一套设计规范，驱动两端 UI，改动一处，同步生效。

一、设计一体化的真实痛点——为什么手动适配是地狱

先说清楚问题在哪。假设你做了一个企业官网——PC 网页版已经上线，现在要出微信小程序版。你面对的是这样的局面：