SuperAPI AI 工具集

stitch-react-native

前端与建站

查看项目

更新于 10-16 03:47

技能介绍

用途:把 Stitch 网页设计转成 React Native 屏幕,或让已有原生组件与更新的 Stitch 设计保持一致。适用于涉及 Google Stitch 项目 ID、.stitch/ 产物、DESIGN.md、Stitch 导出或 Stitch 专属校验的任务。

主要能力:从导出的 Stitch HTML 与截图出发,提取主题值到 src/theme.ts,并在 .stitch/metadata.json 记录项目/屏幕标识与同步时间戳;把网页元素映射为 React Native 原生基础组件,可见文本用 Text 包裹;将 CSS 转为 StyleSheet.create() 并复用主题值而非硬编码颜色;用原生模式替换 hover、固定定位、浏览器专属 CSS 与 DOM 事件;按需使用 react-native-safe-area-context、无障碍标签与角色、useWindowDimensions、Platform.select、FlatList、SectionList。依赖已安装时可用内置校验器检查语法。

使用方式:优先使用宿主实际列出的屏幕工具。已核实的 Stitch MCP 面为 create_project、upload_design_md、create_design_system_from_design_md、list_design_systems、apply_design_system;除非当前宿主明确暴露,否则不得声称使用 list_projects、list_screens、get_project、get_screen、generate_screen_from_text、edit_screens 或 generate_variants。无 MCP 时使用本地 .stitch/ 产物、导出的 HTML 或截图、内置脚本与 Stitch 网页界面。跨客户端:GitHub Copilot 放在可见技能路径或写入项目说明;Claude Code 放在本地技能目录或兼容插件源;Codex 安装或同步到 $CODEX_HOME/skills/stitch-react-native 并在重大改动后重启。

限制与注意:不得在宿主未暴露时声称屏幕查找、生成、编辑或变体 MCP 调用成功;未经用户批准不得上传文件、截图、HTML、Markdown 或设计资产;不得读取、打印、存储或提交 Stitch API 密钥、MCP 配置密钥、Cookie 或含凭据文件;生成的设计或代码须经本地渲染、语法或产物验证后才可视为最终结果。验证要点:无 DOM 标签或网页事件名残留;文本、图片、列表与按压交互使用原生基础组件;处理或明确排除 iOS 与 Android 的阴影/安全区差异;用本地 React Native 工具检查或给出阻塞证据。生成 .stitch/ 文件默认不提交,除非用户明确要求保留为示例。相关技能:stitch-react-components、frontend-design、react-development。