Tiangong Design Intelligent Agent Real-World Test - Generating Iterable Web Pages in One Sentence

let AI Creating a beautiful webpage is no longer a novelty.

The problem is whether we can continue to iterate.

a lot of AI The page looks great at first glance, but when we want to add another page...AI It is very possible that it will suddenly "forget" and generate a new page with a completely different color scheme and layout.

It's fine for making demos, but it becomes a real headache when it comes to using it for official websites, product prototypes, or client proposals. What we really need is a design asset that can be continuously modified, expanded, and handed over to others.

Recently, Kunlun Tech released Tiangong 3.1, bringing with it the Tiangong design.intelligentbodyWe placed the design on an infinite canvas, throwing in the PRD, brand information, reference websites, and screenshots, and Tiangong Design...intelligentbodyIt will help you generate a set of web page or app UI projects that can be continuously modified.

Without further ado, let's get straight to the actual test.

We open Tiangong SuperintelligentbodyOn the official website, select Tiangong Design in the upper left corner of the page.intelligentbody.

In Tiangong DesignintelligentbodyThe design can be completed simply by inputting the requirements.

Case 1: Web Design

Design a customized travel website.

Below the input box, you can customize the theme color and choose to generate a desktop webpage or a mobile webpage.

Tiangong DesignintelligentbodyInstead of immediately starting to write code in the library,First, understand our true needs, then plan and design the process..

The first step is to determine the design direction, including color scheme, font and font size design, and page layout.SimpleIn short, it means transforming abstract descriptions into reusable design specifications.

Tiangong DesignintelligentbodyThe project was proactively broken down into three core pages: homepage, destination, and customized solution. Tables were used to explain the highlights of each page, organizing the information architecture exactly like a real official website project.

Let's take a look at the final result:

The finished product is more complete than I expected.

The three pages respectively showcase travel services, destination information, and customized solutions, each with its own focus, but maintain a unified navigation, footer, cards, buttons, and brand colors.The design guidelines, page structure, and component style of all pages should be kept consistent.It has a very high-quality feel.

Tiangong DesignintelligentbodyThey will also take the initiativerecommendFollow-up questionsThis helps us to continuously optimize:

We directly input the optimization direction, for example:

Change it to Art Deco travel style.

Tiangong DesignintelligentbodyIt allows for further modifications to the original project, preserving the page structure while adjusting the visual language. This version looks much more sophisticated.

We can alsoLet the craftsman designintelligentbodyPlaceholders for all imagesautomaticGenerate matching imagesThis makes the final product of the design drawings more aesthetically pleasing.

Each design drawing has a [something] in the upper right corner.Deep EditingButton.

Once selected, clicking on an element on the page will display information such as the module's text font, font size, color, element size, layout, and box model on the right side of the screen. Direct modification is also supported.:

Individual comments can be added and edited on each part of the page. For example, select a title and add a comment:

The title has been changed to: Encountering a Different Kind of Beautiful Scenery.

Tiangong DesignintelligentbodymeetingautomaticThey extracted the design specifications and helped us complete the modifications. The layout, typography, and font size are exactly the same as the original.

Each iteration can be very precise; even the Nth version will have the same requirements as the first version submitted, so there's no need to worry. AI Loss of context midway.

After making the adjustments, we can choose to export the project or generate a prototype.

Tiangong DesignintelligentbodyIt supports copying projects layer by layer to Figma, or exporting them as zip files, making it easy to embed projects directly or make secondary modifications.

We can also choose to generate a prototype based on the canvas or the entire project.

Tiangong DesignintelligentbodyStart by reviewing the design documents and creating an interactive prototype.

Let's take a look at the final result:

The color scheme and website structure are excellent; it has all the necessary entry points and navigation bars.automaticThe addition of card animation effects earns it a score of 9 out of 10.

Case 2: App Prototype Design

If we already have a PRD, we can directly upload it to the knowledge base and let Tiangong Design...intelligentbodyDesign a prototype according to the requirements of the PRD.

First, we upload our PRD to the knowledge base:

Tiangong DesignintelligentbodyThe first step is still to confirm the design direction, positioning K-Sister's Resume Optimizer as a mobile app. AI Job search tools, and a visual style that combines professional blues with a warm, tech-savvy aesthetic.

Tiangong DesignintelligentbodyMidway through the process, it was discovered that the page plan was incomplete; initially, the page structure only had a single page skeleton. It proactively corrected this to a complete set of 10 mobile pages. This was incredibly thoughtful, as it prevented many design problems from arising in advance.

After the plan was confirmed, Tiangong DesignintelligentbodyIt will be generated page by page following the actual app process.

Let's take a look at the final result:

Tiangong DesignintelligentbodyA complete functional chain has been created, which can be understood as a sequential job search optimization process, with the pages built entirely according to the order of usage.

The diagnostic report page is well-designed. The total score, the four-dimensional scores, and the risk warnings are all very comprehensive.

Case 3: Cloning Design

I designed for Tiangong.intelligentbodyA reference image guides the creation of the K-Sister Research Society branded customized travel website, designed to match the reference style.

Using the style shown in the image as a reference, help me create a customized travel website for the "K-Sister Research Society" brand. You can create the content yourself.

Tiangong DesignintelligentbodyBased on the reference images we provide, they will analyze a set of design guidelines, and then combine these design languages with our needs to apply them to the new website.

It's not about creating a pixel-perfect replica of a webpage, but about learning design languages and applying them flexibly..

For example, Tiangong DesignintelligentbodyWill learn the original color scheme:

Learn the original layout and arrangement:

Let's take a look at the final generated page:

It is completely different from our reference image, but upon closer inspection, the color scheme, card rounded corners, layout, and image slicing method all reveal traces of the original.

Just like learning knowledge, the key is not rote memorization, but the ability to apply knowledge flexibly and draw inferences from one instance to another.

In the past, let AI Designing is more like opening a blind box; a beautiful single-page visual needs to be run many times. And it may look decent, but when you delve into the logical connections between pages, the user interaction paths, and the functional loops, it's often a complete mess.

Tiangong DesignintelligentbodyThe design process revolves around a clear business need, first outlining the overall design direction, then breaking down the page and unifying the components and style. Within an infinite canvas, the design becomes a progressive process that allows for continuous questioning, localized adjustments, and iterative iterations.

As long as we can clearly express the product goals, core pain points, functional modules, and visual style,AI It will be able tofastWe can build a usable basic version. We don't need to be bound by the operating skills of the tools; we can focus on making judgments, filtering, and refining the details based on the initial draft.

Of course, when faced with complex real-world business logic and in-depth brand customization needs, the judgment of human designers in terms of aesthetics, interactive experience, and business trade-offs remains irreplaceable.

This type of design Agent The emergence of this technology has undoubtedly pushed the starting point of product design forward by a significant step.

design Agent It's like a low-barrier idea translator, allowing everyone to express and validate ideas more intuitively using prototypes.It can also help designers with some of the basic layout work, allowing them to have more energy to focus on higher-level aesthetic decisions, user experience optimization, and complex system design.

Original link:Domestic Claude Design + Figma? Tiangong DesignintelligentbodySomething