工作方法
Create Canvas 构建一个工作区,让你通过对话探索多个可交互的设计方案。每个预览都在源代码定义的注册表中拥有稳定的 ID 和易读的名称。用户可以复制名称来指明某个版本,通过专用拖动手柄移动预览,并通过平移或缩放浏览画布。
内容保存在源文件中,浏览器存储只记住布局。这样的区分让后续请求更明确:新增版本拥有自己的标识和状态,而修改已有版本时会保留其位置。除非明确要求将实验移入生产环境,否则该 skill 会让实验保持在本地。
预期交付物
- 由源代码定义、包含命名实时预览项的注册表。
- 带有移动手柄、视图控制和受支持的全局主题选择功能的画布。
- 保存的视图与预览项位置,以及说明哪些交互已验证、哪些尚未测试的报告。
从简报到审查
- 01建立安全的实时预览
先检查是否已有画布,再决定是否新建。使用项目自身的框架挂载一个采用合成数据的预览,为其提供独立标签和移动手柄。
- 02添加不同方案
为每个新变体分配稳定的 ID、唯一名称和独立状态。添加内容时保留之前的方案及已测定的位置。
- 03导航时保留输入
将画布手势与文字输入、选择和嵌套滚动分开。保留 portal 的原生行为,并检查复制、移动或缩放是否会导致预览重新挂载。
- 04保存布局并验证行为
按注册表 ID 保存限定范围内的视图参数、受支持的主题和位置。在声称功能可用之前,验证重新加载、格式错误的存储数据和相关设备手势。