design-url-to-code
Rebuilds a live site as a clean editable local frontend by extracting design tokens into url-dna.md, then reconstructing in your stack and screenshot-comparing it.
Source: DKeken
At a glance
- Best for
- Recreating a live page as an editable starting point in your stack
- Works with
- Cursor · OpenAI Codex · Claude Code
- Outcome
- Capturing a site's design language as reusable tokens
- Source
- DKeken/codex-skills-alternative
01 / Understand the skill
About design-url-to-code
Turn a live website into a working local frontend you can edit. Fetches the page, extracts its design system and structure, and rebuilds it locally in your stack, then screenshot-compares to the original. Use when the user says "url to code", "clone this site locally", "make it look like linear.app", "rebuild this page", or provides a live URL to recreate. Part of the Product Design set. Uses web-fetch + browser automation.
Turn a live website into a working local frontend you can edit. Fetches the page, extracts its design system and structure, and rebuilds it locally in your stack, then screenshot-compares to the original.
Read full description
Turn a live website into a working local frontend you can edit. Fetches the page, extracts its design system and structure, and rebuilds it locally in your stack, then screenshot-compares to the original. Use when the user says "url to code", "clone this site locally", "make it look like linear.app", "rebuild this page", or provides a live URL to recreate. Part of the Product Design set. Uses web-fetch + browser automation.
02 / Confirm the fit
Use design-url-to-code when you need to
- Recreating a live page as an editable starting point in your stack
- Capturing a site's design language as reusable tokens
- Higher-fidelity rebuilds using computed CSS
03 / See the workflow
How design-url-to-code works
- 01Install: npx skills add https://github.com/DKeken/codex-skills-alternative --skill design-url-to-code
- 02Try: Rebuild this landing page locally and make it match closely.
- 03Get: A clean token-based frontend plus url-dna.md, verified by screenshot.
Check before installing
Compatible platforms
Cursor · OpenAI Codex · Claude Code
Best fit
Recreating a live page as an editable starting point in your stack
Review the source instructions if the required output differs from the formats described above.
Install and use
Compatible with Cursor and OpenAI Codex and Claude Code · Published by DKeken
Ready to add design-url-to-code?
Use the published instructions below, then provide the required input and describe the result you need.
General instructions · Cursor · OpenAI Codex · Claude Code
npx skills add https://github.com/DKeken/codex-skills-alternative --skill design-url-to-code
Review the source repository and license before installing third-party skills.
Continue exploring
Similar skills
Generates original p5.js generative art by first writing an algorithmic philosophy, then expressing it as a self-contained interactive HTML viewer with seeded randomness.
Reproduces a reference mockup as a runnable frontend, extracting its design system then screenshot-comparing the build and iterating until the gap is minor and explained.
Clarifies the brief before design work by interrogating goal, user, JTBD, constraints, success, and scope, then writing a context.md the other design skills consume.
Creates museum-quality original poster and visual-art PDFs/PNGs by drafting a design philosophy first, then expressing it as a minimal, design-forward single-page canvas.