Category: News

GPT-6.1 Sol built our 3 Opus 5.5 briefs for $1.88. Here are the live demos, the prompts and what else OpenAI’s DevDay gave designers.

This is a long one. Every point in the TL;DR links to its section, so skip to the part you came for.

TL;DR

A developer keynote has a script. A model gets cheaper. A model gets faster. A live demo misbehaves and somebody types instead.

OpenAI’s DevDay hit all three in about 50 minutes, and opened with a plush blob in a beret.

It is called a dot. It is an AI agent with its own computer that keeps working after you close your laptop, and OpenAI drew it as a soft toy. TechCrunch’s headline settled on “bubbly agentic avatar”.

Four plush characters under a glowing dots wordmark: a blue one in a beret, a green frog, a yellow one in round glasses and a pink heart in sunglasses
The four dots from OpenAI’s launch art. Each stands for an agent with its own cloud computer. Image: OpenAI

Most of the day was not for us. OpenAI counted more than 20 launches, and its post about the new model never uses the words design, interface or visual.

Six of them matter anyway. One is that model, GPT-6.1 Sol, which costs half of what Opus 5.5 does. Last week we wrote three briefs to find out what Opus 5.5 could design, and published what came back. We still had the briefs.

So we ran them again. Below is what Sol built, live, next to the Opus versions, with the time and the bill.

After that comes the rest of DevDay, starting with my favourite launch. It’s a sign-in button. Stay with me.

Sixty seconds of vocabulary

  • GPT-6.1 Sol. OpenAI’s new mid-priced model. GPT-6 is the generation. Astra is the flagship, Sol sits under it, Luna is the small fast one.
  • Opus 5.5. Anthropic’s model from last week’s piece. The one we measure Sol against here.
  • ChatGPT Work. The part of ChatGPT that does tasks instead of chatting: documents, decks, sites. Sol lives there. It is not in the regular chat yet.
  • Codex. OpenAI’s coding agent, its answer to Claude Code. It now sits inside the ChatGPT desktop app.
  • Sites. ChatGPT’s own hosting. It builds a web page and gives you a link.
  • Dot. An agent that keeps running on its own computer in the cloud and messages you when it needs a decision.
  • Plugin. A connector between ChatGPT and another app, like Figma. A plugin extension lets that app show its own interface inside ChatGPT.
  • Tokens. The unit AI is billed in. Everything the model reads and writes costs tokens.
  • Effort. How long the model thinks before it answers. Sol defaults to medium. We ran it on high.
  • GSAP and Lenis. Two free libraries our briefs ask for by name. One animates, the other smooths scrolling.

That is the whole glossary.

🤖 The model: GPT-6.1 Sol

Released 29 September 2026 · $2 in, $10 out per million tokens · ChatGPT Work and Codex, Plus plan and up · API name gpt-6.1-sol

OpenAI’s pitch fits in a heading: “Near-Astra intelligence for a fifth of the price”. Astra is the flagship, at $10 and $50. Sol is what the Plus plan gets.

Opus 5.5 costs $4 and $20, so Sol is half that. It is also exactly what Anthropic charges for Sonnet 5.5, the cheaper tier we told you to watch last week. That one shipped the day before DevDay. We have not run these briefs on it.

A cheaper model only matters once it is good enough that you stop rationing attempts.

The launch post will not tell you whether it is. It is charts about code, PDFs, business workflows and science. As with Opus last week, the evidence has to come from building things.

One tester got there before us. Ramanpal Singh at PromptsLove built five apps and gave his only perfect score to a watch page with a 3D model that comes apart as you scroll.

On motion he was blunt: “It struggled when I asked for cinematic motion design.” Our second brief is a title sequence. Good.

🧪 Same three briefs, different model

Each brief went to Sol once, word for word. It got the setup Opus had: the same design guidance file, a real browser it could drive and take screenshots with, and the standing instruction to check its work there and fix what it saw, at least twice. We told it the page would be embedded here, about 720 pixels wide.

The guidance file is Anthropic’s frontend-design skill. Yes, we handed OpenAI’s model its rival’s house rules. It is a text file. It worked.

Opus ran inside Claude Code. Sol ran through OpenAI’s API, the pay-per-use route developers use, in a small rig we wrote to give it the same abilities: read a file, write one, edit it, and use the browser. We set effort to high.

No references, no notes from us, one attempt each, and no person touched the files afterwards. One of our own tools hung during the title-sequence run. We fixed the tool, replayed that single check and left the stalled minutes out of its time.

🎨 A website: sea salt, and a hero made of water

The client every studio turns down, again. Two people, a great story, no budget.

Build a one-page website for Lenn, a two-person sea salt
harvest on the salt marshes of Guérande, in Brittany.
Visitors are chefs and food lovers who might order a tin
or come and visit.

Mood: quiet, tidal, tactile. Grey Atlantic light, not
beach kitsch. Pick distinctive type, one or two families.

The one memorable thing: the hero is water. A real-time
WebGL water surface fills the screen and ripples where the
cursor moves, with the Lenn wordmark under the surface,
refracting. As you scroll, the tide drains away and salt
crystals appear on the clay.

After that: how the salt is raked by hand (a short
scroll-driven story in three moments), the three salts and
what to cook with each, visiting the marsh, and ordering.

Motion: one orchestrated page load, then scroll-linked
scenes with GSAP ScrollTrigger and Lenis. No fade-up on
every section. Respect prefers-reduced-motion. It must work
on a phone. Quality bar: a site we would feature on Muzli
Picks. Single HTML file, libraries from a CDN.

GPT-6.1 Sol · 17 minutes · 3 fix passes · 51 KB · $0.98

Live demo. Move your cursor over the water, then scroll inside the frame. It holds on to your scroll wheel, so move the cursor out of the frame to keep reading. Open full screen, or open the Opus 5.5 version of the same brief. Built by GPT-6.1 Sol from the prompt above.
Two versions of the Lenn website side by side. On the left, by Claude Opus 5.5, a pale wordmark carved into dark grey clay under water, with a tide gauge. On the right, by GPT-6.1 Sol, a dark green wordmark under pale sea-green water. Below each, the same hero after scrolling, drained and scattered with salt
Same brief, two models. Top row, the hero under water. Bottom row, after you scroll. Image: Muzli, built with Claude Opus 5.5 and GPT-6.1 Sol

It did everything on the list. The hero is live water, drawn on the graphics card, with the wordmark lying under it. Move the cursor and the letters bend.

Scroll and a tide line travels down the screen. Above it the wordmark dries pale on grey clay while salt gathers in clusters.

Below the hero there is a pinned harvest story in three steps, drawn as the pans seen from above. Then three tins drawn in code and a map of the marsh. The type is DM Serif Display and Karla.

Nobody asked for the next part. The order form adds up and saves a summary, and a small planner lets you pick a month for a visit. Sol’s extras are practical ones.

Its notes show it read the same warnings Opus read. Before building, it wrote: “I’m avoiding the usual cream-and-terracotta craft-food look and photographic placeholders.” On the second pass it wanted the salt to “gather in natural clusters rather than read as scattered confetti”.

On its first look, the water was a black rectangle. A shader, the small program that draws the water, had failed to compile. Sol read the browser’s error log, fixed it and moved on. That loop is the reason any of this works.

Now put it next to the Opus version. Opus carved the wordmark into the clay, added a tide gauge that falls from 4.8 cm to zero, and wrote the harvest in the marsh’s own vocabulary. It took 81 minutes. Sol took 17 and made the site a client signs off. Opus made the one you screenshot.

One real flaw, and you may have just met it. Inside a frame like the one above, Sol’s page keeps your scroll wheel even when it has nothing left to scroll, so the article around it stops moving.

Opus hit the same trap last week, noted that “a blog reader could get stuck”, and handed the wheel back to the page. Sol checked that its page scrolls inside a frame. It did not check what happens at the end.

What it tells you: at 17 minutes and under a dollar, you stop asking for one site. You ask for three directions and pick.

🎬 Motion: a title sequence you can scrub

This is the brief I expected it to fumble.

Make a 12-second looping title sequence for a fictional
design festival called Offset, as a web page.

Think opening titles, not a website: kinetic type on a
strict grid. Letters slide in along the grid, the grid
itself rotates and stretches, colours swap in hard cuts on
the beat, and it resolves into the Offset lockup with the
dates (14-16 May, Vilnius) before looping cleanly.

Build it on one GSAP timeline. Add a small After Effects
style transport bar at the bottom: play/pause, a scrubber I
can drag, the current time, and 0.25x / 1x speed. Easing
should feel designed, so name the curves you use in a code
comment. Single HTML file. No stock fade-ins.

GPT-6.1 Sol · 8 minutes · 2 fix passes · 16 KB · $0.36

Live demo. Press play, drag the scrubber, switch to 0.25x. Open full screen, or open the Opus 5.5 version of the same brief. Built by GPT-6.1 Sol from the prompt above.
Two rows of four frames. Top, by Claude Opus 5.5: the word Offset on paper, magenta and black, reading SETOFF in one frame, then a stacked OFF SET lockup. Bottom, by GPT-6.1 Sol: Offset in white on ultramarine, tilted on orange, split into two rows, then a blue lockup on paper with 14-16 May and Vilnius
Four moments from each loop. Image: Muzli, built with Claude Opus 5.5 and GPT-6.1 Sol

It did not fumble. Twelve seconds on one GSAP timeline, and a last frame that matches the first. Barlow Condensed in ultramarine, paper, ink and orange.

The letters ride in on six columns. The whole grid swings through a quarter turn, the word blows up past the edges of the frame, splits into two rows and lands on the lockup with the dates. The colours change in hard cuts.

It named its curves, as asked:

register  (.16, 1, .30, 1)   a fast rail move, precisely
                             arrested.
torque    (.76, 0, .24, 1)   heavy symmetric acceleration
                             for grid pivots.
shunt     (.83, 0, .17, 1)   a short hold, then a decisive
                             regrouping.

Here is the strange part. Last week Opus named its curves rail, shunt and crank. Two models from two companies read one sentence about letters sliding along a grid, and both thought of a railway yard. Both called a curve “shunt”. The word is not in the brief or in the guidance file, and neither model saw the other’s work.

They also both read the festival’s name as a printing term. Sol planned “a moving print-registration system” and put crop marks in the corners. Opus went the whole way: four ink plates, a print run, and the word reeling round until it read SETOFF, which in printing is another word for offset.

That is the gap in one example. Sol used the idea as trim. Opus built the whole sequence out of it.

One requirement slipped. The brief wanted cuts “on the beat”. Sol’s cuts land at 2, 3, 4.5, 6, 7.65 and 11.5 seconds, which is nobody’s idea of a beat. Opus set a tempo of 120 BPM and cut on it.

What it tells you: bring the concept and Sol executes it in eight minutes. If you want the concept supplied, that is still the slower, more expensive model.

👆 Interaction: a player you can catch mid-spring

A Figma prototype shows where a screen ends up. It cannot show how it feels to throw it there.

Prototype the mini player to full player transition of a
music app, in a phone frame, as a web page I can use with
a mouse or a finger.

The mini player sits above a tab bar. Drag it up and the
album art grows out of it into the full player, following
my finger 1:1, then settles with a spring. Fling it down to
dismiss; the release speed decides whether it closes. In
the full player: a waveform I can scrub, a like button with
a small burst, and a queue I can reorder by dragging.

Everything must be interruptible: grab it mid-animation and
it stops where it is. Add a "slow motion" switch that runs
all motion at 10% speed so I can review the curves.
Draw the album art in code. Single HTML file.

GPT-6.1 Sol · 11 minutes · 3 fix passes · 38 KB · $0.53

Live demo. Drag the mini player up, fling it down, grab it halfway. Turn on slow motion. On a phone it fills the screen. Open full screen, or open the Opus 5.5 version of the same brief. Built by GPT-6.1 Sol from the prompt above.
Six phone screens in two rows. Top, by Claude Opus 5.5: a library of risograph-style album covers, the cover growing mid-drag on a deep blue sheet, and the full player. Bottom, by GPT-6.1 Sol: a pale blue home screen, a small cover mid-drag, and a full player with a waveform and an Up next queue
Home, mid-drag and full player, from each model. Image: Muzli, built with Claude Opus 5.5 and GPT-6.1 Sol

Sol invented an app called vellune and one album, drew the cover in code, and built the whole transition around that one piece of art travelling from the mini bar to the full player.

The requirements hold. The sheet follows the pointer one to one, and Sol measured it: “a 33 px pointer move produced 33 px of sheet movement”. Let go and a spring takes over, written by hand with no library, at stiffness 230 and damping 25.

Fling down fast and it closes. Drag the same distance slowly and it springs back open. We tried both. The waveform scrubs, the heart throws a small burst, the queue reorders, and the slow-motion switch runs everything at a tenth of the speed. Grab the player mid-flight and it stops where it is.

It found its own bugs in the screenshots: a play button in the wrong place, the mini player covering the tab bar, a title colliding with the cover halfway through a drag.

It missed one. A press that does not move counts as a tap, and a tap toggles the player. So touching the album art in the open player closes it. The Opus version stays open.

A person finds that in ten seconds. A screenshot never will.

Against the Opus version, the difference is appetite again. Opus drew six albums as two-colour risograph prints and let the player take its colours from the cover. Sol drew one album cover, two simple playlist tiles and a clean pale-blue interface that could belong to any streaming app. Both would do their job in a design review. Only one gives the room something to talk about afterwards.

What it tells you: “does this gesture feel right” now costs 53 cents and eleven minutes to answer.

⚖️ What three runs add up to

Three briefs is a small test. One attempt each, in a rig we built, outside OpenAI’s own apps. Trust the pattern more than the decimals.

  • Speed changes the method. Sol needed about 35 minutes for all three. Opus needed about 205. When a build takes 80 minutes, you write one brief and wait. When it takes ten, you run three directions before lunch and give notes on the one that deserves them.
  • It builds the drawing. Sol is the builder who delivers exactly what is on the plan, plus a sensible extra socket. Opus is the one who phones at nine to say he had an idea about the staircase. Which one you want depends on the week.
  • It checks what it thinks of checking. Both models look at screenshots and fix what they see. Neither can feel a spring. Sol let two things through that Opus did not: the scroll trap and the tap that closes the player.
  • Good guidance travels. Anthropic wrote the skill file for Claude. Sol read it and avoided the same clichés by name. What you learned about briefing last week still applies.
  • Price is no longer a reason to skip the test. $1.88 bought three working builds, each about half the file size of its Opus twin. We can’t give you the same bill for Opus, because it ran on a Claude Code subscription and no invoice exists. On list price it costs twice as much per token, and it worked about six times as long.

All six builds are live, in pairs, further down.

🗓️ The rest of DevDay, sorted for designers

OpenAI’s recap runs to 25 entries. Besides the model, five are worth your time.

The first is the one I’m most excited about, and the one you can do least with this week. The other four follow in the order I would open them.

🔑 Sign in with ChatGPT: the one I’m most excited about

Sign-in: everyone · spending your plan in other apps: Plus and Pro · 16 launch partners, including Notion, Vercel and Devin · other apps: a waitlist

An app with an AI feature pays the AI company for every request you make. So it eats the cost, asks you to paste in a developer key, or sells you its own credits on top of its subscription. Grant Harvey at The Neuron called these the “three ugly choices”.

Sign in with ChatGPT adds a fourth. The button itself has been on a few partner sites since July.

What DevDay added is the second step. After signing in, you can let the app spend from your ChatGPT plan. The consent screen has one toggle, labelled “Use your ChatGPT plan”.

It is bring-your-own-bottle for AI. The app provides the table, you bring the tokens, and the house may still charge corkage. OpenAI’s help page says the same in plainer words: the app “may charge separately for its subscription, infrastructure, services, or premium features”.

A consent dialog titled Connect ChatGPT and Devin, with one toggle labelled Use your ChatGPT plan, a Continue button and a Cancel link
One toggle decides whether an app may spend from your ChatGPT plan. Image: OpenAI

You decide how much each app may pour. In ChatGPT’s settings you give it a weekly share of your plan, from 10% to all of it. Sharing your plan does not show the app your chats.

For now the partners are mostly developer tools. Notion is on the list, Lovable is coming, and Canva takes only the sign-in.

My excitement is partly selfish. At Muzli we use a few AI design tools in-house that we have never shipped to you.

This button would let them run on your plan instead of our bill, inside a limit you set. I’m adding it to Muzli as soon as OpenAI lets us in.

That is the catch. Plan sharing is open to open-source tools and a few selected companies. Every other app, Muzli included, joins a waitlist.

And for now a plan cannot pay for image generation, which design tools will notice.

I also hope it doesn’t stay an OpenAI feature. Every’s DevDay review called OpenAI “the first major lab to take this step”. Anthropic’s help page still tells anyone building a product for others to “use API key authentication”.

I want this button from every AI company, so you pay once for the model you like and take it into every tool you open.

What it unlocks: AI features your company does not pay the model bill for, and fewer AI subscriptions for everyone using them. The screens it needs are below.

🌐 Sites: ChatGPT hosts what it builds

Public beta · Plus, Pro, Business, Enterprise and Edu · a chatgpt.site address or your own domain

You have a prototype in a chat window. Getting it to a link you can send a client still means a hosting account and a favour from a developer.

Sites removes that step. Ask ChatGPT for a website, or type @Sites. It builds, shows you a private preview, and publishes when you say so.

You pick who can open it: selected people, your workspace, or everyone. You can point your own domain at it.

It is not new. At the DevDay session, Simon Willison noted that it “launched earlier this year and is already hosting 8m sites”. What DevDay added is the layer around it: scheduled tasks that keep a Site current, Sites that read each visitor’s own connected apps on business plans, and shareable profiles.

A profile is a page at chatgpt.com/u/your-name that shows up to 12 of your Sites. OpenAI’s mock-up also shows an activity grid and a count of lifetime tokens, which makes it the first portfolio I have seen that reports how hard you worked the machine. The catch is that people have to be signed in to ChatGPT to see it.

A mock-up of a ChatGPT profile page for a user called Bailey, with an activity grid, counters for lifetime tokens and streaks, a list of top plugins and a showcase of three Sites
OpenAI’s mock-up of a shareable profile: activity, token counts and a showcase of Sites. Image: OpenAI

OpenAI also publishes a showcase of Sites with the full prompts that built them. What those prompts teach is further down.

We did not publish through Sites for this piece. Our demos sit on our own server, so this section comes from OpenAI’s documentation. We have not used it ourselves.

What it unlocks: a brief becomes a link in one sitting, on the $20 Plus plan, which is €23 here in the EU. A pitch microsite. A case study with a working prototype in it. A client review that needs no deploy.

🧩 Plugin extensions: your tools move into the chat window

All plans, per OpenAI · on the web, "coming soon" for Free and Go · Figma mentions need the desktop app

Until now an app inside ChatGPT was a connector. The chat could fetch things from Figma, and that was all. An extension gives the app its own interface in three places: an entry in the sidebar that opens it full screen, a panel beside the conversation, and a viewer that opens when you click a file the app owns.

OpenAI’s three launch examples are all design tools:

  • Canva builds and previews designs in a sidebar tab.
  • Figma lets you search for your files and mention them from the message box.
  • Adobe opens files for editing “with Acrobat and Photoshop directly in ChatGPT”.
The ChatGPT desktop app with Canva open as a full-screen sidebar app, showing the heading What will you design today and cards for presentations and Instagram posts
Canva running as a sidebar app inside ChatGPT. Image: OpenAI

Think of a brand’s corner inside a department store. You get the footfall. They own the floor plan.

What it unlocks: for you as a user, fewer trips between a chat and a canvas. For you as a designer of products, a new place to design for, with someone else’s rules. If your company ships a plugin, somebody has to design the version of your product that lives in a narrow panel beside a conversation.

🫧 Dots: the mascot and the agent

Rolling out now · Pro and Business Premium · on Pro, not in the European Economic Area, Switzerland or the UK · runs on GPT-6 Astra

A dot is one never-ending conversation with an agent that has its own computer in the cloud. You give it a goal. It keeps going while your laptop is shut and messages you, in ChatGPT, Slack or Teams, when it needs a decision.

Think of a colleague who never closes the laptop and has read all your email. That is the promise, and also the worry.

OpenAI’s own example for our trade: “A new design arrives, and dots turn it into a working app while the team focuses on customer feedback.” Look closely at the launch screenshot and the desktop of the dot’s computer holds Blender, GIMP, Inkscape and Kdenlive.

The ChatGPT app showing a dot called Alfred and its own computer: a browser window on a yellow desktop with icons for Blender, GIMP, Inkscape, Kdenlive and other apps
A dot’s own computer, from OpenAI’s launch post. Blender, GIMP and Inkscape are on its desktop. Image: OpenAI

Now the small print. Dots need a Pro plan, which starts at $100 a month, or Business Premium. On Pro, OpenAI does not offer them in the European Economic Area, Switzerland or the UK. If you are a designer in Europe on a personal plan, a dot is a screenshot for now.

And the one long hands-on review says wait. Dan Shipper at Every tested a dot for days. It “has become the main way I use ChatGPT”, he wrote, and it was “too buggy for me to recommend now”. His advice is to give it a week or two.

The design story is the blob itself. Meta’s Muse did it, Grok Bots did it, and now dots. The always-on agent keeps arriving as a soft toy.

TechCrunch called it “the latest example of a company attempting to make AI more relatable”. I would put it less kindly. The more access a product asks for, the softer its mascot gets.

What it unlocks: handing over the watching. The feedback channel. The launch whose scope keeps moving. Just not this month, and not in Europe.

📄 Space, Pages and slides

Space and Pages: Pro, Business and Enterprise · slides: "in the coming weeks"

Space is where ChatGPT now keeps your files, shared with your team and its agents. A Page is a document that people and AI edit together. OpenAI’s list of uses includes turning “a teammate’s design into engineering tasks”.

The part for us is slides. OpenAI says you will “create interactive slides with ChatGPT and your team, from a conversation or your own template”, then present them in ChatGPT or “export to PowerPoint or Google Slides with formatting intact”.

What it unlocks: read “your own template” twice. When an agent builds the deck, the template is the only thing holding the brand in place. Name the layouts and lock the colours.

Last week Every watched Opus 5.5 turn its green into purple in a deck built from its own template. Nobody has shown this one doing better yet, so try it on a deck that does not matter.

The rest is plumbing and pricing. Ultrafast makes Astra write up to eight times faster for people on the new $500 plan. Codex runs in the cloud and takes orders by voice.

If none of that raised your pulse, you read it correctly.

What the room made of it

  • Read it as one move. Grant Harvey at The Neuron: “OpenAI spent DevDay assembling the pieces of an operating layer for AI agents.”
  • Impressive, and tiring. Dan Shipper closed Every’s review with: “I’d be even more excited if the next time I opened ChatGPT, there was less for me to figure out.”
  • Some of it was overdue. Simon Willison live-blogged from the room, failed demos included. On Sites getting sharing controls: “(I admit I thought they had that feature already.)” On signing in with ChatGPT: “I’ve wanted this one for years!” Sam Altman said as much in the closing session: “we should have done it a long time ago”.
  • The safety argument has not gone away. Axios noted that OpenAI said the same week it would hold back its newest flagship, GPT-6.1 Astra, over security concerns.

🧭 What changes in your work

  • Design the lending moment. If your product has AI features, someone will ask for “Sign in with ChatGPT”. OpenAI’s guidelines already sketch the screens: a ChatGPT button as prominent as your other sign-in options, a one-time “You’re using your ChatGPT plan” note, a “Using ChatGPT plan” label by the message box, and a “Usage limit reached” state whose main button opens ChatGPT’s settings, with your own credits second. Your pricing page has to say which of your plans include it. All of it still needs your product’s voice.
  • Design the side-panel version. A plugin extension is your product in a panel beside a chat. Decide which three tasks deserve that panel. Everything else stays a link.
  • Make screens an agent can read. Dots operate software by looking at it, the way our rig’s browser did. Icon-only buttons, hover-only actions and unlabelled states were always bad for people. Now they also stall your customer’s assistant.
  • Test what screenshots can’t see. Our two bugs were a scroll that would not let go and a tap in the wrong place. Both are invisible in a still image. Put your hands on every build before it leaves the room.

Try it this week

🛠️ If you do not write code: the fifteen-minute tour

  • Open the six demos in pairs, full screen. Scroll both salt sites. Scrub both title sequences at 0.25x. Fling both players shut. Decide which one you would have signed off, and notice why.
  • Open Frame Studio or Type Field in OpenAI’s showcase. Press “Try it live”, then read the prompt under “Build process”. Count the lines that forbid something.
  • If you have the Plus plan, open ChatGPT, switch to Work, pick GPT-6.1 Sol and paste a brief with the word “website” in it. Look at the private preview before you publish anything.

🛠️ If you build with AI tools

OpenAI’s own showcase prompts forbid different things than ours do. Ours ban looks: no fade-up on every section, no beach kitsch. Theirs ban fakes.

The Type Field prompt says: “Do not claim to have designed an existing font, fabricate unsupported variable axes, or simulate width by merely stretching every glyph.” Frame Studio wants real animation, “not stock footage or a screenshot pretending to play”. A good brief needs both lists.

So last week’s template grows two lines. We have not run this one through Sites ourselves:

Build a website for [who]. @Sites
Visitors are [audience] who want to [job].

Mood: [three words]. Not [the cliché you fear].
Type: [families, or "pick distinctive type"].

The one memorable thing: [the moment people will
screenshot]. Everything else stays quiet.

Sections: [in order].

Motion: [the one orchestrated moment]. Respect
prefers-reduced-motion. Works on a phone.

Do not use: [the looks you are tired of].
Do not fake: logos, awards, reviews, or a form that
pretends to send.

Save a version and show me the preview. Do not
deploy until I say so.

That last line matters. OpenAI’s docs warn: “Every Sites deployment URL is a production deployment.”

A build is cheap now, so ask for directions first:

Before building, give me three directions for this
brief: three palettes, three type pairings and three
versions of the one memorable thing. One short
paragraph each. I will pick one, then you build.

After the first build, send the follow-up aimed at the two bugs our screenshots missed:

Now use it like a visitor, not a camera. Scroll to the
very end and keep scrolling. Tap every element once
without dragging. Open it inside an iframe on a longer
page. Tell me what surprised you, then fix it.

🛠️ If you write code

The model name is gpt-6.1-sol. A first call looks like this:

import OpenAI from "openai";
const client = new OpenAI();

const response = await client.responses.create({
  model: "gpt-6.1-sol",
  reasoning: { effort: "high" },
  input: "Your brief goes here.",
});
console.log(response.output_text);

In Codex it is one flag: codex -m gpt-6.1-sol.

One call writes a page. What made ours work was the loop around it. The model gets a browser tool, loads its own page, looks at the screenshot, reads the error log and edits the file. Our rig is about 700 lines of Python on top of Playwright.

If you give the model tools, use the Responses API. OpenAI’s docs say Chat Completions does not support function calling for this model.

If you already have a project, OpenAI’s docs supply the prompt:

Deploy this project with Sites. Check whether it is
compatible, make any required changes, and give me
the deployment URL.

🆚 Opus 5.5 and GPT-6.1 Sol, side by side

Here are all six, in pairs. My verdict: the Opus versions are more creative and more refined. Sol’s are faster and far cheaper, and every requirement but one works.

🎨 Lenn, the sea salt website

  • Opus 5.5, live. 81 minutes, 4 fix passes, 97 KB. A wordmark carved into the clay, a tide gauge that drains from 4.8 cm to zero, and copy in the marsh’s own words. The water is the grey the brief asked for, and the page hands your scroll wheel back when it ends.
  • GPT-6.1 Sol, live. 17 minutes, 3 fix passes, 51 KB, $0.98. A flat wordmark under sea-green water, plus practical extras: an order form that adds up and a visit planner. It keeps your scroll wheel inside the frame.

🎬 Offset, the title sequence

  • Opus 5.5, live. 50 minutes, 3 fix passes, 31 KB. Four ink plates, the word turning into SETOFF, and a lockup with the dates tucked between OFF and SET. It cuts on a 120 BPM beat, and the transport bar shows timecode to the frame, with its sections named like markers in After Effects.
  • GPT-6.1 Sol, live. 8 minutes, 2 fix passes, 16 KB, $0.36. A grid that swings a quarter turn and a word that splits into two rows. The cuts miss the beat, and the transport bar is a plain scrubber.

👆 The music player

  • Opus 5.5, live. 74 minutes, 2 fix passes, 66 KB. Six albums drawn as two-colour risograph prints, and a player that takes its colour from the cover as it grows. Tap the art and the player stays open.
  • GPT-6.1 Sol, live. 11 minutes, 3 fix passes, 38 KB, $0.53. One album cover, two simple playlist tiles and a clean pale-blue app, with a measured one-to-one drag and a hand-written spring. On the home screen the artwork cuts through the headline, and a tap on the art closes the player.

All three took Opus about 205 minutes. Sol needed about 35, for $1.88.

So split the work. Ask Sol for the quick directions, then give the one worth keeping to Opus for the version with your name on it.

Worth bookmarking

🤖 The model

🔑 Sign in with ChatGPT

🌐 Publish

🧩 Inside ChatGPT

🫧 Agents

🧰 Carried over from last week

🏆 Get picked

The landing

Here is my verdict. DevDay’s gift to designers was not the blob. It was a second model that can build a real brief, at a price where trying costs next to nothing.

Last week each build took Opus between 50 and 81 minutes. This week all three cost $1.88 and were done before the coffee went cold. The idea stays your job.

The thing I’m watching is who pays. Sol made a build cheap. Sign in with ChatGPT moves the cost onto a plan the user already pays for, inside a limit they set.

If every AI company copies it, any small team can ship AI features without a token bill hanging over it.

So do the cheap thing. Take one brief and ask for three directions. Build the one you would defend in a review, then use it like a visitor: scroll past the end, tap what should not be tapped. Fix what you find and nominate it.

When a build costs 36 cents, the brief is the only expensive thing left.

Sources: OpenAI, DevDay 2026 recap, Introducing GPT-6.1 Sol, Introducing dots, ChatGPT Sites, ChatGPT Space, help center, release notes, developer docs, Sign in with ChatGPT docs and showcase. Anthropic, Claude Sonnet 5.5 and help center. Simon Willison, Every, TechCrunch, The Neuron, Axios, RuntimeWire, Ben’s Bites, PromptsLove. Test runs, timings and costs: Muzli, 2 October 2026, billed through OpenRouter at OpenAI’s list price. Demos and comparison images: Muzli, built with GPT-6.1 Sol and Claude Opus 5.5. Other images: OpenAI.

Three.js threw its first conference. The best thing on stage was a button.

TL;DR

  • 🎪 The 3D web got its own conference. Three.js is the library behind most of the 3D you see in a browser. Its first ever conference ran in Paris on 10 and 11 September, two days, 20-plus speakers, after party on a boat.
  • 🔮 The big one is HTML in Canvas. Chrome can now put real, live HTML onto a 3D surface. A real button, a real form, real text you can select and translate, wrapped around an object. I think this is the next design trend, and I will explain why.
  • ⚙️ The engine underneath got swapped. The browser has a new, faster way to talk to the graphics card, called WebGPU, and three.js now treats it as the default. In practice that means a million particles on a phone and photoreal scanned objects in a tab.
  • 🎨 The work proves it. A WebGL comic, a tiny planet you can walk around, a portfolio you drive a truck through. All linked and playable below.
  • 🛠️ There is something to try whoever you are. A fifteen-minute tour if you do not code, copy-paste prompts if you build with AI, snippets if you write three.js.

Most design conferences are a lanyard, a tote bag, and forty minutes on “the power of story”.

This one had a man driving a toy truck around his portfolio with a game controller, and a room full of people taking notes.

The first Three.js Conf ran on 10 and 11 September at Maison de la Chimie in Paris. If you have never touched three.js, that is fine, you have still used it. It is the free JavaScript library behind most 3D on the web: the sneaker you spin on a product page, the award-site hero that reacts to your cursor. When a website has depth, it is usually three.js underneath.

So this piece skips the changelog voice. For each thing that came out of Paris, here is what it is, what it lets you design that you could not before, and a live example to poke at.

Speakers and organisers on stage under the Three.js Conf logo at the close of the event
The close of day two at Maison de la Chimie. Image: Codrops

Sixty seconds of vocabulary

You will see these words below. Here is all you need.

  • three.js. The library. You describe a scene, a camera and some lights in JavaScript, and it draws 3D in the browser.
  • r186. Just a version number. Three.js ships a release about every month and numbers them r184, r185, r186. The newest, r186, came out on 8 September, two days before the conference.
  • WebGL and WebGPU. Two ways a browser talks to your graphics card. WebGL is the old one. WebGPU is the new one. Same road, newer engine: more on screen, less battery.
  • Shader. A tiny program that decides the colour of every pixel. Every liquid gradient, glass blur and ripple-on-hover you have admired is a shader.
  • TSL. Three.js Shading Language. A way to write those shaders in plain JavaScript instead of a cryptic graphics language.
  • Gaussian splat. A 3D photo. You film an object with a phone, software turns the footage into a cloud of soft coloured dots, and it looks photographic from any angle.

That is the whole glossary.

🔮 HTML in Canvas: the one I would bet on

Chrome origin trial since version 148 · extended through Chrome 160 on 7 September · three.js support since April

Here is a problem you have hit even if you never named it.

A web page is made of two worlds. There is the normal page, the DOM, where text is text. You can select it, translate it, zoom it, tab through it, and Google can read it. Then there is the canvas, the rectangle where 3D and fancy effects live. Anything inside the canvas is a picture. That gorgeous 3D laptop on a landing page with the app on its screen? The “app” is a flat image or a video. You cannot click its buttons. A screen reader sees nothing. Autofill does not work. Change the copy and someone has to re-export a texture.

For twenty years designers picked a side. Rich and dead, or plain and alive.

HTML in Canvas ends that. Thomas Nattestad and Natalia Markoborodova from the Chrome team showed it on day one. You mark ordinary HTML elements, and the browser paints them, live, into the canvas, onto any 3D surface or through any effect. And per Chrome’s own write-up, they stay real: text selection, copy and paste, right-click, screen readers, find-in-page, translation, autofill, dark mode, browser zoom, even DevTools.

Here it is running. This is the official three.js example. That cube is wrapped in a real HTML block: bold text, an emoji, right-to-left Persian, vertical Chinese, an animated image, an SVG. And a text field and a button. Type in the field. Click the button. It is a form, on a cube.

Live demo. Drag to rotate, type in the field. Browsers without the new API get a polyfill, so it works everywhere. Open full screen. Demo: three.js

What this unlocks for designers

This is the part I think people are sleeping on. Forget “3D websites”. Think about what you can now do to ordinary UI:

  • The product screen that is the product. That laptop or phone mockup in your hero can run the real app. Real hover states, real scrolling, real sign-up form. One source of truth, and the marketing page can never drift out of date.
  • Effects on real text, with SEO intact. Liquid distortion, glass refraction, rain on the window, pixelation. Until now that meant turning your headline into an image. Now the headline stays an <h1> and the effect is a layer on top.
  • Page transitions that were never worth the pain. A page that curls like paper. A login card that folds away. A checkout that flips over to show the receipt. All of it on live, clickable content.
  • Micro-interactions with physics. An input whose text dissolves into particles when you hit enter. A slider made of jelly. Small, delightful, and still a real <input>.
  • Interfaces inside 3D and XR. Menus in a web game, a configurator panel floating beside the car, a form in a headset. Laid out with normal CSS, not hand-placed pixel by pixel.
  • Better text in the tools you already use. Chrome names Google Docs, Miro and Figma as the other big audience, since canvas-based apps have always had to fake their own text rendering.

Vittorio Retrivi, a design engineer at basement.studio, built a set of demos for Codrops that make the point better than I can. His line: “HTML-in-Canvas feels like one of those ideas that makes you wonder why it didn’t exist before.”

Chrome demo: an interactive 3D billboard in three.js showing a live HTML card with a button and an SVG animation
Chrome’s billboard demo. The sign is a live HTML card, button included, lit and shadowed by the 3D scene. Image: Chrome for Developers

Go play with these. They need Chrome with the flag on, which takes thirty seconds and is explained further down.

Chrome demo: a 3D book whose cover and pages are live selectable HTML text
The book demo. Every page is selectable text, bent by a shader. Image: Chrome for Developers

The honest status

It is not shipped. It is a Chrome origin trial, which means real sites can switch it on for real Chrome users while the spec is still moving. The trial started in Chrome 148. On 7 September, three days before the conference, the Chrome team filed to extend it through Chrome 160, because feedback from other browser makers means some breaking changes to the API. Mozilla’s recorded position is no objection. WebKit has given no signal, so Safari is the open question.

That is exactly the stage where a design trend starts. Good enough to ship to Chrome with a fallback for everyone else, new enough that almost nobody has. Three.js added support in April. The award-site studios were in that room in Paris. I give it a few months before “live UI on a 3D object” is the hero pattern everyone is copying.

What else changed, and what it buys you

⚙️ WebGPU is now the default, not the experiment

Every serious talk assumed it · three.js falls back to WebGL on its own

You do not have to care how WebGPU works. Care about the budgets it moved.

Renaud Rohlinger of Utsubo showed the installation his studio built for Expo 2025 Osaka: a body of digital water made of around one million particles, in real time, in a browser. Anderson Mancini shipped a full WebGPU experience, forest included, in about 6MB. That is smaller than a lot of hero videos.

What it unlocks: the ambitious idea you cut from the brief because “it will not run on a phone” deserves a second look. Crowds, fluids, weather, thousands of products on one shelf. And three.js picks WebGPU or WebGL per device by itself, so nobody gets a blank page.

⚙️ TSL: effects become reusable parts

Three.js Shading Language · shaders in JavaScript · one source, runs everywhere

Shaders used to be the wall between designers and the good stuff. They were written in a separate, unforgiving language, pasted in as strings, and only the one person on the team who understood them could change them.

TSL, built by sunag (Jean Carlo Deconto), who gave the talk on it, turns a shader into ordinary JavaScript you compose from small named pieces. This is a complete material that tiles a fine detail texture over a base colour:

import { texture, uv } from 'three/tsl';

const detail = texture( detailMap, uv().mul( 10 ) );
const material = new THREE.MeshStandardNodeMaterial();
material.colorNode = texture( colorMap ).mul( detail );

You can more or less read that aloud. Which is the point.

What it unlocks: effects become components. A “frosted glass” or “holographic foil” material can live in your design system like a button does, get reused across projects, and be tweaked by changing a number. And because it is plain JavaScript, AI assistants write it far more reliably than the old shader languages. For a designer who prompts, that is the difference between “ask a specialist” and “try it this afternoon”.

This galaxy is one of the official examples. Every star’s position and colour is computed in TSL.

Live demo. Drag to orbit, open the panel to change the colours. Open full screen. Demo: three.js

Robin Payot rebuilt a Zelda scene in TSL for his talk. Bruno Simon rebuilt his whole course around it: the new WebGPU and TSL edition of Three.js Journey is 21 lessons and 24 hours, $45 alone or $120 bundled with the original. When the person who taught most of the industry re-records the shader chapters, the transition is over.

⚙️ Gaussian splats: a 3D photo in a web page

New in r186 · loader and renderer built into three.js

A 3D model is a sculpture someone had to build. A splat is closer to a photograph someone took. You walk around an object with a phone, software does the rest, and the result holds up from any angle, fur and reflections included.

As of r186, three.js loads and renders them out of the box. This lioness is the official example.

Live demo. Drag to look around her. It is a scan, not a model. Open full screen. Demo: three.js. Splat by Renaud Rohlinger via superspl.at

What it unlocks: real things, online, without a 3D artist. A ceramicist’s actual vase. A hotel room. A vintage jacket with every crease. Marcus McLean of Miris pushed it further in his talk: stream the scan like video, sending only what the camera is looking at. Their site claims under a second to first interaction, with a three.js kit and a free tier. The 3D asset is turning from a file you download into a stream you watch.

⚙️ SunLight: believable daylight in one line

New in r186 · sharp shadows near the camera, soft ones far away, automatically

Outdoor scenes on the web have the same tell: shadows that are crisp where you stand and mush ten metres away. Fixing it took an add-on and an afternoon of fiddling. r186 adds SunLight, which handles it for you.

What you get: architecture walkthroughs, car configurators on a road, anything with a horizon, looking right on the first try. Open the SunLight example and drag the elevation slider from noon to sunset.

🧩 The tools around it moved in the same week

Cassie Evans got ten minutes and used them to announce GSAP 4. Springs as a first-class easing, tighter three.js integration, and tooling for DOM and WebGL moving together. Codrops reported GSAP is on 13 million-plus sites, which is why this matters more than a version number. As of today the gsap.com blog still tops out at 3.15 from April, so treat the details as what was said on stage until the post lands.

For designers: one animation timeline for the page and the 3D scene, so the headline and the object behind it move as one piece.

Dennis Smolek and Kris Baumgartner showed React Three Fiber v10, the version of three.js that React teams use. It is in alpha, with WebGPU and TSL built in. If your product is a React app, all of the above arrives as components rather than a rewrite.

The work, playable

The best argument for any of this is the sites themselves. Open them on a laptop, sound on.

Ponpon Mania artwork: a sheep, a wolf and a dinosaur celebrating in a cartoon city
Ponpon Mania by Patrick Heng and Justine Soulié. Image: Ponpon Mania

Ponpon Mania. A comic you scroll through, where every panel is alive. Patrick Heng and Justine Soulié opened day two with it. The lesson for design teams was the process: they built a custom editor so the illustrator and the developer worked in the same tool. Their line: “A sketch can inspire an interaction, and an interaction can inspire a new visual idea.”

Messenger by Abeto: a tiny hand-drawn planet covered in houses and trees
Messenger by Abeto. Image: Abeto

Messenger. A tiny planet you walk around. Vicente Lucendo of Abeto, a two-time Site of the Year winner, opened the conference with how it was made, and talked about composition and sound before he mentioned code.

Bruno Simon's portfolio: a red low-poly truck on a wooden bridge at dusk
Bruno Simon’s portfolio. You drive it. Image: Bruno Simon

Bruno Simon’s portfolio. You drive a truck through his CV. He closed the conference by playing it live with a controller, then gave his rules for memorable web experiences. Animate everything. Keep it smooth. Find the one original feature. Iterate fast. Entertain. Treat sound as a feature. Collect inspiration before production, not during.

threejs.paris. The conference site, by David Ronai and Hervé Studio. Every visitor becomes a bouncing character sphere. Hervé Studio spent seven months on the identity, down to electronic speaker badges that react when two are placed together.

Two studio talks were about restraint. Antoine Ménard of Merci Michel argued that “real-time 3D doesn’t have to look like 3D”. Edan Kwan of Lusion, whose sites look expensive, gave a list of cheap tricks combined well.

What the room argued about

Portfolios. In Roast My Folio, Bruno Simon, Cassie Evans and Nicolas Barradeau tore through real portfolios on stage. The red flags they named: fluid simulations, slow loading, too many effects, dense blocks of text. If your home page opens on a fluid sim, they were talking about you, and they were right.

AI. mrdoob, who created three.js, compared coding with AI to anti-aliasing in the nineties. Purists sneered, then everyone used it, then nobody mentioned it. His line, as Codrops reported it: “We’ve moved one level of abstraction higher.” The design panel on day two added the limit. AI shortens the distance from an idea to a prototype. It does not shorten the distance from a prototype to a good one.

Taste. The best line of the event came from a two-minute lightning talk by Dario Sanchez. “Rendering isn’t always the bottleneck. Perception is. Technical accuracy alone doesn’t make something beautiful. Taste does.” The most reassuring thing a designer could hear at a graphics conference.

Try it this week

🛠️ If you do not write code: the fifteen-minute tour

  1. Open Chrome and go to chrome://flags/#canvas-draw-element. Set it to Enabled and relaunch.
  2. Open the 3D book. Drag a page. Then select a sentence with your cursor. That second part is the revolution.
  3. Open the UI on a 3D computer. Click around the interface on the screen.
  4. Now open your current project and ask one question. Where do we show a picture of our product that could be the product? Hero mockups, onboarding, the pricing page. Write down three.
  5. Take one to your developer with the three.js example linked above. The whole thing is a single short file.

🛠️ If you build with AI tools

These work in Claude, Cursor, v0 or whatever you use. Each one names the version, because models default to older three.js habits.

A live product screen in a 3D hero:

Build a landing page hero with three.js r186.
A 3D laptop sits centre stage and turns slightly with the cursor.
Its screen must be LIVE HTML, not an image: render a real
<form> (email input + button) onto the screen mesh using
THREE.HTMLTexture, following the official example
webgpu_materials_texture_html, including its polyfill fallback.
The form must stay focusable, typeable and screen-reader visible.
Use WebGPURenderer. Keep the headline as a normal <h1> outside
the canvas.

An effect on real text:

Using three.js r186 and THREE.HTMLTexture, take the existing
<section class="hero"> and draw it into a full-screen canvas.
Add a TSL shader that gives a subtle liquid-glass distortion
following the cursor, fading to zero when the cursor is still.
The original text must remain selectable and in the DOM.
Respect prefers-reduced-motion by disabling the effect.

A material for your design system:

Write a reusable three.js r186 material in TSL (three/tsl),
as a function holographicFoil({ hueShift, grain, intensity }).
It returns a MeshPhysicalNodeMaterial whose colour shifts with
view angle, like foil on a trading card. No GLSL strings,
no onBeforeCompile. Expose the three parameters as uniform()
nodes so GSAP can animate them. Add a demo on a rounded card.

Paste the result into the TSL editor if something looks off. It shows what your code turns into, which is the quickest way to catch a model inventing functions.

🛠️ If you already write three.js

  • Put HTML on a mesh. It is one line once you have an element: material.map = new THREE.HTMLTexture( element ). Add InteractionManager from the addons for clicks, as the example does. Expect API changes while the trial runs.
  • Port your smallest shader to TSL. Take one ShaderMaterial and rewrite it as nodes. It will then run on WebGPU and WebGL from one source.
  • Swap your sun. Replace the DirectionalLight and its hand-tuned shadow camera with SunLight and delete the tuning.
  • Try React Three Fiber v10 on a branch. npm install @react-three/fiber@alpha, rename state.gl to state.renderer, and add Anderson Mancini’s r3f-webgpu-perf to watch draw calls while you do it.
  • Scan something. Film an object, clean the splat up in SuperSplat, and load it with the r186 splat loader.

Worth bookmarking

🔮 HTML in Canvas

⚙️ The engine

🧩 The tools

🎪 The event

The landing

Strip away the version numbers and Paris said one thing. The wall between the page and the canvas is coming down. WebGPU made the canvas fast enough. TSL made its effects writable by normal people, and by their AI tools. And HTML in Canvas lets the two worlds share the same pixels.

Watch that last one. Every other announcement makes 3D prettier or faster. HTML in Canvas makes it useful, because a button on a 3D surface finally stays a button. The open question is Safari. If WebKit moves, the 3D site and the normal site stop being different projects.

So do not wait for the talk recordings. Flip the Chrome flag, open the book demo, and select a line of text on a curling page. Then look at your own hero section and ask what it would do if it were alive.

In a few months somebody’s live-UI-on-an-object landing page will be on every inspiration feed. You have about that long to make it yours.

Sources: Codrops, Inside the First Three.js Conference in Paris, Codrops speaker interviews, Codrops, Exploring the HTML-in-Canvas Proposal, Chrome for Developers, blink-dev, Intent to Extend Experiment, Three.js Conf schedule, three.js releases, pmndrs, Miris. Images: three.js, Chrome for Developers, Ponpon Mania, Abeto, Bruno Simon, Codrops.

Apple finally folded. Designers got the homework | Apple Event 2026

TL;DR

  • 📱 The foldable is real. iPhone Duo, 7.6 inches open, $1,999, ships October 23. The crease is still there. Apple never actually said it wouldn’t be.
  • 📸 iPhone 18 Pro got a real aperture. ƒ/1.48 to ƒ/4 on six laser-cut blades, plus manual shutter speed. Actual optics, not a blur slider.
  • 🔒 Photos can now prove they’re photos. Apple Reference Image signs the sensor data. Apple skipped the industry standard to build it.
  • 🪟 Liquid Glass got rebuilt. Users now control transparency themselves, which means your UI has to survive a range instead of a look.
  • 📐 Your layouts need work. Two size classes, three reserved regions, and “poses” instead of orientations. The dock went vertical.
  • 🗓️ iOS 27 shipped September 14. No regular iPhone 18 until spring 2027. First keynote under CEO John Ternus.

Apple’s September keynote is usually a spec sheet with a soundtrack. A number goes up. Someone says “our most advanced ever.” The stock moves two percent.

This one was different.

On September 9, John Ternus walked out at Apple Park as CEO, eight days into the job, and folded an iPhone in half on stage.

Predictably, the internet spent the next 24 hours arguing about a crease.

Fine. But the crease is the least interesting thing that happened. The parts that actually land on your desk happened around the edges: a rebuilt Liquid Glass, a cryptographic receipt for photographs, and a set of layout rules that quietly break a habit iOS has had since 2007.

Here’s all of it, and what it costs you.

iPhone Duo in Star White and Night Sky
iPhone Duo in Star White and Night Sky. Image: Apple

Everything Apple announced

📱 iPhone Duo

$1,999 / 256GB · Pre-order Oct 16 · Ships Oct 23

The foldable. 5.4 inches closed, 7.6 open, both displays Super Retina XDR at 3000 nits with ProMotion and always-on.

Grade 5 titanium, mirror-polished, with a 3D-printed hinge cover and a hinge made of more than 100 components. The inner screen gets a nano-texture finish.

Face ID didn’t fit, so Touch ID moved into the side button and the FaceTime camera hides under the inner display. A20 Pro chip, dual 48MP Fusion cameras, 4K120 in Dolby Vision.

Two colors: Star White and Night Sky. Ships in 70-plus countries running iOS 27.1 out of the box.

📸 iPhone 18 Pro and Pro Max

$1,199 / $1,299 · Pre-order Sep 12 · Ships Sep 18

The A20 Pro is the first 2nm chip in a phone. Nice, but not the story.

The story is the camera. A real variable aperture on the main lens, six laser-cut blades moving between ƒ/1.48, ƒ/1.8 and ƒ/4. Manual shutter speed control. Texture and grain sliders in Photographic Styles.

That’s a physical iris in a phone. Depth of field you commit to at capture instead of faking afterward.

Dynamic Island shrank and now holds three live activities. Battery goes to 36 and 45 hours of video. Four finishes: black, silver, glacier, burgundy.

Oh, and there’s no regular iPhone 18 this fall. That one slips to spring 2027. If you wanted a normal iPhone, your options are last year’s or $1,199.

⌚ Apple Watch Series 12 and Ultra 4

$399 / $799 · Ceramic from $899 · Ships Sep 18

New Health Sensing System, S11 chip, a Readiness app, and Audio Intelligence features including Live Rewind, which keeps the last 15 seconds of a conversation. Make of that what you will.

The material news is genuinely better. Ceramic is back after seven years, in pearl white and night blue. Aluminum cases move to Ceramic Shield 2. New Sport Loops use inkjet printing for plaid patterns, and Hermès brought a Rocabar Club band with a three-dimensional H.

🎧 AirPods 5

$129 · $149 with wireless charging

ANC is now in the $129 base model and removes up to 50 percent more noise than AirPods 4. The $149 version adds a wireless charging case, stem volume controls and an extra hour.

The cheapest thing announced is also the best value by a mile. Funny how that works.

💻 iOS 27 and the rest

iPadOS 27 · macOS Golden Gate · watchOS 27 · tvOS 27 · visionOS 27 · Sep 14

All shipped September 14.

Also: Siri’s AI features now have a daily usage cap, with expanded access sold separately. Nobody clapped for that one.

iPhone 18 Pro in black, silver, glacier and burgundy
iPhone 18 Pro, four finishes. Image: Apple

About that crease

Apple’s engineering answer is genuinely clever, and it’s basically expensive bookbinding.

Optically clear adhesives let the display layers slide against each other as the screen folds, so the stack isn’t fighting itself at the bend. Apple’s own words are that the layers glide “like pages in a book.” On top sits a nano-texture finish, a matte surface that scatters the reflection you’d otherwise use to spot the fold.

Clever. Now read the copy again.

Apple says the construction “minimizes stress and crease.” Minimizes. Not eliminates. That is not sloppy marketing, that is a legal team doing its job.

Then there’s the number Apple didn’t publish. Samsung rates the Z Fold8 for 500,000 folds. Apple published no fold-cycle rating at all.

When a company that will happily tell you its glass is 3x more scratch resistant suddenly goes quiet on a durability number, the silence is the number.

Hands-on reports landed within hours. 9to5Google found the crease about as visible as on any Android foldable.

That gap between the engineering story and the thing in your hand is the most honest detail of the whole keynote.

iPhone Duo shown closed and open
5.4 inches closed, 7.6 open. Image: Apple

What designers actually said

The design press was noticeably warmer than the spec-sheet press. There’s a reason.

The Duo is the first foldable that reads as a designed object rather than two phones in a trench coat.

Yanko Design went furthest, arguing it stops being an iPhone without becoming an iPad.

Their best observation is about the asymmetry: two rounded corners on the right, squared geometry at the hinge. Your hand knows which edge to open before your eyes do. They compare it to a small hardcover.

But their sharpest line is about software, not hardware. On the open display, the Dynamic Island rotates sideways along the edge and the dock goes vertical.

As Yanko put it: nobody outside Apple would have been permitted to move that dock.

“New but remarkably familiar, the same size as your passport.”

Molly Anderson, Apple VP of industrial design, to Wallpaper*

That’s better product framing than anything in the actual keynote script.

Now the skepticism, which is just as specific.

Yanko called Touch ID instead of Face ID a real step back on a two thousand dollar phone. Hard to argue.

PetaPixel pointed out the Duo runs the previous-generation main sensor, with no variable aperture and no dedicated telephoto.

Read that again: the most expensive iPhone Apple sells has the worst camera of the three phones announced.

Macworld’s verdict on the event was that it delivered more Shine than Surprise, with one editor summarizing the pricing tiers as: the more you pay, the less fun you get.

PetaPixel did find the one genuinely new creative trick, though. Fold it halfway, stand it on a table, and it’s a tripod that previews your framing on the outer screen while both cameras record.

That isn’t a spec. That’s a shooting posture that didn’t exist last week.

One more piece of context worth having. Alan Dye left for Meta at the end of 2025 after nearly twenty years running design at Apple. Steve Lemay took human interface. Molly Anderson took industrial design.

“Surprise and Shine” is the first launch where both hardware and software carry the new team’s fingerprints end to end. Keep that in mind while you judge it.

Liquid Glass finally grew up

Remember the iOS 26 backlash?

Apple shipped what amounted to a frosted shower door installed in a conference room. Gorgeous in the render. Unreadable in the meeting.

Transparency everywhere, text you had to squint at, and developers annoyed that perfectly working apps suddenly needed a visual pass.

Here’s what I respect: Apple didn’t retreat, it rebuilt.

Shubham Kedia, Apple’s human interface design director, says the material now diffuses complex content behind it far more aggressively while adding depth and separation.

In plain terms: darker outlines around translucent elements, stronger contrast, and backgrounds that actually blur instead of politely tinting.

Three changes hit your work directly.

  • 🎚 There’s a transparency slider now. Users drag Liquid Glass from ultra clear to fully tinted. Which means you’re no longer designing a look. You’re designing a range, and your contrast has to hold at both ends of it.
  • 🖼 App icons changed. Liquid Glass layers are composited into the artwork itself with a new rendering path, so icons come out sharper. Icon Composer is how you build them.
  • 📏 macOS Golden Gate corrects inconsistent corner radii across every app, including third-party ones, with zero developer work.

That last one deserves a second read. Apple is now quietly fixing everyone’s corner radii for them. Whether they asked or not.

Honestly? Half of you needed it.

A photo that can prove it’s a photo

This is the feature I keep thinking about, and almost nobody led with it.

Apple Reference Image on the 18 Pro is, functionally, a birth certificate for a photograph.

The camera captures signed sensor data. Private Cloud Compute develops that into a reference version you can’t alter, which Apple describes as something close to a digital negative. Any edited copy gets checked against it.

Retouched? Generated? The comparison shows it.

Here’s the spicy part. Nikon, Canon and Google all back C2PA Content Credentials, a metadata standard that travels alongside a file.

Apple looked at an open industry standard backed by half the camera business and said no thanks.

And annoyingly, Apple has a point. Metadata is a sticker on the box. It can’t catch an AI edit made to a genuinely credentialed photo. Apple anchored the pixels instead of labeling the file.

Nieman Lab covered it as a newsroom tool, which is exactly the right frame.

If your work is photographic, this is the first mainstream attempt at proving provenance that doesn’t depend on a label nobody checks.

Apple Reference Image in the Photos app
Comparing an edit against its reference image. Image: Apple

Now the homework

Good news first. Apple already updated Design Resources with iPhone Duo and iPhone 18 Pro bezels. Open and closed, both colors, Photoshop and PNG.

Grab them before your PM asks for “just a quick mockup.”

Now the layout rules, which are stricter than they look. The short version lives in the HIG layout guidance. The long version is the Prepare your app for iPhone Duo tech talk.

  • 📐 Design against two size classes, not two screens. Outer display is compact width. Inner is regular width. Apple is blunt about this: avoid fixed widths, breakpoints, or any metric tied to a specific screen. The inner canvas is roughly 80 percent bigger than an iPhone 18 Pro, which is enough for split views, two-column reflows, and tab bars that become sidebars.
  • 🚧 Learn the reserved regions. There are three. The fold itself, which Apple calls a division region and which has zero width when the device is flat. Plus the inner and outer cameras, which only activate when the camera is in use. Think of them as support columns in an open-plan office. You can’t move them, so you plan around them. Sheets, alerts, menus and popovers dodge them automatically. Anything you lay out by hand does not.
  • 🔢 Keep an even number of columns whenever a division region exists, active or not. Memorize that one, it’s the rule people will get wrong.
  • 🤸 Think in poses, not orientations. Book pose is half-open and vertical, so alerts and menus shift to the trailing side where the thumb is. Table pose is propped, so glanceable content goes up top and touch controls go to the bottom. Scrolling content is exempt, because scrolling already solved this problem.
  • 🧰 Go look at your toolbar. On the open display, icon-only items rotate to a vertical bar at the edge while text items stay horizontal. If yours mixes icons and labels, it’s about to look broken. I’ll wait.
iPhone Duo running two apps side by side
Split View on the inner display. Image: Apple

Worth bookmarking

Everything below is first-party and free. If you only open two, make it Design Resources for the bezels and the Duo tech talk for the layout rules.

📦 Assets to download

  • Apple Design Resources. Device bezels, Sketch and Photoshop libraries, now including iPhone Duo open and closed in both colors.
  • SF Symbols. The icon set, the Mac app, and the variable-weight rules that keep icons matching your type.
  • San Francisco and New York. Apple’s system faces, licensed for interface mockups.
  • Apple Newsroom. Where the photography in this piece came from. High-res press images, free to use editorially.

📖 Guidelines to reread

  • Human Interface Guidelines. The whole thing, updated for iOS 27 and the Duo.
  • Layout. Size classes, safe areas, and the reserved regions the fold introduces.
  • Materials. How Liquid Glass is meant to behave over content, and when not to use it.
  • Toolbars. Read this before your mixed icon and label toolbar meets the vertical bar.
  • Multitasking. Split View and the poses, which now matter on a phone.
  • Accessibility. The contrast section is the one that survived the Liquid Glass backlash.

🛠 Shipping for iOS 27

  • Prepare your app for iPhone Duo. The tech talk with the actual adaptation rules: reflow, displacement, and what never moves.
  • Adopting Liquid Glass. What changed under the material this year, written for people shipping against it.
  • Icon Composer. Builds the layered icons the new rendering path expects.
  • GeometryProxy. Where the reserved-regions API lives if you’re laying out around the fold by hand.

🔍 On provenance

  • C2PA Content Credentials. The standard Apple declined to adopt. Understand it before you pick a side.
  • Designing for iOS. The platform overview, useful as a sanity check when a foldable tempts you into iPad patterns.

So, was it good?

The Duo isn’t the crease-free miracle the supply-chain leaks promised. At $1,999 with the second-best camera in its own lineup, it’s a hard object to defend on a spreadsheet.

But it’s the first foldable where the industrial design has an argument instead of an excuse. And the software concessions Apple made for it are more radical than the hinge.

The rest of the event was a good year, not a strange one. Better cameras. Better watches. Cheaper noise cancellation. Liquid Glass you can finally read.

Apple Reference Image might matter more in five years than the foldable does.

But here’s the thing I’d actually watch: Apple moved the dock. Vertical, after nineteen years, for a device most people will never buy.

That’s not a hardware decision. That’s a company telling you which conventions are still negotiable.

So don’t wait for October. Open Design Resources, drop the Duo bezels into your busiest screen, and see what breaks.

The reserved regions will find your bugs whether you look now or not. Better they find them before your users do.

Sources: Apple Newsroom, MacRumors, Macworld, Yanko Design, Wallpaper*, PetaPixel, 9to5Google, Cult of Mac, Nieman Lab. Product images: Apple.