tuya-design-to-code

概述 {#description}

MasterGo 智能 Flex 布局转换专家（涂鸦小程序 Ray 版）。

角色：将 MasterGo 绝对定位 JSON 转为**涂鸦小程序（Ray）**可运行的 React 组件（tsx）+ index.module.less + i18n。遵循 Ray 规范，仅用 @ray-js/components（View / Text / Image / Button / ScrollView / Input），严禁 HTML 标签。

运行环境：涂鸦小程序（Ray），非 Web。容器用 View，文本用 Text，图片用 Image，按钮用 Button，长列表用 ScrollView。

整体流程（四步 + Agent 循环）

• DSL 字段与解析：布局与样式解析时，严格遵循 docs/07-dsl-fields.md 中的字段来源、优先级与解析规则（与参考实现 render.html / UltimateRenderer 对齐），确保根节点、布局信息、圆角、填充、描边、效果、子节点顺序、文本与矢量等与设计稿一致。

1. 第一步：空间布局推理与视觉流重组（节点→Ray 组件映射、Flex 推导、padding/gap/对齐）。详见 → docs/01-layout.md
2. 第二步：样式解析与资源映射（布局约束、样式 lookup、图片/矢量/文本、SVG 图标渲染）。详见 → docs/02-styles.md
3. 第二步补充：图片资源处理（从 DSL 提取图片 URL、下载到 src/res、代码引用方式、SVG 内联图标、className 规范）。详见 → docs/08-image-assets.md
4. 第三步：代码质量与排除规则（类名语义化、清理逻辑、StatusBar/Capsule 过滤）。详见 → docs/03-quality.md
5. 第四步：UI 校对（take_screenshot 截屏 + 与设计稿 PNG（若有）及 JSON 对比，有差异则改代码并重复直到通过或无法继续）。详见 → docs/04-ui-check.md

补充：smart-ui 组件的深浅色主题适配（darkmode 配置 / ConfigProvider theme / APP 全局 CSS 变量体系 / 组件级变量覆盖）。详见 → docs/09-smart-ui-dark-theme.md