跳转到使用指南
Create Canvas作者 ibelick

Create Canvas Skill.

在可命名、可移动的对比工作区中保留可交互的设计方案。

  • 设计探索
  • 画布
源文件解读 · create-canvasSKILL.md
任务 在可命名、可移动的对比工作区中保留可交互的设计方案。 产出 由源代码定义、包含命名实时预览项的注册表。 开始前的准备 画布包含哪些预览项及其实现由源代码决定;浏览器存储不能创建或隐藏内容。
编辑摘要 · 源文件核查于 2026-11-02 · 非生成示例

01 功能说明

在可命名、可移动的对比工作区中保留可交互的设计方案

构建自由布局的画布,为实时预览命名,保留独立方案与布局,并在交互时保护用户输入。

基于来源的工作流并非执行基准测试

工作方法

Create Canvas 构建一个工作区,让你通过对话探索多个可交互的设计方案。每个预览都在源代码定义的注册表中拥有稳定的 ID 和易读的名称。用户可以复制名称来指明某个版本,通过专用拖动手柄移动预览,并通过平移或缩放浏览画布。

内容保存在源文件中,浏览器存储只记住布局。这样的区分让后续请求更明确:新增版本拥有自己的标识和状态,而修改已有版本时会保留其位置。除非明确要求将实验移入生产环境,否则该 skill 会让实验保持在本地。

预期交付物

  • 由源代码定义、包含命名实时预览项的注册表。
  • 带有移动手柄、视图控制和受支持的全局主题选择功能的画布。
  • 保存的视图与预览项位置,以及说明哪些交互已验证、哪些尚未测试的报告。
查看示例简报

从简报到审查

  1. 01
    建立安全的实时预览

    先检查是否已有画布,再决定是否新建。使用项目自身的框架挂载一个采用合成数据的预览,为其提供独立标签和移动手柄。

  2. 02
    添加不同方案

    为每个新变体分配稳定的 ID、唯一名称和独立状态。添加内容时保留之前的方案及已测定的位置。

  3. 03
    导航时保留输入

    将画布手势与文字输入、选择和嵌套滚动分开。保留 portal 的原生行为,并检查复制、移动或缩放是否会导致预览重新挂载。

  4. 04
    保存布局并验证行为

    按注册表 ID 保存限定范围内的视图参数、受支持的主题和位置。在声称功能可用之前,验证重新加载、格式错误的存储数据和相关设备手势。

02 适用场景

适合什么场景

画布包含哪些预览项及其实现由源代码决定;浏览器存储不能创建或隐藏内容。

适合的场景

  • 设计对比将多个可交互方案并排展示,并通过准确名称指明具体方案。
  • 持续探索返回已有工作区时,不丢失之前的方案或布局决策。

需要检查的限制

  • 源代码决定内容画布包含哪些预览项及其实现由源代码决定;浏览器存储不能创建或隐藏内容。
  • 与生产环境隔离实验使用安全的测试数据,不修改生产组件代码。
  • 编辑器范围有限除非明确要求,否则不提供绘图、连线、调整尺寸和撤销历史。

请提供这些输入

  • 实验列表列出方案名称、预期尺寸,以及希望探索的差异。
  • 安全组件提供公开的组件 API 和测试数据,避免使用个人数据和真实写入操作。
  • 现有工作区指出需要保留的当前路由、注册表、主题和布局。

03 关键决策

影响结果的关键选择

  1. 准确指明方案

    可复制的名称让修改某一版本等后续请求不再含糊。

  2. 方案相互独立

    新版本保留各自的标识与交互状态。

  3. 持久保存布局

    保存的布局可恢复位置,而当前源代码仍是权威来源。

04 示例任务

从一份具体的需求开始

以下示例任务说明尚未经过测试。使用前请检查该技能的设置。

查看源文件和环境要求

列出方案名称、预期尺寸,以及希望探索的差异。

上游源文件
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/create-canvas/SKILL.md

下方链接会打开上游使用说明。使用前请查看仓库的环境配置要求;这不是安装命令。

先完成一项明确的交付物

运行该技能之前,请根据需要调整此需求中的范围、来源材料和约束。

示例简报
使用 create-canvas,在我们现有项目中比较三个定价卡片实验。保留原始卡片,另外创建两个独立命名的方案,使用相同的套餐数据和尺寸。使用安全的测试数据,保留当前生产组件的实现。添加可复制的名称、专用移动手柄,以及平移、缩放和适配视图控件。保留预览中的文字输入和选择状态。只保存布局,不保存表单内容。构建后测试重新加载、移动和缩放,并报告无法验证的设备手势或浏览器历史行为。

检查结果

根据以下可观察标准检查实际输出。

  • 新增方案保留此前的 ID、名称和位置。
  • 视图变化和预览项移动不会清除预览中的输入。
  • 存储只包含布局,无效条目能安全回退。

OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置,也不表示其中包含其外部工具、凭据和软件依赖项。

05 来源与许可证

来源与许可证

本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。

来源所有者
ibelick
技能文件
SKILL.md
许可证
MIT
已审查的快照
2026-11-02 · 4907a526b079
编辑来源摘要
在可命名、可移动的对比工作区中保留可交互的设计方案。

由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度指标,并不代表技能使用量或质量评分。

06 开始前的问题

开始前可能想问

浏览器存储能成为内容来源吗?

不能。注册表定义画布包含哪些预览项及其实现;保存的位置只应用于当前存在的 ID。

独立 iframe 能保证安全吗?

不能。源文件要求在挂载之前配置安全的 provider 和测试数据;仅隔离文档并不能阻止真实请求。

重置会删除实验吗?

重置只改变视图,同时保留预览项列表、位置、主题和草稿。

OpenDesign

让需求和设计工作保存在一起。

将简报、来源材料和设计工作集中保存在本地工作区中。将该技能添加到工作流程前,请检查其自身的设置说明。

上游源文件
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/create-canvas/SKILL.md