Claude Code 設計要求測試 4 次，僅改變參考素材交接方式

Ask Claude for a design and you often get something that looks like a template you've seen before. Writing a longer prompt barely helps.

So I kept the request identical and changed only how I handed over references. The test brand is ONGI Coffee, a small café in Paju, Korea. Tool: Claude Code, October 2026.

The request, same all four times:

Make an Instagram feed image (1080×1350) for the new menu item "Lemonade" at the
neighborhood cafe "ONGI Coffee" as a single HTML file (index.html). Price $5.50.
Mention that it's made with lemon syrup we make by hand in the cafe.

Four levels, first results as-is

LV1 — request only. Clean, but it looks like a template: illustrated lemons, a big yellow circle, green and yellow accents.

LV2 — two references attached. The two images got mixed at random. The background went dark and the lemon art covered the word LEMON.

LV3 — references + a few lines on what to take. The brand tone came through.

LV3+ — a real photo + one fix. Ready to post.

In case it was luck, I ran each level two more times (9 runs). Every result was a little different, but the direction stayed the same: attaching references (LV2) changed less than adding a few lines about them (LV3).

Why references alone mix or get copied

In LV2, Claude read both images as equally important instructions. It didn't know what to take from which image, so it combined everything that stood out — or, on another run, copied the menu's dark card almost as is. Neither was what I wanted: I wanted the menu's tone, not the menu itself.

Human designers do the same. Toss a junior two references with no comment and you get something in between. Claude also needs to hear "just the color from this one, just the type from that one."

The hand-off I paste under every request

Change only what's inside [ ]:

Use these [2] reference images: [ref_menu.png, ref_cover.png]

[Take from the references]
- From [ref_menu]: [the cream paper background, dark brown text]
- The contrast between the [English serif logo] and the [bold sans-serif menu names]
- [Thin horizontal dividers, small English uppercase labels (wide letter-spacing)]
- Accent color in one spot only ([the price or a badge])
- From [ref_cover], take just one thing: [a giant English word that fills the width]

[Don't take]
- Don't copy the layout ([this is a feed image, not a menu])
- [Mockup elements like frames and walls]

[Rules]
- [The lemonade] is the hero. It's the biggest element
- At least 32px between elements, 80px or more margin at the edges
- No overuse of emoji, gradients or shadows

Two to three references with different roles work best — one for overall tone (color, background, mood), one for type, one for layout. More than three blurs things.

Takeaways

• Showing a reference matters less than saying "take only this from it."
• Write take and don't take as separate lists.
• Give each reference one job.
• When something's off, fix one or two things at a time and say "keep everything else as is."

This is Chapter 2 of my Design with Claude — Setup Pack (77 pages of tested runs with real screenshots: style skills, non-Latin type, product pages, banners, Reels). The whole chapter is free:

• Free sample chapter (14 pages): https://heynstudio.gumroad.com/l/mepfys
• Full pack: https://heynstudio.gumroad.com/l/claude-design-pack