SuperAPI AI 工具集

component-canvas

设计与创作

查看项目

更新于 10-15 22:16

技能介绍

用途:为项目现有 UI 组件搭建一个全屏交互画布,展示组件真实行为与各命名变体,支持平移和缩放浏览,便于集中查看与对比组件,而不改动组件本身。

主要能力:按用户指定范围展示组件,分组呈现,每组使用统一的内边距、圆角与细虚边框;展示受支持的命名变体与有用状态,一次只对比一个 prop 或特性(样式对比只变 variant,尺寸对比只变 size 等);提供平移、缩放、触控缩放、适配全部与重置按钮。若项目本身支持明暗主题,可加可访问的主题切换。

使用方式:先阅读仓库约定、路由、组件公开 API、设计令牌与测试设置,沿用现有框架与库。按顺序添加最小画布路由或入口(一个分组、一个组件)并确认可用,再补其余分组与示例数据,最后逐个加入变体对比、进阶手势与持久化。画布代码集中放置,布局与相机逻辑同示例数据、组件源码分离。仅在影响构建内容或涉及共享代码时才询问用户。

限制:不得为让画布工作而修改组件源码、导出、样式、hooks 或行为;不得修补库、浏览器 API、渲染后的 DOM 或 portal 根节点。画布快捷键(空格、方向键、Escape、原生撤销)只作用于画布外壳,不得抢占预览控件的按键。预览需先用测试数据、mock 服务或现有回调做好安全隔离,禁止使用生产凭据或数据,无法安全隔离就省略该示例。组不可拖动,画布没有撤销/重做或编辑历史。持久化只保存相机(带版本格式、按项目或工作空间设键),重置只恢复相机。资料未提供安装命令、版本、收费与平台信息。