lumos-import-figma - Import Figma designs into Lumos for Astro
Build Astro pages or generate Lumos tokens from Figma files by reconciling design values against base styles using convert.mjs.
Tags
Updated: 2026-09-22Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Read Figma context and screenshots
- Inventory design values across categories
- Convert design values to fluid tokens
- Identify design inconsistencies for user review
- Build pages using Lumos components
- Compare built pages against design screenshots
Inputs
- Figma design file link
- Figma MCP integration
- Base CSS stylesheet (src/styles/base.css)
- Project package file (package.json)
Outputs
- Design inventory JSON file
- Token conversion report and snippets
- User inquiry list for design inconsistencies
- New Lumos components and Astro pages
Requirements
- Node.js environment
- Figma MCP tools
- Astro development server
- Lumos codebase structure