Skill

Image to Code

leonxlnx

Draws the page as artwork first, one legible frame per band of the page, studies what it drew, then writes the frontend to match. The picture is a step in the middle rather than the deliverable, which is what separates it from the image-only skills next to it.

A situation it fits

Three built attempts at the product page have been thrown away, each one after it was finished, because the founder only knows what he wants once he sees it. He now wants the visual settled before the build and then the real page from it, and he is not paying two people to hand work between.

Image to Code. Draw the page, study what was drawn, then write the frontend to match: the picture is the middle step rather than the deliverable, which is the single-pass sequence this founder is asking for and the one thing that stops a fourth finished page being thrown away. The most tempting wrong answer is imagegen-frontend-web, which produces the very reference he wants to look at - its trap is that the reference IS its deliverable, so somebody else still builds the page, which is the handoff he ruled out. imagegen-frontend-mobile stops at pictures too, and at the wrong shape. brandkit is working on an identity, not a page.

Skills it gets confused with

These share a family with Image to Code, which is another way of saying they are the ones you might reach for by mistake.

Every comparison with Image to Code

Knowing what Image to Code does is the easy half. Telling it apart from the others under time pressure is the game.

Today's session

Image to Code is part of leonxlnx/taste-skill. Licence: MIT. The description above was written for this game, not taken from the skill.