Una Built · Website field notes

Make it feel
like your brand.

Your website does not need more gradients and rounded cards. It needs a point of view.

Here are the six directions we used to move Una Labs from a familiar SaaS look to a premium editorial experience—including the moving product marks in the hero.

Copy the short prompt ↓

Tell AI these
six things.

Use editorial art direction, not a generic SaaS layer.
Control the grid. Build with disciplined asymmetry instead of centring every section.
Leave breathing room. Use generous negative space and deliberately low content density.
Make type do the work. Pair a refined display face with restrained body typography.
Design bespoke components. Avoid default cards, pills, glass effects, and heavy gradients.
Move with purpose. Use restrained micro-interactions and cinematic motion with considered easing.

Bonus: For Una Labs, we used the real marks from our products as a moving hero sequence. If your hero needs original artwork, create the desktop and mobile visuals first, then ask the coding model to integrate the approved assets.

Then tell it to preserve your real logo, assets, links, checkout, and every working part of the site. Premium is not premium if the pretty new button leads nowhere.

One prompt. Nothing to fill in.

Copy it into your
website project.

The complete prompt

Short enough to use.

Open your website project in your coding assistant, paste this prompt, and let it review what is already there before it starts changing things.

Review the website in this project and transform it into a premium editorial experience.

1. Use editorial art direction, not a generic SaaS layer.
2. Build on a disciplined editorial grid with controlled asymmetry. Do not centre everything in identical sections.
3. Use generous negative spacing and deliberately low content density. Give important ideas room to breathe.
4. Create a high-contrast typographic hierarchy with a refined display typeface and restrained body typography.
5. Create bespoke component treatments and avoid default cards, pills, glassmorphism, and gradient-heavy decoration.
6. Use restrained micro-interactions and cinematic motion with purposeful easing. Motion must support the story and respect reduced-motion settings.

If the brand has several real products, consider an elegant hero sequence that moves their authentic logos or artwork through the scene. Do not redraw or replace those assets. If the hero needs a cinematic visual, create and approve the artwork first, prepare 16:9 desktop and 9:16 mobile versions, then integrate those final assets instead of inventing the visual in code.

Keep the real logo, brand colours, product artwork, content, routes, links, forms, sign-in, checkout, analytics, and SEO working. Inspect the existing site first, then implement the refresh. Test desktop and mobile, run the production build, and verify the important user journeys before reporting what changed.

Tell AI these
six things.

Use editorial art direction, not a generic SaaS layer.
Control the grid. Build with disciplined asymmetry instead of centring every section.
Leave breathing room. Use generous negative space and deliberately low content density.
Make type do the work. Pair a refined display face with restrained body typography.
Design bespoke components. Avoid default cards, pills, glass effects, and heavy gradients.
Move with purpose. Use restrained micro-interactions and cinematic motion with considered easing.

Then tell it to preserve your real logo, assets, links, checkout, and every working part of the site. Premium is not premium if the pretty new button leads nowhere.

Copy it into your
website project.

The complete prompt

Short enough to use.

Open your website project in your coding assistant, paste this prompt, and let it review what is already there before it starts changing things.

Review the website in this project and transform it into a premium editorial experience.

1. Use editorial art direction, not a generic SaaS layer.
2. Build on a disciplined editorial grid with controlled asymmetry. Do not centre everything in identical sections.
3. Use generous negative spacing and deliberately low content density. Give important ideas room to breathe.
4. Create a high-contrast typographic hierarchy with a refined display typeface and restrained body typography.
5. Create bespoke component treatments and avoid default cards, pills, glassmorphism, and gradient-heavy decoration.
6. Use restrained micro-interactions and cinematic motion with purposeful easing. Motion must support the story and respect reduced-motion settings.

If the brand has several real products, consider an elegant hero sequence that moves their authentic logos or artwork through the scene. Do not redraw or replace those assets. If the hero needs a cinematic visual, create and approve the artwork first, prepare 16:9 desktop and 9:16 mobile versions, then integrate those final assets instead of inventing the visual in code.

Keep the real logo, brand colours, product artwork, content, routes, links, forms, sign-in, checkout, analytics, and SEO working. Inspect the existing site first, then implement the refresh. Test desktop and mobile, run the production build, and verify the important user journeys before reporting what changed.

Tell AI thesesix things.

Copy it into yourwebsite project.

Short enough to use.

Tell AI thesesix things.

Copy it into yourwebsite project.

Short enough to use.

Tell AI these
six things.

Copy it into your
website project.

Tell AI these
six things.

Copy it into your
website project.