用途：当用户需要可运行、可点击的原型，要求行为像真实应用而非静态稿时使用此技能。输出为一个有真实交互感的原型：状态切换有效、表单可校验、按钮有跳转，界面上可见的交互都会实际发生。
输出位置：所有输出文件写入 ./opendesign/mockups/<task-slug>/，slug 由功能名派生，例如 checkout-flow、settings-panel。
技术栈与结构：使用 React 的 useState 与 useEffect 管理本地状态和副作用，状态就近放置，除非原型确实需要，否则不引入全局 store。拆分为小而可读的组件，文件超过约 400 行需拆分。单文件原型可用 Babel 内联 JSX；多屏原型按屏幕拆分为组件文件再组合。原型需包裹在合适的设备或窗口边框（手机边框、浏览器边框、桌面窗口）中，使其读起来像产品而非网页。
必需交互面：所有可交互元素有 hover 状态；点击和触摸处理路由到下一状态，无死控件；happy path 有表单校验，输入无效时按钮禁用并显示可见错误状态；状态与屏幕间有动画过渡，简短且有意义；多步流程端到端可用，用户能走完预期路径而不遇死路；在真实产品会有加载和空状态处也提供这些状态，不要直接跳到已填充视图。
真实性规则：使用真实感的假数据，不用 lorem ipsum 或 John Doe，名称、文案、数字和时间戳符合产品语境；移动端框架点击目标最小 44px；关键状态（当前屏幕、活动标签、演示播放位置）持久化到 localStorage，以便迭代中刷新不丢失位置。
省略内容：真实认证、真实网络请求、localStorage 之外的持久化；生产级无障碍审计，基础语义和焦点管理即可；穷举所有边界情况，只把用户想演示的路径做扎实。费用、平台与效果等资料未提供。