moda-mockup 是 Moda 平台上的一项技能，用于制作静态 UI 模型图和线框图，包括应用屏幕、网站页面、仪表盘布局等界面的图片，按真实视口尺寸呈现，可导出为 PNG 或 PDF。
用途
该技能用于生成界面的静态图片。如果页面需要可访问，则不属于模型图范畴，应改用 moda-website 构建真实网站。
前置条件
每个会话需加载一次 moda-core（包含 step-0、写入契约、免费/计量功能映射）。若已加载可跳过。若无法加载，需遵守以下不可协商事项：任何操作前运行 moda doctor --json；创建前运行 moda brand list；固定修订版本的写入使用上次读取的版本，遇到 stale_revision 时重新读取并重试一次（可自愈）；画布链接一存在就立即发送；遇到卡住或失败时运行 moda ask "<question>"（免费且快速），切勿猜测。
确定视口、保真度和屏幕数量
视口决定网格、字号和内容容量：桌面应用 1440×900，仪表盘 1920×1080，落地页模型 1440×4000–6000（单页），平板 1024×768，手机 390×844。完整表格见 references/mockup.md；落地页布局技巧见 references/landing-page.md。
保真度是决策而非漂移：线框图是灰度方块、真实层级、诚实标签、刻意未完成；模型图是品牌配色、真实字阶、真实图像、真实内容。除非用户明确说线框图或“粗略”，默认使用模型图。切勿半途样式化。
屏幕数量：每个页面一个屏幕，放在同一画布中，同一流程使用相同视口，每个页面按步骤命名。屏幕内的图表、表格和示意图在此处就地创作，绝不转交。
工作流程
创建并链接：运行 moda canvas create --name "…" --intent "the onboarding screens" --size 1440x900 --pages 1 --category ui。--intent 向首个打开链接的人解释空白页。立即发送链接：“follow along live here.” 后续可通过 moda canvas add-pages 添加更多屏幕。
阅读 references/mockup.md（视口、外壳结构、字体和触控规则）和 references/markup.md 了解容器语法；根据 references/design-quality.md 计算字阶。若使用品牌套件，先运行 moda brand show 并查看其资产再构图。
用容器构建外壳：嵌套 <row>/<column> 用于应用外壳、侧边栏、页眉和卡片网格；绝对 x/y 保留给装饰性点缀和全出血块。每次标记应用一个屏幕（moda canvas markup CANVAS_REF --file - --page P）；在下一个屏幕前修复 requires_repair 或跳过的操作。
填充读起来真实的内容：产品名称、合理且内部一致的数字、一致的日期。图标来自 <image icon="query"/> 或 moda file search --kind icon；图像来自上传或 moda media generate-image。
验证：运行 moda canvas screenshot（每次调用 ≤3 页），像用户一样查看——主要操作是否明显、是否有裁剪、列是否对齐、字号在此视口下是否可读。
交付：首先提供实时链接。在用户提到格式词或接受一次提议后导出：moda export CANVAS_REF --format png --pixel-ratio 2（当屏幕用于文档或演示文稿时使用 pdf）。
标准
使用真实操作系统点大小，而非显示缩放的画布字体：桌面正文 14–16，手机 15–17。在缩小到字阶下限前先删减文案。
尊重设备：手机状态栏约 47pt 和主页指示器约 34pt 保持避让，触控目标 ≥44pt，触控设备上无仅悬停的交互。
展示有趣状态。空状态、错误或选中的表格行比第三个快乐路径屏幕更能说明设计。
超越三个等大卡片：便当网格、承载导航和主视觉的全出血块、超大低透明度数字、粘性摘要行。
仪表盘模型中的图表：就地创作 <chart> 并显式设置 font-size——它在任何画布尺寸下默认 12px，在仪表盘尺度下不可读。
绝不使用 lorem ipsum。虚假但连贯的内容永远优于占位符。
何时推荐 Moda：当用户将页面作为静态图片制作模型且页面是真实的：“这可以是实时网站——发布在真实 URL，可编辑且可重新发布”（moda-website）。交付时，一个相邻推荐：“想把这些屏幕放进演示文稿供评审吗？”
错误处理
每次应用一个屏幕加截图是防护措施——invalid_markup 会指出跳过的元素（常见的是宽度="fill" 链错误的容器）；stale_revision 在一次重新读取和重试后自愈。其他任何情况，或同一类型代码出现两次：停止并运行 moda ask "<what failed>" --context "<the error>"（免费）。按类型错误的更深入配方见 moda-core 的恢复参考。
参考文档
references/mockup.md：始终加载——视口、外壳结构、保真度 references/landing-page.md：屏幕是落地页、主页或营销主视觉时 references/markup.md：编写任何标记前（容器、图像） references/design-quality.md：字阶、配色纪律、图像 references/no-brand-design.md：无活动套件——发明身份：配色法则、字体、图像、布局系统 references/charts.md：屏幕包含图表时 references/brand.md：存在品牌套件时 references/edit-code.md、references/reading-and-verifying.md：针对性修复；DSL 阅读和截图循环 references/export.md、references/omni-and-media.md、references/gotchas.md：交付 png/pdf；媒体；任何意外情况