LogoClawIndex
案例技能关于
LogoClawIndex

lumos-import-figma - 将 Figma 设计导入为 Lumos for Astro 变量与页面

通过对齐设计数值与基础样式并运行 convert.mjs 脚本,从 Figma 文件生成 Lumos 变量或构建 Astro 页面。

标签

更新于: 2026-09-22
figmalumosastro设计变量css

能力

读取 Figma 上下文与页面截图盘点多类别的设计数值将设计数值转换为流体 token识别设计不一致供用户确认

典型输入

Figma 设计文件链接Figma MCP 集成基础 CSS 样式表(src/styles/base.css)

典型输出

设计盘点 JSON 文件Token 转换报告与代码片段设计不一致确认清单

该技能可以做什么

  • 读取 Figma 上下文与页面截图
  • 盘点多类别的设计数值
  • 将设计数值转换为流体 token
  • 识别设计不一致供用户确认
  • 使用 Lumos 组件构建页面
  • 对比构建效果与设计截图

输入

  • Figma 设计文件链接
  • Figma MCP 集成
  • 基础 CSS 样式表(src/styles/base.css)
  • 项目配置文件(package.json)

输出

  • 设计盘点 JSON 文件
  • Token 转换报告与代码片段
  • 设计不一致确认清单
  • 新建 Lumos 组件与 Astro 页面

要求

  • Node.js 环境
  • Figma MCP 工具
  • Astro 开发服务器
  • Lumos 代码库结构

来源

  • 规范: SKILL.md

ClawIndex

OpenClaw Skills 与 Use Case 索引

ClawIndex 是一个生态驱动的 OpenClaw Skills 与真实 Use Case 索引站。

索引

Skills·
Cases

Meta

关于·
声明·
邮箱·
GitHub
© 2026 ClawIndex 保留所有权利。