做一个商品DIY页面

用户端功能 1. 形状选择：提供15种产品形状，支持缩放；在已做完设计后改变产品形状，涂色和虚线切割区域会根据所占面积按比例放大或缩小；配饰、图案和笔刷绘制大小位置不变，用户可以拖拽到新的形状上。 2. 材质与颜色：用户可从侧边栏素材库拖拽颜色/贴纸到产品；每页展示24个素材，可根据设备调整展示数量。纯色效果：例如渐变和透明度；例如，用户先选定区域，然后点击渐变，再选择渐变颜色。 3. 图案设计：贴纸库：预设花纹（花卉/几何等2D图案）。配饰库：预设配饰（水钻/贝壳等立体配饰，但2D展示即可）。图层管理：可锁定/隐藏/删除特定元素。 4. 切割与分区：使用虚线或实线切割、分割产品表面，并独立编辑不同区块；使用Canvas或WebGL的路径绘制（如Lasso Tool）分割表面，并为每个分区建立独立图层。 虚线/实线切割：用户可分割商品表面，线条可以加点拉伸成曲线，类似ps里的功能。独立编辑不同区域。选区编辑：框选区域后调整颜色或删除内容。 5. 保存与下单：生成设计图：输出高清PNG供用户分享。购物车对接：将设计参数（颜色ID、贴纸ID）转化为Shopify产品变体。设计图实时保存或点击保存按键保存，用户在不下单的情况下设计图后台存储三天。 管理端功能 1. 素材库管理：可扩展的材料和颜色库；后台可上传/分类材质贴图（支持PNG/SVG），设置价格权重（如“亮片+$0.5”）。 2. 自动计算DIY产品价格的功能，并引导用户流畅跳转至购物车或结账页面； 3. 支持未来3D展示效果的可能。 设计风格 1. 风格类似casetify和nike的定制页面的设计，并融合游戏风格。 2. 整体页面设计风格要求可爱、温暖、干净。 3. 英语系统 *功能上线前需要保密，也不能帮竞品做相似的设计，上线后一年内不能帮同行做相似的设计