You do not need to describe everything to Macaly using words alone. You can also use images, screenshots, logos, sketches, PDF files or existing websites as source material for your project.

Visual material is especially useful when you want to show Macaly what kind of appearance, structure or user interface you are aiming for. It can be used to support both website and web application projects.

1. Add an image to the conversation

You can add an image to the project conversation and explain how you want Macaly to use it.

Use this image as the background image in the top section of the home page.

Use the colour scheme of this image as a visual starting point for the project.

This is a sketch of the application dashboard. Build a view based on it with navigation on the left and the user’s content on the right.

2. Use a screenshot as an example

A screenshot is an easy way to show Macaly the structure, user interface or visual style you want.

You can use things such as navigation, a home page, pricing section, form, dashboard, login view, mobile view or table as a reference.

I like the structure of this user interface. Create a similar sidebar and content area for the project, but use our own colour scheme.

3. Give Macaly your own sketch

The sketch does not need to be polished. You can draw a rough outline of a web page or application interface on paper or with another tool.

A web application sketch can include, for example, navigation, a user profile, search field, table, form, action buttons or statistic cards.

This sketch shows how the application dashboard should be structured. Navigation is on the left, a summary is at the top and a list of the customer’s projects is below. Build a clear responsive

interface based on this.

4. Use images as visual references

You can give Macaly images to show the style, colour scheme or atmosphere you want.

I want the application interface to feel like this image: clear, light and minimal. Do not copy the content of the image directly.

5. Add your logo and other materials

When building a company website or web application, it is useful to give Macaly the correct source materials as early as possible.

  • logo
  • company colours and brand guidelines
  • product and staff images
  • user interface images or icons
  • other material used in the project

Here is our company logo. Use it in the project header and adapt the user interface colour scheme to the logo.

6. Use a PDF file as source material

You can also give Macaly PDF files as source material for the project. A PDF can contain, for example, a company presentation, price list, service descriptions, product brochure, brand guidelines or an application specification.

This document describes the main features of the application. Use it as the basis for the project functionality.

Tell Macaly whether the file should be used as a source for content, structure, functionality or visual design.

7. Use an existing website as a starting point

You can give Macaly the address of an existing website and ask it to use the site as a starting point or reference for the project.

Here is our current website: company.fi. Create a more modern version of it. Keep the most important pages and content, but update the visual design.

Use this online service as a visual reference. I particularly like its navigation and card-based interface. Do not copy its content or branding.

8. Combine visual material with a written instruction

You will usually get the best result when you also explain in words what Macaly should pay attention to in the material.

Use the user interface structure in this image as a starting point. I like the navigation on the left and the statistic cards at the top. Do not use the colour scheme from the image; keep our current brand colours.

9. Select the part you want to edit with Edit design

Once the project already contains content, you can use Edit design to select a specific element. Select text, an image, a button or another user interface element and edit it directly or give an AI instruction targeted to that element.

Good to remember

Always explain why you are giving the material to Macaly. For example, specify whether it should be used as a visual reference, content source, user interface structure or functional specification.