FreeVideo
App window with zoom
- 365365 downloads
- 125125 likes
- 188188 saves
Works with
+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
Recreate a mockup as a faithful UI v1.0.0
Use this resource to recreate a mockup or screenshot as a web interface
New
- 459 downloads
- 213 likes
- 223 saves
Free
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install image-to-ui-recreationWith no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.
First time: connect the CLI with
npx --yes palatekit@latest loginThe agent looks at the image, notes dimensions, text, spacing, fonts and colors, then builds the page with your project's components. It renders the page at the reference's size, compares the two and fixes the gaps. You get a faithful interface with an honest account of what was actually compared.
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Licence
- MIT
Similar resources
View all- Free
FreeVideo
One big number
- 463463 downloads
- 223223 likes
- 100100 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
PalateKit Motion, the library
- 338338 downloads
- 198198 likes
- 249249 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three bars head to head
- 348348 downloads
- 133133 likes
- 182182 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Before / after slider
- 322322 downloads
- 248248 likes
- 238238 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three-card carousel
- 418418 downloads
- 157157 likes
- 101101 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Chat exchange
- 564564 downloads
- 127127 likes
- 161161 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Checklist ticking off
- 442442 downloads
- 233233 likes
- 160160 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- SKILL.md: a three-step method (inspect, implement, compare and correct)
- Fidelity rules: no redesign, no invented assets
- A reporting rule that flags the remaining differences
Good fit for
- Going from a Figma mockup or screenshot to a coded page
- Faithfully cloning a reference screen supplied by a client
- Recoding a page from an approved visual
Not for
- Imagining a design from a brief with no image
- Improving or retouching a mockup's design
- Generating images or illustrations
Tags
- mockup
- screenshot
- html
- css
- interface
About
You say
"Here is my homepage mockup: recreate it exactly in HTML and CSS and compare it with a screenshot."
Skill published by UIZZE under the MIT license.
Show moreShow less
Prerequisites
- You bring
- The reference image (screenshot or mockup) and The project or folder where the page goes
How to use it
- Install the skill and add the reference image.
- Point to the target page or project.
- Review the report and the differences it flags.
Content preview
Files
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.4 KB
- SKILL.md3.1 KB
Origin and licence
Modified by PalateKit
- Author
- uizze
- Source
- github.com/uizze/uizze/tree/40b0ee439ba88aecb65d68bcb379da0e716b899e/skills/image-to-ui
- Licence
- MIT
Notice
Version modifiée de « image-to-ui » (uizze, MIT) : traduction française et fiche par PalateKit.
User reviews
–
No ratings yet
Loading reviews…
Frequently asked questions
Does the agent need to see the image?
Yes, it has to look at the image itself; if its tool can't, it will ask for a readable copy.
Are missing fonts replaced?
The skill asks the agent to flag the limit rather than substitute silently; supply the fonts for an exact match.