figma-to-landing-page
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:
More from chandima/rds-lp-factory
rds-component-mapper
Maps visual descriptions, design context, or screenshots to the closest @rds-vue-ui/* design system components. Use when you need to select RDS components for a landing page section based on visual intent, Figma data, or natural-language descriptions.
2markdown-spec-to-page
Converts a markdown specification document into a complete Nuxt 3 landing page using RDS Vue UI components. Use when user provides a markdown file or text describing the desired page structure, components, and content.
1iterative-build-page
Builds a Nuxt 3 landing page section-by-section from natural language descriptions using RDS Vue UI components. Use when user describes page sections incrementally (e.g., "Add a hero with video background", "Now add a 3-column card grid").
1reference-to-landing-page
Creates a new Nuxt 3 landing page inspired by a reference website URL, adapted with user-specified modifications, using RDS Vue UI components. Use when user provides an existing page URL and describes how they want the new page to differ.
1