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.

Financial dashboard comparison: reference on the left, Kodety AIDoff implementation from a screenshot on the right — Financial dashboard · Screenshot → code

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.

Trading dashboard implemented from Figma with Kodety AIDoff, with sidebar navigation, indicators and a performance chart — Trading dashboard · Figma → code

Workspace overview implemented from Figma with Kodety AIDoff, with metrics, workspaces and a side panel — Workspace overview · Figma → code

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.

I use Codex

Open Terminal, the window where you enter commands on your computer, and paste the two lines below. They use Git and work on macOS, Linux or Git Bash on Windows.

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

Then start your request with $kodety-aidoff and attach the reference. If the skill does not appear, restart Codex. Preserve any existing installation in that folder.

I use Claude Code

In Terminal, paste these lines. They use Git and work on macOS, Linux or Git Bash on Windows.

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

Invoke /kodety-aidoff, followed by your request and reference. Restart Claude Code if needed. Preserve any installation already in that folder.

I use Claude in the browser or app

Download kodety-aidoff.zip without unzipping it.
Enable Code execution and file creation.
Open Customize → Skills → + → Create skill → Upload a skill.
Upload the ZIP, enable the skill and ask to use Kodety AIDoff with your reference.

These options may depend on your organization's settings. Installing the skill does not automatically connect your files or Figma.

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

PromptGen

What are we creating?

Creation type

Subject