figma-to-landing-page
Installation
SKILL.md
Figma to Landing Page
1. Overview
Converts Figma designs into production-ready Nuxt 3 pages composed from @rds-vue-ui/* components. This skill implements a two-tier approach to accommodate different Figma account levels:
| Tier | Input | Context Quality | When Used |
|---|---|---|---|
| Rich Path (Dev+) | Figma URL | Full layout tree, typography, colors, component structure | get_design_context returns rich data |
| Screenshot Path (Basic) | Figma URL, prototype URL, or image | Visual analysis only | get_design_context fails, returns limited data, or user provides an image/screenshot |
Both tiers produce the same output: a pages/<page-name>.vue file with a companion assets/content/<page-name>.json data file, built entirely from @rds-vue-ui/* components.
2. Prerequisites
Before starting, confirm the following are available: