GPT-6 Astra and Opus 5.5: 6 Website Demos
See six AI design and website demos covering interface planning, generated images, finance pages, account flows, iteration, and styling.
Which AI Interface Planning Demo Should You See First?
“Build an interface from a request” is the clearest place to begin. In a demo shared by michaeltefula, Jev takes a natural-language request and turns it into a plan for an interface. The demo had 49,900 views on X, the largest audience among these examples.
The interesting part is the choice to show planning as its own product-design step. A request describes what someone wants, while an interface plan has to organize that request into something that can guide the work. This demo therefore focuses attention on the transition between an idea and a proposed interface, rather than presenting only a finished page.
That makes it especially relevant to people searching for AI design demos for work. Many design tasks begin with ordinary language from a client, coworker, or product owner. The demo offers a concrete example of that language being converted into a more structured interface direction. It is a useful reference when you want to examine how an AI-assisted workflow can start before detailed visual design begins.
Which GPT-6 Astra Website Uses Generated Images?
“50 years of devices.” by bentossell combines an image-generation task with a website concept. GPT-6 Astra generated the device images and built a site where people can save the devices they had or wanted. With 12,184 views on X, it is the second most viewed example here.
The subject gives the website a clear organizing idea. Instead of using generated images as isolated illustrations, the demo places them inside an experience about recognizing devices and recording a personal connection to them. The images supply the items, while the save action gives visitors a direct way to respond to what they see.
For work involving collections, archives, or visually organized subject matter, this is a useful demo to study. It shows a project in which the generated media and the website serve the same concept. The fifty-year span also gives the experience an immediately understandable frame without requiring a long explanation. Among these examples, it provides the most direct combination of image generation, website construction, and a simple action for visitors.
What Does Opus 5.5 Make for a Finance Landing Page?
“Finance app landing page with a 3D background” is a focused Claude Opus 5.5 example from kevinkern. The page places the headline “Everything in one place” over a muted, three-dimensional-style background with floating panels.
This demo is interesting because its visual ingredients are easy to identify. The headline carries the central message, the restrained background establishes the setting, and the floating panels add depth around the text. That combination makes it a practical reference for anyone exploring how an AI-made landing page can pair short copy with a more dimensional presentation.
The muted treatment matters to the composition described in the demo. A detailed background could compete with the headline, but this page keeps the wording prominent while retaining the three-dimensional motif. It is worth opening when your search is specifically about AI website design for a product landing page, especially if you want an example built around one concise statement rather than a long block of introductory copy.
How Does Opus 5.5 Present Two Account Flows?
The “Drata Login Page with Two User Flows” demo by cherifdesigns tackles a familiar work interface: account access. Claude Opus 5.5 presents separate tabs for logging in and creating an account, includes sign-in options, and places a halftone-style visual on the right.
Its strongest idea is the visible separation between the two user goals. Someone returning to the product can choose the login route, while a new user can move to account creation. Presenting those choices as tabs keeps both flows within the same page while giving each one an explicit place.
The right-side halftone visual adds a distinct presentation element without changing the purpose of the screen. That balance makes the demo useful for people looking at AI-generated authentication pages, where the functional choices need to remain easy to find even when the page includes decorative artwork. It is a compact example of combining a practical form-related interface with a more expressive visual area.
Which Demo Shows an Iterative Website Process?
“Website made by Opus 5.5” comes from saef_raheem and carries one important piece of process context: it took more than an hour of iterations. That makes it useful for a different reason than the demos with detailed page descriptions.
Here, the notable point is that the shared website was the result of continued revision. The creator did not describe it as an immediate result. For someone comparing AI website demos, that context helps distinguish the model used from the working process used to reach the shared version.
The example is worth viewing when you are interested in iteration itself. It represents website work as a sequence of adjustments over time, with Claude Opus 5.5 involved throughout that process. Early demos cannot show everything a model can do, but this one gives a concrete reminder that the final result people share may reflect sustained direction and refinement.
Which Claude 3.5 Sonnet Tool Helps Style a Page?
“Shape a shadow” is the smallest and most narrowly focused design demo in this group. Made with Claude 3.5 Sonnet, it lets someone adjust a shadow and then copy the resulting style for use on their own page.
That direct sequence is what makes the tool useful: change the visual treatment, inspect the result, and take the style into another page. The output is tied to an immediate design action rather than a complete website concept. For someone working on interface details, that narrower scope can be easier to apply than a full landing-page example.
This demo is a good final stop because it shows a different scale of AI design work. The other examples center on interface planning, image-based collections, landing pages, account flows, or an iterated website. “Shape a shadow” concentrates on one reusable page detail. It is the example to open when you want a practical styling tool rather than a broader site concept.