千星图片编辑器 CSS 生成器

问题

千星图片编辑器的导入链路依赖严格的 CSS 场景解析，普通网页 CSS 很容易因为伪元素、渐变、百分比尺寸或旋转写法不合法而静默丢失图元。手写样式时，若没有先确认画布尺寸和图元上限，最终导出预览、PNG 与 GIA 素材可能整体错位或颜色被替换。

工作方式

该技能按“先规划、后写码”的流程生成可导入 CSS：

• 先确认 图元数量上限 与 画布尺寸，满画布背景矩形也计入预算。
• 从参考图提取 3–6 个主色，再划分天空、主体、前景等区域，按 z-index 规划图层。
• 仅使用编辑器可识别的图元：矩形、椭圆（border-radius: 50%）、三角形（精确 clip-path 模板）。
• 用旋转椭圆做柔光、阴影和叠色，用不透明矩形或三角形表现主体，避免越界包围盒。
• 输出只保留 CSS，并在注释中写明类似 11/20 elements used 的用量。

适用边界

该方案适合在图元上限内快速生成可 round-trip 的编辑器场景，但不支持渐变、rgba、百分比尺寸、伪元素、box-shadow、filter 以及非 rotate(Ndeg) 的变换。若需要原生星星、精确旋转三角形或更高还原度，应改用 JSON 导入，而不是继续用 CSS 近似。