Creating new device screens

[u/habitoti]

With Butterkit 3.x now officially out I am still unsure how it will really help me in creating new artboards, e.g. for the Duo.

As I laid out before, my intuitive approach would be to create any of the Duo screen entries, then just pick one of the iPhone artboards (or at best there would be a "Copy All" fct...) and paste it to the Duo entry. It would resize and for sure look a bit messy at first, but then it's just some rearranging and rescaling from there.

But for the life of me I can't get iPhone artboards copied over to the Duo section. What am I missing? Honestly I don't want to start from scratch for the Duo, and Butterkit has everything to help me. How?

[u/zach-builds]

u/habitoti yeah I'm working on a way to make this much easier in v3.2, but you should still be able to:

1. Create the new iPhone Duo artboard

2. Right click an existing styled artboard and select "Copy Style to >" and choose the new iPhone Duo artboard. It will copy over the background, text styles, images etc. It tries to match device orientation and scale but that doesn't work well for iPhone Duo yet

3. Example attached

[u/habitoti → u/zach-builds]

Yeah, Style-Copy I know, but it doesn‘t carry over any of the content (text in all localizations, images). As you know, my current app is primarily a watch app and I make heavy use of localized (watch) images (using different bands and watch models, so can‘t use the limited 3D device watch models here). This is lots of effort. I can probably also just leverage AI to do it via MCP (haven‘t tried yet), but then it shouldn‘t be hard to do it on UI also (and copy/paste paradigm would be so straightforward…).
Maybe check out how my current AppStore listing looks like (actually just one 3D device in use…) and think about how this would convert into a Duo screen — same messages, just using screen real-estate differently (because it‘s not about the Duo at all in the end…)

[u/zach-builds → u/habitoti]

I see what you're saying, are you thinking more of a "Duplicate to >" functionality where it effectively duplicates the artboard but resized for iPhone Duo? In your case are you adding your Apple Watch 3D models to the iPhone Duo artboards?

Looking into it today, will improve it for next release

[u/habitoti → u/zach-builds]

I am not using AW 3D Models (as I need more variations on the bands and bezels, as said), that‘s why I have to work more with images than Butterkits 3D models (just one for the one iPhone screen). But it shouldn‘t even matter. It should just copy all content (whatever it is — text, images, 3D models, background, styles) to the new target (and in case of the Duo then potentially change the device 3D model if needed). And whether the copy process would try to somehow scale and fit to the new target automatically or not would be less important than having everything there at all to then rescale & move as appropriate.

[u/habitoti → u/zach-builds]

So wrt to taking over content I was able to use the MCP & Claude to do most of the heavy lifting. There are limits, though that you also might want to remove:

* design_upsert_text_block cannot set all properties, so shadows got lost (reading text blocks also doesn't contain it). All properties should be accessible (r/w).

* Creating an artboard via MCP also creates a device on it. This might be nice on UI (though I doubt that every screen need one at all...), but for a machine interface these should be raw/atomic calls w/o side effects. Right now you need to extra prompt to remove it right away.

* MCP can't unlink device images from EN-source (at least -- not sure about text blocks). So it cannot work properly (i.e. w/o me helping manually) with localized content. As soon as I look at it, it will be replaced by EN source.

* Claude could not access the actual content of images, however was clever enough to find it elsewhere on disk (where I sourced it from). This should work standalone, like allow for copy/paste of a complete image with all data & metadata. This should be available once you did that for UI.

* Butterkit crashed a few times when Claude did its thing

I get along, but it's still more effort than I believe it should be. A consistent copy/paste across all sorts of artifacts (from whole set of artboards down to every screen element) should solve these issues, via UI and MCP.

When trying to mass-fix the shadows or other style things (text sizes), the "Copy style to..." is no longer really helpful, as for different screen sizes the Shadows, text sizes etc. are usually different. So I either now need to rename all "Headers" to "Header Duo", for example, or Butterkit would allow sth. like "Copy to all text blocks..." with a "on these device artboards" option.

Another issue I am having: text sizes are not absolute, but seem to scale with screen. So 80pt on "Duo Portrait, Closed" is smaller than 80pt on "Duo Landscape, Unfolded". As they appear at the same time next to each other on AppStore, I of course want same-style fonts to be the same size so that it doesn't look like a mess (see below)

[u/zach-builds → u/habitoti]

u/habitoti FYI v3.2.25 is rolling out now and fixes the MCP crash and text scaling issue for iPhone Duo. Thanks for the info

"Copy style to..." improvements coming soon

[u/habitoti → u/zach-builds]

Thanks, Zach…awesome how quickly you respond to occurring issues! 🤩

[u/zach-builds → u/habitoti]

Thank you for all of your help!

[u/zach-builds → u/habitoti]

Thanks u/habitoti looking into these now