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 page
• assets/content/<page-name>.json — JSON-driven content for the page
• Screenshots of both reference and final page for visual comparison

2. Prerequisites