定位：实现复盘。 依据抖音聊天气泡、气泡返工、搜狗键盘、鸿蒙输入法与系统主题代码。本文区分设计源素材、平台模板和可安装包，不把视觉预览说成实际系统功能。

设计一张好看的键盘截图并不难，难的是让同一套语言在九键、全键盘、按下态、不同文字长度和系统主题中都成立。

这些项目看起来以视觉为主，实际上包含很强的工程问题：哪些区域可以变形，哪些符号必须保持，哪些文字应该由系统渲染，哪些文件必须由平台工具继续加工。

一、迁移的单位应该是语义组件

搜狗皮肤生产资料把背景、键帽、按下态、字符参考层等分开，而不是把整张界面压成一张图。系统文字不能作为普通装饰层直接栅格化导出，否则字体、布局和状态变化都失去控制。

这种拆法可以视作一套小型设计系统：背景负责层次，键帽负责触摸区域，文字负责可读性，强调色负责选中状态，留白负责防止视觉拥挤。

九键与全键盘不是简单缩放关系。键位密度、数字字母、功能区域和触摸预期不同，布局参数需要进入清单。源码中专门记录九键留白，就是把审美修改转成了可追踪配置。

需要同时保留交付边界：当前搜狗包是可编辑生产素材，并不等于已完成平台字段绑定的安装包。

二、点九式伸缩的重点是保护语义

聊天气泡内容会变化，背景必须随文字长度和行数变化。九宫格式伸缩的思路，是把可拉伸区域与固定区域分开：可伸缩的部分承担尺寸变化，角、连接点、结绳等识别元素尽量保持。

抖音气泡配置明确记录画布、横纵拉伸带、文字安全区和结绳边界。例如该项目画布为 198×162 像素，横向带采用 [122, 142)，纵向带采用 [43, 55)。这些是项目坐标，不是通用平台标准。

使用半开区间有一个实际好处：宽度可以直接由终点减起点得到，切片边界不必在多个地方重复补一像素。更重要的是，设计者可以检查重要元素是否落在拉伸带中。

这里讨论的是点九式伸缩契约；具体平台如何编码和消费素材，仍需遵守自己的文件规范，不能将所有九宫格裁切都视为同一种安装格式。

三、视觉要求可以写成像素不变量

气泡测试不只检查尺寸，还检查动态区域避开拉伸带，并比较拉伸前后右下结绳的像素一致性。

这把“绳结不要变形”转成了一个可复核的不变量：允许背景扩张，但固定区域不应随内容变长而被压扁。类似方法可以用于按钮圆角、徽标、头像装饰和卡片边框。

不过，bubble-revision 的第二版脚本采用了另一套切分坐标。因此原项目的验证报告不能直接覆盖返工输出。配置一旦改变，必须重新确认素材与测试使用的是同一组几何约定。

图 11：按原项目区间绘制拉伸带，原创圆角和固定结点仅作几何示意，不复用业务品牌图。返工版使用不同坐标，必须重新验收；设计源包不等于可安装主题。

四、平台工作簿是一种配置 API

鸿蒙输入法皮肤的迁移，不只是给图片换色，还要保留工作簿模板结构。辅助程序根据资源名称映射文本、图标、按下态等语义色值，并在原值包含 Alpha 时保留透明度。

把工作簿当作 API，可以理解为什么这些测试重要：

契约	为什么需要保护
工作表顺序与范围	平台工具可能按既定结构读取
数据验证规则	约束可选项和字段合法性
资源引用	配置值必须能找到对应文件
图片与按下态尺寸	避免状态切换时错位
边缘拉伸标记	普通图像处理不能破坏格式语义

相关脚本还会在图片变换后恢复黑色边缘标记。这说明，平台图片有时既是视觉内容，也是机器可读配置。把它当普通位图滤镜处理，可能会破坏看起来不显眼但决定运行方式的像素。

工作簿可以解析、引用存在，仍不表示平台服务已接受。项目说明中保留了请求受阻的历史，不能写成成功进入审核或已发布。

五、系统主题清单应明确声明自己不是安装包

系统主题项目提供壁纸、图标等源素材，并记录尺寸、大小、哈希和音频参数。清单尤其值得借鉴的一段是：

{
  "distribution": {
    "type": "design-source-package",
    "installable": false,
    "official_tool_required": true
  }
}

这是源码中的真实交付声明。它避免把“设计素材齐全”误称为“系统主题可以安装”。预览中的卡片、动画或静态降级说明，也不能自动变成已经接入实时数据或系统无障碍设置的功能。

清晰地声明未完成的接口，比在 README 里使用一个含糊的“最终版”更有用。

六、确定性打包减少无意义差异

主题打包器对文件排序，并固定归档时间与权限。这样在相同输入和兼容构建环境下，能够减少仅因文件顺序或本机时间变化导致的包差异。

这项能力的价值是便于比较和追踪，不是证明包内容正确。哈希能回答“字节是否相同”，不能回答“壁纸是否符合设计”或“平台是否认可”。压缩库版本等环境差异也仍可能影响最终字节。

打包还具有实际写入与清理行为，因此应在独立输出目录执行，不能把运行构建器当成只读检查。

七、怎样验收一个视觉系统

建议分三层：先检查配置与资源完整性，再检查多状态、多长度和多尺寸预览，最后使用目标平台工具或设备验证。不要省略短文本、长文本、多行文本、按下态和边缘尺寸。

如果继续跨平台扩展，可共享角色、色彩与组件语义，但平台坐标、工作簿结构和安装格式应留在独立适配层。共享视觉语言，不意味着共享所有实现细节。