comp-to-lp - Recreate a landing page from a design comp
Recreates a landing page from a completed design comp using HTML/CSS and selectively generated images, then compares the implementation with the comp.
Tags
Updated: 2026-10-19Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Inspect design comp
- Estimate image assets
- Generate image assets
- Build HTML/CSS layout
- Compare implementation visually
- Measure layout differences
- Check mobile overflow
- Record progress and costs
Inputs
- Completed design comp image
- Image-studio workspace
- Approved image budget
- OpenAI image-generation access
- User scope preferences
Outputs
- HTML landing page
- CSS stylesheet
- Generated image assets
- Asset cost ledger
- Asset documentation
- Progress documentation
- Comparison images
- Layout measurement results
Requirements
- Node.js 20.6 or newer
- OpenAI image API access
- Playwright Chromium
- Workspace file permissions
- Approved budget before paid generation