千星图片编辑器 CSS 生成

Generate importable CSS for the 千星图片编辑器.

Ask First

If the user wants image fitting, icon tracing, or visual approximation and does not give a maximum element count, ask a short follow-up question for the limit before writing CSS.

Example:

请给我一个图元数量上限，例如 20、50 或 100。

Output Goal

Return CSS only unless the user explicitly asks for explanation.

Target the editor's CSS importer format:

• One .shaper-container { ... } block for the canvas.
• One rule per element, preferably .shaper-element.shaper-e0, .shaper-element.shaper-e1, and so on.
• Use absolute positioning with the element center expressed by left and top.
• Treat .shaper-container as layout only, not as visual background.

Core Rule

For this skill, generate CSS with only the importer-safe building blocks that reconstruct reliably:

• rectangle
• ellipse via border-radius: 50%
• position via left and top
• size via width and height
• rotation via transform: translate(-50%, -50%) rotate(...)
• transparency via opacity

Even though the codebase has some internal support for triangle or star shapes, the CSS importer does not reliably infer those complex shapes from arbitrary CSS. Therefore:

• Do not generate clip-path
• Do not generate border-triangle hacks
• Do not generate pseudo-elements
• Approximate triangle, four-point star, and five-point star with multiple rectangles and ellipses

If the user needs an exact triangle or star instead of a CSS approximation, say so briefly and recommend JSON/GIA export or adding native shapes inside the editor after import.

Simple Example

User request:

请用不超过 3 个图元生成一个 120x120 的 CSS：白色底，中间一个蓝色圆形，底部一个橙色矩形。

Expected output style:

.shaper-container {
  position: relative;
  width: 120px;
  height: 120px;
  background: #ffffff;
  overflow: hidden;
}

.shaper-element {
  position: absolute;
  box-sizing: border-box;
}

.shaper-element.shaper-e0 {
  left: 60px;
  top: 60px;
  width: 120px;
  height: 120px;
  background: #ffffff;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  z-index: 0;
}

.shaper-element.shaper-e1 {
  left: 60px;
  top: 50px;
  width: 56px;
  height: 56px;
  background: #335cff;
  opacity: 0.96;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  border-radius: 50%;
  z-index: 1;
}

.shaper-element.shaper-e2 {
  left: 60px;
  top: 92px;
  width: 52px;
  height: 20px;
  background: #ff8a00;
  opacity: 0.92;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  z-index: 2;
}

Required Canvas Properties

Always include these in .shaper-container:

• position: relative;
• width: px;
• height: px;
• background: #ffffff;
• overflow: hidden;

The container background is not part of the visual design contract.

If the design needs a dark or colored background, represent it with a full-canvas rectangle element as the first shape.

Required Element Properties

Every element rule must include:

• left: px;
• top: px;
• width: px;
• height: px;
• background: ;
• opacity: <0-1>;
• transform: translate(-50%, -50%) rotate(deg);
• transform-origin: 50% 50%;
• Optional z-index: ;

Use px units for size and position. Use solid colors only, preferably hex colors such as #aabbcc or simple rgb(r, g, b).

Prefer background for fills. background-color is accepted as a compatibility fallback for elements, but background is the recommended output.

Supported Building Blocks

Use only these primitive building blocks for CSS output:

• Rectangle: no extra shape property.
• Ellipse: add border-radius: 50%;

Represent scaling by changing width and height.

Represent rotation only with rotate(deg).

Represent transparency only with opacity.

Represent complex silhouettes by combining multiple rectangles and ellipses.

Rotation convention:

• rotate(0deg) means no rotation.
• Positive angles are clockwise on the editor canvas.
• Negative angles are counterclockwise on the editor canvas.
• When describing orientation in words, prefer being explicit, for example rotate(45deg) for a clockwise tilt or rotate(-30deg) for a counterclockwise tilt.

Unsupported Or Unsafe Properties

Do not rely on these, because the current CSS importer ignores them, partially parses them, or does not reconstruct them reliably:

• gradients such as linear-gradient(...) or radial-gradient(...)
• images such as url(...)
• border, outline, box-shadow, filter, mask
• clip-path in any form
• border-triangle techniques such as width: 0, height: 0, border-left, border-right, border-bottom
• scale(...), skew(...), matrix(...), translateX(...), translateY(...)
• pseudo-elements such as ::before and ::after
• percentage-based layout as the primary geometry description

Working Style

When fitting an image:

1. Respect the element limit strictly.
2. Prefer large background rectangles or ellipses first.
3. If the composition needs a background, use a rectangle element instead of container background color.
4. Approximate complex shapes with overlapping rectangles and ellipses.
5. Keep stacking simple and readable.
6. Favor fewer, cleaner shapes over noisy micro-detail.

If the requested fidelity is unrealistic for the given limit, say so briefly and either:

• offer a lower-fidelity CSS version within the limit, or
• recommend SVG/JSON export instead.

Primitive Examples

All examples below are import-safe and avoid clip-path, pseudo-elements, and border hacks.

Common scaffold:

.shaper-container {
  position: relative;
  width: 120px;
  height: 120px;
  background: #ffffff;
  overflow: hidden;
}

.shaper-element {
  position: absolute;
  box-sizing: border-box;
}

Rectangle

Single rectangle:

.shaper-element.shaper-e0 {
  left: 60px;
  top: 60px;
  width: 76px;
  height: 44px;
  background: #2563eb;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  z-index: 0;
}

Isosceles Triangle Approximation

Stepped isosceles triangle built from 5 rectangles:

.shaper-element.shaper-e0 {
  left: 60px;
  top: 30px;
  width: 18px;
  height: 10px;
  background: #ea580c;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  z-index: 0;
}

.shaper-element.shaper-e1 {
  left: 60px;
  top: 42px;
  width: 34px;
  height: 10px;
  background: #ea580c;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  z-index: 1;
}

.shaper-element.shaper-e2 {
  left: 60px;
  top: 54px;
  width: 50px;
  height: 10px;
  background: #ea580c;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  z-index: 2;
}

.shaper-element.shaper-e3 {
  left: 60px;
  top: 66px;
  width: 66px;
  height: 10px;
  background: #ea580c;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  z-index: 3;
}

.shaper-element.shaper-e4 {
  left: 60px;
  top: 78px;
  width: 82px;
  height: 10px;
  background: #ea580c;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  z-index: 4;
}

Four-Point Star Approximation

Four-point star built from one vertical rectangle, one horizontal rectangle, and one rotated center square:

.shaper-element.shaper-e0 {
  left: 60px;
  top: 60px;
  width: 18px;
  height: 84px;
  background: #0f4c81;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  z-index: 0;
}

.shaper-element.shaper-e1 {
  left: 60px;
  top: 60px;
  width: 84px;
  height: 18px;
  background: #0f4c81;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  z-index: 1;
}

.shaper-element.shaper-e2 {
  left: 60px;
  top: 60px;
  width: 34px;
  height: 34px;
  background: #0f4c81;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: 50% 50%;
  z-index: 2;
}

Five-Point Star Approximation

Five-point star built from 5 outward spokes plus 1 center ellipse:

.shaper-element.shaper-e0 {
  left: 60px;
  top: 34px;
  width: 16px;
  height: 56px;
  background: #be123c;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  z-index: 0;
}

.shaper-element.shaper-e1 {
  left: 79px;
  top: 48px;
  width: 16px;
  height: 56px;
  background: #be123c;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(72deg);
  transform-origin: 50% 50%;
  z-index: 1;
}

.shaper-element.shaper-e2 {
  left: 72px;
  top: 73px;
  width: 16px;
  height: 56px;
  background: #be123c;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(144deg);
  transform-origin: 50% 50%;
  z-index: 2;
}

.shaper-element.shaper-e3 {
  left: 48px;
  top: 73px;
  width: 16px;
  height: 56px;
  background: #be123c;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(216deg);
  transform-origin: 50% 50%;
  z-index: 3;
}

.shaper-element.shaper-e4 {
  left: 41px;
  top: 48px;
  width: 16px;
  height: 56px;
  background: #be123c;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(288deg);
  transform-origin: 50% 50%;
  z-index: 4;
}

.shaper-element.shaper-e5 {
  left: 60px;
  top: 60px;
  width: 24px;
  height: 24px;
  background: #be123c;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  border-radius: 50%;
  z-index: 5;
}

These examples are intentionally simple. When generating image-fit CSS, use the same principles to compose larger silhouettes from a small number of safe primitives.