Image to Code

An assistant writing a page from a sentence is composing blind: it holds no picture of the result, so it falls back on the arrangement it has written a thousand times. This skill inserts a step. It draws the section as an image, looks hard at what it drew, writes down the spacing, the type scale (the set of text sizes a design uses) and the colours it can see, and only then writes the code to reproduce it. Working from a picture is what stops the layout drifting into the usual stack of boxes. Be clear on the direction of travel: the name sounds like you supply an image, but it produces its own, so this is for making something new rather than copying a design you already have.

Reach for it when the look actually matters and a plain description keeps giving you the same page: a front page, a hero section at the top of it, a portfolio, a marketing site. Check before you install, because this ships as one of the thirteen skills inside Taste Skill: if you already added that pack, you already have this one and the command below is wasted. It was written for Codex, and an assistant that cannot generate pictures cannot follow the first half of it.

1. Skip this step if you have already installed Taste Skill, since this skill came with it. Otherwise open the Terminal app, the window where you type commands, in your project folder and paste the line below. The --skill part fetches this one skill on its own rather than all thirteen.
2. Ask for a section rather than a whole site, for example: design and build a hero section for a badminton club, images first. One section at a time keeps the drawing large enough to read and the code small enough to check.
3. Look at the picture it generates before you accept the code. If the picture is wrong, the code will faithfully reproduce something wrong, and it is far cheaper to reject a drawing than to unpick a built page.