reference-to-landing-page
Reference-to-Landing-Page
1. Overview
This skill takes a reference website URL plus a user modification prompt and produces a complete Nuxt 3 landing page built entirely with @rds-vue-ui/* components. It uses Playwright MCP for browser automation to capture the reference page, then translates every section into the RDS design system.
Inputs:
- A URL to an existing web page (the "reference")
- Natural-language instructions describing how the new page should differ
Outputs:
pages/<page-name>.vue— the composed landing pageassets/content/<page-name>.json— JSON-driven content for the page- Screenshots of both reference and final page for visual comparison
2. Prerequisites
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.
1figma-to-landing-page
Translates Figma design URLs into complete Nuxt 3 landing pages using RDS Vue UI components. Supports both Dev+ accounts (rich design context) and Basic accounts (screenshot-based). Use when user provides a Figma URL or screenshot of a design to implement.
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").
1