From Figma to code: your design, just as you imagined it

You have a layout and want a website that really looks like it. The same colors, type in the right place, images at the size you chose. AI can help, but sometimes it decides to add its own touch. And there goes half your design.

Kodety AIDoff helps guide that work. It adds instructions for the AI to pay closer attention to your reference, turn the design into a working page and check the result. That is what we call a skill: extra guidance for a particular task.

From reference to a working screen

What does this look like in practice? Here are three examples published in the Kodety AIDoff repository. Click the images to open them at their original size and inspect the details.

Starting from a screenshot

This financial dashboard was recreated from a single image, without the Figma file. The reference is on the left and the result on the right. Look at the card layout, colors and typography.

With a Figma file

With access to Figma, the skill can also inspect measurements and retrieve original design assets. The next two examples show implemented pages running in the browser.

Fidelity depends on reference quality and access to fonts and project files. Images by Kodety / Matusael Horch, available in the Kodety AIDoff repository under CC BY-SA 4.0.

Do I need a Figma file?

No. You can start in two ways:

• With Figma: share the link to the screen you want to turn into a website. The AI needs to open the file; check permissions and the Figma connection.
• With a screenshot: attach a clear image of the page. If you have desktop and mobile versions, send both.

Figma can reveal details an image cannot. A screenshot already provides useful visual direction. In both cases, include your logo, images and font if you have them. The less the AI has to guess, the better.

Let's build the first screen

After installing the skill, open the task where you want to build the website, attach your reference or paste the Figma link. Start with one page and explain what it needs to do:

Use Kodety AIDoff to turn this reference into a website. Preserve the colors, typography and layout. Make it work on mobile, with a menu that really opens. Show me the result so I can check it.

If a button needs to lead to a form, say so. If the form does not exist yet, say that too. An image shows appearance; it cannot explain everything that happens after a click.

Close enough? Now refine what matters.

Open the page, test the menu and check it on mobile. Compare it with your reference. Does the heading take up the same space? Are the images fully visible? Is it easy to read and click?

When something differs, ask for a specific correction:

The heading is too large and wraps one line too early. Reduce it until it matches the reference. On mobile, add more space between the text and the button.

That is much more useful than “make it pretty.” The skill organizes the work, but does not promise to get everything right on its own. Your direction still matters. A website running on your computer also needs to be published before other people can access it.

Getting started in your preferred app

Choose your option below. Install once, then invoke the skill whenever you need it.

mkdir -p "$HOME/.agents/skills"
git clone https://github.com/onunbeai/kodety-aidoff.git "$HOME/.agents/skills/kodety-aidoff"

mkdir -p "$HOME/.claude/skills"
git clone https://github.com/onunbeai/kodety-aidoff.git "$HOME/.claude/skills/kodety-aidoff"

Need the full instructions? Find them on the Kodety AIDoff GitHub page.