用途
Design from app 用于观察一个用户喜欢的应用，测量它的界面，并在 WinUI 3 中重建其设计系统。最终结果是一套设计工具包（design-kit 技能），其中包含参考应用的各项数值，以及一个与截图匹配的参考屏幕。核心理念是：猜测只能接近，测量才能准确。
主要能力
技能附带两个测量脚本：
- scripts/measure.ps1：从截图中测量尺寸、位置、文字高度和颜色。
- scripts/compare.ps1：生成并排对比图、差异图，并计算像素差异比例。
两个脚本运行于 Windows PowerShell 5.1 和 pwsh 7。所有坐标均为 epx（像素除以显示缩放比例），可用 -Scale 设置缩放（例如 125% 时为 1.25）。BAWA 快照会把缩放写入 <page>-<mode>-layout.json，未提供 -Scale 时脚本会从该文件读取。
使用方式（资料给出的七个步骤）
-
获取截图：需要仅包含窗口、不带桌面的截图，且在本机拍摄以保证与快照使用相同显示缩放。可用截图工具（Win+Shift+S）的窗口模式截取单个窗口，保存为 PNG 到 design/reference/。至少一张元素最丰富的屏幕，以及菜单、对话框和深色模式的特写。用 measure.ps1 info shot.png -Scale <显示缩放> 获取窗口尺寸，并确认所有截图使用同一缩放。
-
列出部件：查看每张截图，命名每个独立部件，如标题栏、侧边栏行、分区标题、主操作、列表行、复选框、日期标签、图标按钮、分隔线。依据 design-kit 技能的 kit-spec.md 起草 design/KIT.md，每个部件一节。
-
测量：用数值而非估计填充 design/KIT.md。要点包括：hline 定位侧边栏宽度和面板；rows 测量行位置与间距；cols 测量左边缘和间隙；vline 与 hline 配合 -Tolerance 4 测量选中胶囊和分隔线；ink 测量文字和图标颜色；palette 测量表面颜色；crop 放大查看细节。
-
确定字体与图标：多数 Windows 应用使用系统字体（Windows 11 为 Segoe UI Variable，之前为 Segoe UI），Web 和 Electron 应用常自带字体。先用系统字体，字母形态不同时再命名具体字体并选择或使用允许打包的开源替代品。图标优先匹配 Segoe Fluent Icons，不匹配的用 PathIcon 形状绘制。
-
构建工具包和一个屏幕：调用 Skill 工具并指定 design-kit，根据 design/KIT.md 构建令牌、部件、标题栏和画廊，然后仅用工具包部件构建主截图屏幕，保持相同数据和窗口尺寸。用快照（tools/snap.ps1 -Pages <page>）检查像素尺寸与参考一致。
-
对比直至匹配：用 compare.ps1 生成整窗和局部（如侧边栏区域）的并排图与差异图，用 Read 工具查看，然后测量两图中相同的行、边缘和文字，修正令牌而非视图。顺序为：窗口尺寸、文字大小、列与左边缘、行高、颜色、图标。通过标准为整窗像素差异低于 2%，且每行与左边缘误差在 1.5 epx 以内。
-
改为己有：应用对外发布前，替换属于其他公司的名称、标志、插图和其拥有的字体或图标，保留结构、间距和感觉，并在 design/KIT.md 中记录替换内容。
完成标准：design/KIT.md 中每个令牌和部件都有实测数值，工具包画廊展示所有部件，参考屏幕通过第 6 步，第 7 步列出所有替换项。
适用场景
适合需要精确复刻某个应用视觉风格、并以 WinUI 3 实现原生界面设计的场景，尤其是希望用实测数据而非主观估计来构建设计系统的团队或个人。
限制
资料仅描述 Windows 环境下的流程，脚本运行于 Windows PowerShell 5.1 和 pwsh 7；未提供其他平台支持、收费、价格或效果承诺等信息。