用途
该技能用于在 Expo 应用中把每一个 UI 图标和每一份品牌视觉都变成代码产物，避免图标字体、矢量图标包、emoji 或图片文件进入应用源码。它提供一套决策规则、目录结构、生成脚本、检查器和测试模板，覆盖从单个 UI 图标到应用图标、启动屏、商店图标和游戏/看板中重复美术素材的完整流程。
主要能力
- UI 图标系统：每个图标是图标集中有名字的路径，在 24 单位网格上由图层组成，合并为单个 Skia 路径，由
<Icon>一次性栅格化、使用主题色着色，并对 VoiceOver/TalkBack 隐藏（标签由外层控件承担）。图标集由design/icon-layers.json经scripts/art/build-icon-paths.ts生成src/ui/icons/icon-paths.ts，生成文件带// GENERATED by头，不允许手改。 - 多色图标：双色字形由两个叠加的
<Icon>实现（如star-fill在star-edge下），三色及以上视为图片而非图标。 - 品牌标记：
BRAND_MARK位于 48 网格、边缘留 2 单位（含描边）、最多 8 层、使用主题颜色角色而非十六进制色值，统一驱动应用内BrandTile、所有应用图标、启动屏和商店图标。 - 多色美术：使用单个 Skia 画布与共享的「仅类型」绘制代码，
drawMark将 Skia API 作为参数传入，使应用、CanvasKit golden 和 Node 脚本运行同一份代码；重复美术按调色板、配色方案、色盲标志、单元格大小、像素比预渲染为精灵表。 - 应用图标与启动屏渲染：由
scripts/art/render-app-art.ts生成并提交。iOS：1024 px，浅色不透明满版、深色透明、着色不透明灰度，标记位于中央 62%；Android：前景和主题单色层透明并置于 66 dp 安全圆内，背景层不透明；启动屏：标记透明，Android 12+ 以 imageWidth dp（最多 288）显示在 288 dp 图标上并遮罩为 192 dp 圆，标记须位于距图像中心 96/imageWidth 以内（默认 200 时为 0.48）；Play 图标：512 px 不透明、不超过 1024 KB。 - 检查器：
check-icons.mjs校验图标集与图层（名称、方向列表、语法、网格、覆盖率）、生成头，以及源码中的图标库、emoji 和图片禁令；check-app-art.mjs按平台规则校验渲染 PNG、启动屏宽度、配置接线与依赖、品牌标记。两个--check可加入 verify gate。 - 模板与参考文档：提供
references/icon-system.md、icon-catalogue.md（19 个内置图标）、brand-mark-and-pictures.md、app-icon-and-splash.md、skia-notes.md，以及templates/下的图标图层、契约、脚本和图标组件模板，含单元与 golden 测试。
使用方式
- 阅读
references/icon-system.md；若应用不使用 Skia，按其对应章节处理。 - 安装
@shopify/react-native-skia（2.6.2）和npx expo install expo-splash-screen（若缺失）。 - 按模板首行标注的路径复制
templates/下文件：design/icon-layers.json、contracts/app-art.json及其 schema、scripts/art/全套脚本与测试、src/ui/icons/组件与测试。它们依赖@/theme/*、@/i18n/direction-context和@test/render-with-providers，需先由相关技能创建。 - 使用图标时，从图标目录或应用自有图标集中选名称、用应用 token 定尺寸、用主题取色，由外层控件携带标签：
icon={(look) => <Icon name="plus" {...look} />}。 - 新增或修改图标：改图层 JSON，运行
node scripts/art/build-icon-paths.ts，再运行node scripts/art/render-icon-sheet.ts并查看reports/art/icon-sheet.png。 - 绘制应用图标等：运行
node scripts/art/render-app-art.ts，在 1024 和 256 px 查看每张图，接入iosAppearanceIcon()与splashPlugin()，再按变体运行npx expo config --type public，图像与改动一起提交；上传商店图像前须停止并询问开发者。 - 运行检查：
npx tsc --noEmit、npx eslint <changed paths> --max-warnings 0、npx jest src/ui/icons scripts/art --ci、两个--check脚本，以及check-icons.mjs .和check-app-art.mjs .；多包时在每个应用目录分别执行。
适用场景
Expo/React Native 应用中需要统一图标集、品牌标记、应用图标、自适应图标、启动屏和商店图像，并希望这些产物可重复生成、可校验、随主题与深色模式变化的项目。
限制
- 依赖 Skia（
@shopify/react-native-skia）和既有的主题、方向上下文与测试工具链；不使用 Skia 的应用需走专门说明。 - 图标必须在 24 网格内，品牌标记必须在 48 网格且最多 8 层，使用颜色角色而非十六进制。
- 平台规则（安全区、透明度、尺寸、商店文件大小）由检查器强制；手绘美术需人工目检。
- 商店图像上传属对外操作，需人工确认。
- 该技能资料未提供收费、价格或平台兼容性等商业信息。