技能介绍

它解决的是什么问题

把 Pixso 设计稿还原成 Vue 页面时，最常见的失败不是页面跑不起来，而是跑起来之后和设计稿对不上：少了几段文案、某个容器被塞进了错误的父级、颜色和间距全靠印象填。pixso-to-vue 把还原过程固化成一条可执行流水线，用「从设计稿产物逐项反查」替代「看一眼截图凭感觉写」。它同时兼容 Vue 2（Options API） 与 Vue 3（Composition API / <script setup>），具体用哪种由项目现有代码决定，技能本身不预设。

核心能力与关键步骤

数据获取：依赖 Pixso 桌面端（≥ 2.2.0）与本地 MCP 服务，先选中目标页面再开始。同时调用 design_to_code 与 get_node_dsl 拉取 HTML manifest 和图层树，并立即下载 HTML。
版本检测先行：动手前先 grep 项目代码判定 Vue 2 还是 Vue 3，之后模板写法、路由 API、生命周期、深度选择器全部按对照表执行，不允许猜。
两步信息提取：先 grep 出全部文本建立清单，再按 top 值绘制归属图判断每个容器的父级——资料明确把这两步标注为「绝大多数遗漏和错位的根源」。
复用优先：写模板前先搜索项目里已有的按钮、卡片等组件，避免重复造轮子。
两阶段还原：第一阶段只搭 template 骨架，逐区域核对文本、嵌套和条件渲染；第二阶段做像素级样式，从 HTML 的 CSS 逐属性翻译成 style，不允许出现「看起来差不多」的直觉值。
单位与令牌：移动端走 postcss-px-to-viewport、PC 端保持原生 px、响应式走 pxtorem，源码统一写 px；颜色、字号、间距必须提取为 CSS 变量统一管理。
交互与无障碍：按版本对接路由、生命周期与状态管理，并补齐 :hover、:focus、disabled、loading、empty、error 等状态与键盘可达性。
三遍走查：分别核对 template、style，再用 get_screenshot 与浏览器渲染结果对照，最后输出一份 Markdown 实现报告供 CR 追溯。

适用边界与注意点

这套流程的前提是 Pixso 设计稿完整且已被选中，它不负责补全设计稿里没画出来的业务逻辑。最需要警惕的一条约束是：design_to_code 自动产出的 .vue 文件一律不使用——它固定生成 Vue 3，且布局可能依赖绝对定位，技能只把它的 HTML 产物当作结构和样式的查询源。此外 v-for 必须配 :key，scroll 容器的 padding 只加在 inner 元素上，设计稿文件统一命名为 design-code.html，装饰性圆角与渐变分别用 CSS 和 SVG data URI 还原，不要额外引入图片资源。