Design Enters the Agent Era: Deliverables Are No Longer Mockups, But Product Prototypes
The deliverable of future design might just be the product prototype itself.
The deliverable of future design might just be the product prototype itself.
👦🏻 Author: GaKi
🥷 Editor: Koji
🧑🎨 Layout: NCon
In April of this year, Anthropic released Claude Design.
On launch day, a demo tweet on X racked up over ten million views. Figma's stock dropped 7%, and Adobe, Wix, and GoDaddy followed suit. For the first time, a large model company aimed its product directly at design tools — and the results, and consequences, were both surprising enough.
Beyond that, Google Stitch rolled out a major update in March, adding an infinite canvas and voice interaction, completely free.
What they share is eliminating the labor-intensive step between design files and code, letting people who don't know design, or even much code, turn ideas directly into interactive pages.
This is real demand, and domestic players were bound to follow quickly.
Two months later, Tiangong — which had just announced 3x revenue growth in the past month — launched its own "Tiangong Design Agent," following the same "idea to prototype" path. On the overseas version Skywork Design, drawing on Tiangong's technical积累 in the Agent direction and combining multiple image generation capabilities, it delivers impressive generation speed and visual quality.
The domestic version of "Tiangong Design Agent" focuses on targeted adaptation for Chinese-language scenarios and local asset systems.
🚥
The Crossing team tested it with two real projects:
1) Building an "AI Weird Tales Times" app UI prototype from scratch
2) Starting from a PRD document, recreating an "Apple Magic Microphone" website.
1) AI Weird Tales Times App UI Prototype
Kunlun Tech's "Tiangong Design Agent" has a dedicated entry point:
Domestic version:
https://www.tiangong.cn/design
Overseas version:
First, its capabilities. It suits two scenarios well: building an app UI prototype from scratch, or generating an entire website from documents like PRDs or design.md files. Let's look at the app UI prototype first.
A few days ago I saw a post on Xiaohongshu where @stray_photon used Claude Design to generate a set of weird, absurdist-style pages in one shot, with solid overall effect and visual distinctiveness. I wanted to see if Tiangong's design agent could produce something similar.
I directly uploaded this newspaper-style reference image:
In the design agent's dialog, I described the request: reference this newspaper image, extract its design language, and carry it through all pages. Make a UI for an "AI Weird Tales Newspaper" app, covering both reader-facing and editorial backend sides, with the backend using web-based UI design.
After uploading the image, it first analyzes and produces a complete design specification.
For this run, it extracted from the newspaper image a brand primary color #B12D38 (deep red), background color #F7F0E2 (cream), plus a full color scale including Ink, Surface, Background Warm, and more. It selected three typefaces: Inter for body text, Noto Serif SC for Chinese headlines, and Roboto Mono for monospace accents.
This step came out very quickly, with detailed breakdowns;
After confirming the design direction, it goes through rounds of visual style confirmation. This time it settled on a retro newspaper aesthetic — cream base with multi-column grid layout, combined with an app UI prototype framework.
Once confirmed, it spun up about 19 sub-projects simultaneously:
All these sub-projects generate in parallel, similar in approach to Pencil and Claude Design.
Of the 19 pages, 13 are reader-facing and 6 are backend, all running in parallel. The overall product flow runs from onboarding, today's newspaper, missing persons, my profile, briefings collection, story submission, to archiving, then to the editorial backend's review, scheduling, and publishing — a clear thread. This flow is also shown in the Agent conversation page.
Looking at a few specific pages: the "Submit Story" section splits into eight sub-pages, covering categories like missing persons, lost items, obituaries, rentals, acquisitions, lost and found, searches, and job postings.
Clicking into "Myself," it's written from an AI's perspective, opening with "The last time I saw myself was in browser history," with "am i real" in the search box, some text lines redacted with black bars. The newspaper front page "Out-of-Distribution Times" on the right has complete layout, with headline section, classified ads, and missing persons each occupying their own block. Overall page completion is very high;
Later I made one round of adjustments, changing the name to "AI Weird Tales Times," making each issue's content into a card-based layout for a lighter overall look. Screenshots below show very solid page completion:
The editorial web backend pages were also generated together. The backend covers several core modules — for example, the subscriber management page has complete table fields including subscriber ID, subscription time, last login, and renewal status.
The layout editor page lets you drag approved articles into specific sections of each issue; the pending review page supports article-by-article review, with approve, reject, and redact action buttons for each piece, and so on:
One convenient feature in the design agent: after generating a set of UI prototypes, you can directly ask it in the Agent dialog to create a dark theme version based on what's currently on the canvas.
Tiangong's super agent already has quite a few mature Agent products. Though this design agent is spun out separately, it's interconnected with the Tiangong super agent.
For example, clicking "Generate Prototype":
It automatically packages all information on the current canvas into a ZIP file, directly adding it to the Tiangong super agent dialog as project context. You can then ask it to generate an interactive prototype directly from this ZIP file containing your design drafts.
The result looks roughly like this, with all code directly downloadable:
2) From PRD to Recreating the "Apple Magic Microphone" Website
One practical point from actual use: Tiangong super agent itself is a consumer-facing product, and users accumulate considerable context while working on projects there. This context can be saved to a knowledge base, and local MD documents can also be sent directly to the design agent — PRD documents, design.md files, and so on.
Previously, Crossing rode the "AI voice output" wave and "co-branded" with Apple on a Vibe Coding tool — the Magic Microphone (just kidding...). This time we made a variant version of an "Apple Magic Microphone" website, preparing several product requirement documents in advance:
Locally we had research reports, brand materials, design.md, and PRD documents. The design.md was generated earlier by asking the Tiangong super agent to research Apple website style:
These MD documents can be sent directly to the design agent without needing to write extensive prompts. I simply asked it to make all pages for the Magic Microphone variant website, from homepage to product page to support page, everything generated. Since design.md already specified Apple's design style, it was essentially a 1:1 recreation. The final output's fidelity to Apple website design could be called uncanny:
To add: I only provided one initial reference image. All other product panels, component images were generated by its own image generation capabilities. From the final pages, it generated a close-up of the "precision acoustic horn" metal mesh, a side detail shot of the "ergonomic grip," and a lifestyle image of someone holding the microphone addressing 30 people.
The product pricing section also made comparison cards for two SKUs, Standard at ¥1,799 and Pro at ¥2,599, with a feature comparison table and FAQ below. Overall effect:
Expert services, one-on-one buying guidance, and the list page below were all recreated, with high consistency to the original.
The page footer also got a complete four-column layout: Explore, Services, About, and Contact, with standard fields like support phone, Apple Store link, and privacy policy all present:
Similarly, you can quickly generate a dark theme version in the Agent conversation, or make an iPad-adapted layout, or redesign current pages with a more tech-forward visual style.
Switching to dark theme, the design specification updates in sync. The right panel shows the primary color switching from white background with black text to dark background with cyan accent, and the typeface shifting to SF Pro Display and SF Pro Text.
The Agent also notes adjustment details in conversation, like "scene card gradients should deepen to 60% to ensure white text readability" and "page structure identical to light version to ensure consistent site-wide experience":
The dark theme product close-ups have higher contrast against the dark background — the "precision acoustic horn" metal mesh and "ergonomic grip" brushed texture actually read clearer than in the light version.
As a design agent, Tiangong also supports deep editing of generated work — any UI design draft on the canvas can enter deep edit mode:
It supports local modifications to fonts, colors, layout, etc., and can also have AI make precise modifications following prompts:
Across both cases — one built from scratch, one starting from a PRD — the common thread is moving from a description to a set of interactive pages.
This is exactly what products like Claude Design, Pencil, Stitch, and domestic Tiangong Design Agent currently solve.
The deliverable of design might just be the product prototype itself. You can see the trend clearly from the players entering the space.
This year, Claude Design, Google Stitch, Pencil and others have emerged one after another. Though product forms differ, all are shortening the distance between idea and product.
After Claude Design's release, the market's strongest reaction didn't stop at page generation quality. Discussion quickly shifted to:
What position will design files occupy in future product development workflows?
Figma's stock dropped about 7% in a single day, with Adobe and other design software companies' stocks feeling simultaneous pressure. Investors worry that some workflows long dependent on design software are being reorganized.
Tiangong noticed this shift early and has been continuously investing in the "workflow" direction. After a mid-May product upgrade, its revenue tripled, further validating this path's effectiveness. Following the same logic, Tiangong extended its capabilities to the "design workflow," launching this "Tiangong Design Agent."
Previously, an idea had to pass through requirement documents, design files, annotations, development, and multiple other stages before becoming a product. Now this chain is beginning to compress. From a requirement sentence to page generation, from design specifications to component generation, from pages directly to code generation — more and more steps are being taken over by Agents.
Google even proposed the concept of "Vibe Design" in Stitch. Users don't need to draw wireframes first, or place buttons and components. Just describe what you want to do, or even speak your idea directly. AI automatically generates pages, completes user flows, and connects them into interactive prototypes.
The whole process feels more like conversing with a product, rather than using design software.
Pencil does the same, putting the design canvas directly inside the IDE, letting design files and code files coexist in the same project. Design edits, code edits, and Agent execution happen in the same environment.
The company even makes "No more design handoffs" a core selling point.
These products attract attention precisely because they're changing how products are created.
Previously, teams delivered design files, which developers then translated into products. Now more and more Design Agents, like Tiangong Design Agent, are beginning to directly deliver runnable prototypes. Pages, interactions, design specifications, and frontend code are generated simultaneously and delivered as a single artifact.
Design files will still exist, but they're shifting from final deliverable to intermediate artifact in the development process. What's actually being delivered is becoming a product prototype that can already run, be clicked through, and continue iterating.
And the professional value and signals this brings are roughly three layers deep.
【1】First, the cost of making prototypes has dropped dramatically, and in the foreseeable future approaches zero. 【2】Second, what it generates and follows is a set of design specifications. 【3】Third, and most crucially, the scarce capability has changed — now it's judgment.
Users need to know what to make, what counts as good design, and what to cut. Designer and frontend roles are shifting from "making the interface" toward "defining specifications, judging quality" — humans judge, AI executes.
Figma's stock reaction on Claude Design's launch day was fundamentally driven by the combined effect of these factors.
Of course, caveats apply.
These products lower the floor, letting almost anyone make a decent-looking prototype, but they don't raise the ceiling. Products that can actually ship still require professional skill to oversee visual details, interaction depth, brand consistency, and various edge cases.
Finally, everyone is welcome to try out the newly launched Tiangong Design Agent~
Crossing is looking for freelance writers to cover AI product and model reviews.
If you've written articles like: Hands-on with PixVerse C1[1], Hands-on with LibTV[2], please contact zeo0811@gmail.com. Email should include: ① personal introduction, ② AI review articles you've written.
We offer competitive rates. Looking forward to observing and documenting the AI era together 🎪
References
[1] Hands-on with PixVerse C1: https://mp.weixin.qq.com/s/cgAzZy2PptdYaWbqywVg7A
[2] Hands-on with LibTV: https://mp.weixin.qq.com/s/aycqnq8wlaaOei1QZmhFHQ