Stop 5 of 8 · Weekly
The landing page with Claude Code
A Figma frame becomes a real page: the brief Claude Code needs, the phone pass, and what a designer checks in the code.
When Wix is not the answer
Four or five times a year a client asks for something the builder will not do. The product film that scrubs frame by frame as you scroll. A calculator that quotes a bathroom in three questions. An SVG that draws itself as the section arrives. Dany used to say no, or price it at three weeks and lose the job. Claude Code is Claude working inside a folder on her machine, reading the files, writing the HTML and CSS, running it and looking at the result, which turns that page into an afternoon.
She keeps it to one page. The landing page lives on its own, the rest of the site stays in Wix, and the client gets one link.
The brief it actually needs
Export the frame as a PNG into an empty folder. Then say the things the picture cannot say: the fonts with a real fallback, the hex codes, the width range, what happens on tap and on hover, whether the hero image is one file or a video, where the page will be hosted, and what it must not do. Ask for one HTML file with the CSS in a style tag, because one file is a thing a client can host anywhere and you can read in one screen.
Try this
Look at hero.png and build it as index.html with the CSS in a style tag. Match the layout, spacing and colours you see. Fonts: Inter for headings and system sans for body, with fallbacks. Keep it readable from 360 to 1440 pixels wide, no horizontal scrolling. The button scrolls to the form below. Then open it in my browser.
Take a screenshot of the page at 390 pixels wide and tell me what is wrong with it as a designer would: line lengths, the header height as a share of the screen, tap targets under 44 pixels, anything that wraps badly. Fix the three worst and show me before and after.
Read index.html and answer six things. Is any text baked into an image. Does every image have alt text. Is the heading order correct. How heavy is the page in total and what is the biggest file. Do the fonts load without a flash of nothing. Does it still make sense with images blocked. One line each, then the fixes in order of what a visitor would notice.