lumos-import-figma - 将 Figma 设计导入为 Lumos for Astro 变量与页面
通过对齐设计数值与基础样式并运行 convert.mjs 脚本,从 Figma 文件生成 Lumos 变量或构建 Astro 页面。
标签
更新于: 2026-09-22该技能可以做什么
- 读取 Figma 上下文与页面截图
- 盘点多类别的设计数值
- 将设计数值转换为流体 token
- 识别设计不一致供用户确认
- 使用 Lumos 组件构建页面
- 对比构建效果与设计截图
输入
- Figma 设计文件链接
- Figma MCP 集成
- 基础 CSS 样式表(src/styles/base.css)
- 项目配置文件(package.json)
输出
- 设计盘点 JSON 文件
- Token 转换报告与代码片段
- 设计不一致确认清单
- 新建 Lumos 组件与 Astro 页面
要求
- Node.js 环境
- Figma MCP 工具
- Astro 开发服务器
- Lumos 代码库结构
