Core capabilities
💡 This page walks through the core capabilities of the Design assistant. The table below summarizes the key points for each capability, and the sections that follow explain each one in detail.
Capability | What it can do | Key points |
|---|---|---|
Generate designs from requirements | Turn a prompt or PRD into App and Web interfaces and interactive prototypes | For complex tasks, confirm modules, pages, states, and platforms first |
Improve existing designs | Improve layout, experience, and visual details based on pages, screenshots, Figma files, drafts, or code | Specify what to keep, how much to change, and which areas take priority |
Understand multiple kinds of materials | Automatically recognizes screenshots; breaks down PRDs; progressively reads the tech stack, routes, components, and design variables | Provide real project materials where possible; there's no need to remind the Agent to look at attachments |
Precise refinement | Adjust colors, corner radius, spacing, font size, light/dark mode, and layout by describing what you want in the chat | Set the global direction first, then handle local details to reduce back-and-forth |
Visual asset handling | Generates real images, illustrations, and logos, removes backgrounds automatically, and keeps the visual style consistent on the same page | Specify the purpose, aspect ratio, and style of the asset, and whether you need a transparent background |
Preview and delivery | Supports multi-device, multi-page, and slide previews, and exports to multiple formats | Complete a multi-view check first, then choose a format based on your downstream workflow |
Generate designs from requirements
Use this when you only have an idea, a prompt, or a PRD. The Design assistant first breaks the requirements down into feature modules, pages, and key states, then moves on to visual design once everything is confirmed to be complete. The final output is an interactive HTML prototype, and it can also generate presentations.
- Small single-page tasks: describe the platform, target users, page structure, and style direction directly.
- Multi-module products: upload a PRD in .md / .docx format and ask: "First break down the modules, page list, and key states, and generate the design once they are confirmed to be complete."
Improve existing designs
Use this when "we already have something, but it isn't good enough." After you provide existing pages, screenshots, Figma files, drafts, or project code, the Design assistant redesigns while preserving your brand, core content, and business logic. We recommend doing three things when redesigning:
- Set boundaries first: specify the product identity, core content, business logic, and brand assets that must be kept.
- Then set the intensity: choose detail polish, layout restructuring, or a full redesign to keep changes under control.
- Offer direction when needed: when the goal is vague and there are several reasonable paths, ask the Agent to provide up to three independent directions to choose from; when clear guidelines already exist, simply follow them.
Understand multiple kinds of materials
- Screenshots: recognized automatically; there's no need to remind the Agent to look at attachments.
- PRD: breaks down feature modules, pages, and states.
- Project code: progressively reads the tech stack, routes, components, and design variables to generate designs that follow your existing system.
- Figma: provide a design screenshot or a Figma MCP Link; the Agent first recreates the structure and visuals, then makes local adjustments.
Precise refinement
Describe the changes you want in the chat. We recommend setting the global direction first, then handling local details — for example, "Lower the overall visual density and switch to light mode," or "Widen the sharing area and make the primary button stand out more."
Visual asset handling
The Design assistant can generate real images, illustrations, and logos, remove backgrounds automatically, and keep the visual style consistent within the same page. When making a request, specify the purpose, aspect ratio, and style of the asset, and whether you need a transparent background; for a set of assets, note that the whole set should have a consistent style.