AI guide

Update an existing asset.

Updating is different from generating. The model needs to understand what exists, what specifically changes, and what must stay the same. These prompts are scoped and precise — they don't rebuild from scratch.

Step by step

  1. 1

    Open the asset in context

    Paste or read the existing file into the conversation. For HTML: paste the full markup. For CSS: paste the relevant rule block. For a presentation slide: describe the current layout.

    Start with the Sweden context block, then the existing code: 

    I'm working with the Metanoia design system (Sweden).
Token reference: brand/tokens/output/web/

Here is the current component:
[paste existing code here]
  2. 2

    Identify exactly what changes

    Be precise. "Update the headline" is vague. "Change the headline font-weight from 700 to 500 and the font-size from --fs-32 to --fs-28" is actionable.

    The more constraints you name — what must stay the same — the less the model over-reaches and rewrites unrelated parts.

  3. 3

    Scope the change explicitly

    Use phrases like:

    • "Only modify the hero section — leave everything else unchanged."
    • "Change the color only — do not adjust spacing or typography."
    • "Update the layout only — no copy changes."
  4. 4

    Verify the diff

    Ask the model to show you a diff or explain what changed. Confirm no tokens were replaced with hardcoded values and no unrelated sections were modified. 

    Show me only the lines that changed, in diff format.
Confirm all colors and sizes still use CSS custom properties.

Worked examples

Update a headline
Situation

The headline reads "Transforming the future of work" at 32px bold.

Goal

Change the headline to "Clarity through structure." Use --fs-36 and --fw-bold.

The current headline reads "Transforming the future of work".
Change it to: "Clarity through structure."

Typography: --fs-36, --fw-bold, letter-spacing: --ls-tight
Color: --fg-1 (or --color-navy-900 on light backgrounds)
No exclamation marks. No gradient text.
Swap a color
Situation

A section uses a hardcoded #1A4F78 background — not a Sweden token.

Goal

Replace with the correct semantic token --btn-primary-bg (which resolves to --color-navy-700).

This component uses hardcoded color #1A4F78 for the section background.

Replace it with the correct Sweden token:
- Section background: --btn-primary-bg (resolves to --color-navy-700)
- Text on that background: --btn-primary-text (white)
- Hover state: --btn-primary-bg-hover

Use CSS custom properties — no hardcoded hex values.
Resize a layout
Situation

A feature grid uses 4 columns. It breaks below 900px.

Goal

Make it responsive: 4 cols above 1024px, 2 cols above 600px, 1 col below.

The feature grid currently uses 4 columns at all screen widths.

Update the layout to be responsive:
- >= 1024px: 4 columns, --space-6 gap
- >= 600px: 2 columns, --space-5 gap
- < 600px: 1 column, --space-4 gap

Use CSS Grid with media queries. All spacing via --space-* tokens.
Don't change any colors or typography — layout only.

What not to do

Don't say "make it look better"

Subjective prompts produce inconsistent output. The model will guess at what "better" means and often introduce tokens or patterns that don't exist in Sweden. Describe the specific visual property to change.

Don't ask for a full redesign when you want a tweak

"Redesign this section" gives the model permission to rebuild from scratch. Use "Update only the [x]" — it scopes the operation and preserves everything else.

Don't skip the context block on updates

Even when updating existing token-correct code, the context block prevents regression. Without it, the model may "helpfully" replace var(--fg-1) with #111827 to make the value more "readable".