Prompt, project or Figma file: the three forms of a template

The prompt: the design as instructions

A template prompt describes the finished design in enough detail for a tool to make it: structure, type, colour, spacing, components, motion, phone behaviour. You paste it into an AI coding tool and add what should differ for you.

Its strength is that adaptation happens during the build. The tool writes your headline into the layout instead of patching it in afterwards, and the code comes out in your tool's own style, in a project you watched being made. Its limit is that a rebuild is an interpretation. Two runs can differ in small ways, and a detail the prompt does not state is left to the tool.

The project: the design as running code

The project is the codebase that produces the preview. You install it, run it, and see the same thing the template's page shows. Nothing is interpreted, so nothing drifts.

Reach for it when exactness matters: a complex 3D scene, tuned shader code, timing that took a designer days. It is also the reference when a build from the prompt looks slightly off, since you can ask your tool to compare the two. Its limit is that you are now editing someone else's code. Give your tool time to read it before asking for changes, and ask for changes one area at a time.

The Figma file: the design as a drawing

The Figma file is the editable source: the frames, the components, the type and colour styles. It is where you try a different palette, re-space a section or draw a new one in the same language, before any code changes.

It serves designers and anyone who must show a client a direction for approval. It does not hold behaviour. A drawing shows states side by side; it does not show how one becomes the next. For motion and interaction, the prompt and the project are the record.

Which to reach for

• You want your own version quickly: the prompt, with an adaptation brief under it.
• You want the preview exactly, then small changes: the project.
• The scene is heavy 3D or shader work: the project, since that is where exactness is hardest to rebuild.
• You need a client to approve a look first: the Figma file, then the prompt or the project.
• You are adding one component to an existing codebase: the prompt, so the tool writes it in your conventions.
• A build from the prompt has drifted: the project as the reference, the prompt as the description of intent.

Using two together

The forms work best in pairs. Prompt and project: build from the prompt, then have the tool check its result against the project and correct the differences. Figma and prompt: change the design in the file, then tell the tool exactly which values moved. Project and Figma: redesign a section in the file and ask the tool to bring the running project into line with it.

On uberdesigner, our library, each template comes with all three. A free account opens the prompts of free templates; the projects and Figma files come with a plan.

A request for checking a build against the project

Two folders are open: ./build is the site you made from the template's prompt with my content; ./template is the template's original project.

Compare design only, not content. Ignore differences in names, copy, images and data.

Run both. At 1440px and at 390px, go section by section and report, in a table:
- Type: family, size, weight, line height, letter spacing.
- Colour: every hex value in use.
- Space: padding inside sections and the gap between them, in px.
- Shape: radii, borders, shadows.
- Motion: trigger, duration in seconds, easing, distance.

For each row give the template's value, my build's value and whether they match within 1px or 0.05s.

Don't change anything yet. After the table, list the fixes in order of how visible they are, and wait for me to say which to apply. Check that prefers-reduced-motion behaves the same in both.

Use this when you have built a template from its prompt and also have its project. It asks the tool to find where your build has drifted, without touching your content.

Keep reading

• What an AI template isA definition of AI template for websites and UI, and how it differs from a theme, a UI kit, a starter and a prompt pack.
• How to choose an AI templateChoose an AI template by structure and content fit, not by subject or colour: a method in five steps, with a fit-check request to copy.
• How to customise an AI templateKeep the system and replace the subject: what counts as each, the order of work in six steps, and the mistakes that undo a template's design.

• Websites
• Dashboards
• Free templates