前言¶

在千星奇域（Miliastra）生态里做 UI 或平面素材，常见路径是进 千星图片编辑器 手摆图元，再导出 GIA。若目标图已经有一张参考图或清晰描述，却要自己估图层数量、算旋转矩形和 clip-path，成本很高。通用「画网页 CSS」或「写 SVG 路径」的 Skill 也不对口：编辑器要的是它认得的场景 CSS，不是任意样式表。

下面介绍 SkillHub 上的社区 Skill「千星奇域图片编辑器-css生成」，让 Agent 在约束条件下生成可导入编辑器、并可继续导出 GIA 的 CSS 图元场景。

这是什么¶

「千星奇域图片编辑器-css生成」（坐标 @user_3a6be892/miliastra-image-css-builder，当前版本 1.0.13，分类 design-media，来源 community，发布者 user_3a6be892）是一条面向 千星图片编辑器 WebUI 的生成型 Skill。

一句话定位：把用户提供的图片或文字描述，拟合成编辑器可导入的 CSS 图元场景；也支持通过页面 WebMCP 创建或修改画布。官方明确说明：不用于任意 CSS 网页排版，也不用于 SVG 路径绘制。

SkillHub 页面标注 requires_api_key=false，安装本 Skill 本身不需要额外 API Key。

核心功能¶

以下能力均来自 SkillHub 简介与任务说明，可与页面对照。

图元拟合与导出链路¶

• 在用户给出参考图或描述时，用有限数量的图元去拟合画面，输出可导入千星图片编辑器、并能在编辑器侧导出 GIA 的 CSS。
• 若用户未说明图元数量上限或画布尺寸，Skill 会先向用户提问，再生成，避免场景尺度失控。

支持的图元与几何¶

• 旋转矩形、旋转椭圆、星形、圆环、文本框、素材图片等（SkillHub 简介列举项）。
• 原生三角形：通过精确的 clip-path 字符串表达。
• 旋转是走 CSS 图元相对「导入 SVG」路径的独有能力之一（任务说明中的对比点）；适合需要斜放块面、椭圆块面的拟合，而不必先拆 SVG 再导入。

WebMCP 与边界¶

• 可用于在编辑器页面通过 WebMCP 创建或修改画布（简介原文）。
• 不适用：通用网页 CSS、任意 SVG path 手绘——这些会偏离千星编辑器的导入格式与工作流。

安装与启用¶

方式一：SkillHub CLI（推荐）¶

先确认本机是否已有 skillhub（安装流程见 SkillHub 安装文档）：

command -v skillhub && skillhub --version

安装 Skill 时必须用 --dir 指向当前 Agent 的 skills 目录；未指定时默认落到 ./skills/，Agent 可能无法加载。

skillhub install @user_3a6be892/miliastra-image-css-builder --dir <skills 目录>

常用目录示例（以安装文档为准，按你实际使用的客户端选择）：

• Cursor：~/.cursor/skills/
• Claude Code：~/.claude/skills/
• Codex：~/.codex/skills/ 或项目下的 .agents/skills/

方式二：让 Agent 按官方提示安装¶

SkillHub 技能页提供的安装提示为：

请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_3a6be892/miliastra-image-css-builder`。

将上述内容发给支持 Skill 的 Agent，由其按文档完成 CLI 检查与 --dir 安装即可。Cursor、Codex CLI、Claude Code 的差异主要体现在 skills 目录路径，安装命令形式相同。

典型用法¶

官方未在抓取页面中给出固定 prompt 模板，但简介与 Skill 设计约束可以还原一条可复现流程：

1. 准备输入：上传参考图，或用文字说明画面结构、配色与关键形状。
2. 补齐约束（若尚未说明）：主动或应答 Agent 关于图元数量上限、画布宽高的提问。
3. 生成 CSS 场景：由 Agent 调用本 Skill，产出千星图片编辑器可识别的 CSS 图元描述（含旋转块面、星形、圆环、文本框、贴图等）。
4. 导入与导出：在 千星图片编辑器 WebUI 中导入生成的 CSS，微调后按编辑器流程导出 GIA。
5. 画布协作（可选）：若已在编辑器页面启用 WebMCP，可让 Agent 通过本 Skill 在页面上创建或修改画布，而不是只交付静态 CSS 文本。

向 Agent 描述需求时，建议写清「拟合」「可导入千星图片编辑器」「导出 GIA」，并避免要求「写落地页 CSS」或「画 SVG path」，以免触发 Skill 声明的边界。

适用场景与注意¶

适合谁

• 使用千星奇域图片编辑器、需要在 GIA 管线里复用平面结构的创作者或开发者。
• 希望用少量规则图元（含旋转矩形/椭圆、clip-path 三角形等）逼近参考图，而不是从零手摆每一个图层的人。
• 已在编辑器侧使用 WebMCP，希望 Agent 直接改画布的场景。

使用注意

• 本 Skill 服务的是编辑器场景 CSS，不是浏览器排版或 SVG 插画工作流。
• 图元上限与画布尺寸会直接影响拟合精度；未提供时应先回答 Agent 的提问，再生成。
• SkillHub 统计（以抓取资料为准）：评分 100000，下载 1486，安装 12；社区来源，行为以当前版本 1.0.13 的 Skill 包为准，升级后若有变更以 SkillHub 页面为准。

结尾¶

「千星奇域图片编辑器-css生成」把「参考图/描述 → 有限图元 CSS → 编辑器导入 → GIA 导出」串成 Agent 可执行的一步，并区分了 CSS 旋转图元与 SVG 导入、通用 CSS 网页等路径。需要安装或查看说明时，可打开 SkillHub 技能页或 API 入口：

• SkillHub：https://www.skillhub.cn/skills/user_3a6be892/miliastra-image-css-builder
• 官方地址：https://api.skillhub.cn/user_3a6be892/miliastra-image-css-builder