Design

Use cases

For designers: targeted iteration and cross-device collaboration

Traditional workflows require re-exporting assets, updating specifications, syncing with developers, and verifying the implementation for every change. The design workbench compresses this cycle onto the canvas: select an area, state your intent, and the agent adjusts instantly based on the visual context. Use Nudge to fine-tune colors and spacing in real time. The final artifact retains a readable, maintainable source file structure for easy handoff to other team members.

For product managers: Keep prototypes updated

High-fidelity prototypes communicate product direction effectively, but creating one usually depends on designer availability. The design workbench offers a third path: if your prompt lacks detail, the agent asks structured Questions to align on intent. After you confirm the Design Plan, it generates a production-quality, interactive prototype on the canvas, ready for requirement reviews or team presentations.

For marketing and operations: Generate multiple directions

A single campaign often requires multiple assets—key visuals, banners, and a landing page—but limited design resources typically allow only one direction. The design workbench generates multiple directions in parallel: input the theme and tone, confirm via the Design Plan, and the agent begins generation. Use the Auto-select style reference option to switch styles and create different versions for high-frequency needs like posters, banners, and landing pages.

How it works

Three core mechanisms drive the AI design workflow:

• Questions: When your input is insufficient, the agent asks clarifying questions to align on intent instead of making assumptions, minimizing ineffective iterations.

• Design Plan: Before generating, the agent outputs a structured Design Plan under the Plan tab that outlines the layout, style, and content hierarchy. The agent proceeds only after you confirm the plan.

• Nudge: After generation, exposes key design decisions—color palettes, spacing, and corner radiuses—as adjustable parameters, letting you fine-tune without writing new prompts.

Workspace

The canvas on the right includes five tabs:

Create a design

Step 1: Switch to the design workbench

On the QoderWork home page, click the workbench switcher in the bottom input bar (defaults to General) and select Design.

Step 2: Describe your requirements

Describe your requirements in natural language or by voice. Be as specific as possible about the purpose, key modules, and desired tone. For example: "Design a high-fidelity website homepage for an AI product. It should include brand navigation, a strong main headline, a section for product value propositions, a primary CTA, a secondary CTA, a product UI preview, and customer trust signals. The overall style should be modern, trustworthy, and polished."

You can paste screenshots and links directly into the input box. Click the microphone icon to use voice input.

Step 3: Select style and directory (optional)

Below the input box is a row of workbench options: Select working directory, Auto-select style reference, Fidelity, and component library.

• Click Auto-select style reference to lock in the overall tone before generation. Keep it on auto to let the canvas choose from 161 references, or select a specific style like Airbnb, Airtable, Apple, Carbon, or Cloudscape. You can filter by name using the search bar at the top.

• Click Select working directory to bind the task to a local directory. The agent will save the design's source files to this directory, which simplifies long-term maintenance and collaboration with the Qoder IDE.

• Click Fidelity to switch between Wireframe (focus on low-fidelity structure with minimal visual styling) and High-fidelity (use near-final visual design and detailed styling, which is the default).

• Click component library to select a target component library. The default is Do not specify component library (HTML-first, unless the requirement explicitly requests React or another framework). You can also choose from three React component libraries: shadcn/ui, Spark Design, or Ant Design. The agent will generate based on your selection.

Step 4: Choose to run or plan

After you submit your prompt, the agent analyzes the request and performs a brief analysis (you can see the reasoning process in the Deep Dives panel on the left). It then presents an Enter design planning decision card with two buttons:

• Run directly: Skips clarification and planning, letting the agent generate on the canvas immediately using the current context. This is ideal when your requirements are already clear or you just want a quick preview.

• Enter: Enters design planning mode. The agent first asks questions, then writes a Design Plan, and generates the design only after you confirm. This path is recommended for complex or high-fidelity projects.

Step 5: Answer clarifying questions

After entering design planning mode, the agent asks structured follow-up questions under the Questions tab about the target audience, product positioning, fidelity, brand assets, and more. Each question provides several options and supports free-form input via "Other (please specify)". Your answers help the agent create a plan tailored to your needs. To skip this, click Let AI decide at the bottom.

Step 6: Confirm the Design Plan

Next, the agent outputs a Design Plan in the Plan tab. It starts with the design intent and visual direction, followed by a Contract panel (Artifact / Platform / Output / component library / Fidelity / Style) and an Artifacts list detailing the purpose of each file. If the plan looks correct, click Run plan. If you need adjustments, click Request changes to request revisions.

Step 7: View the generation process

The agent generates the design on the Canvas. The left panel shows the real-time reasoning process in Deep Dives, and the canvas updates instantly as each component is placed.

Step 8: Preview the running application

Switch to the Preview tab to interact with your design as if it were a real application. Click CTAs, check hover states, and test the navigation flow.

Continue iterating

You can iterate directly on the canvas without rewriting your requirements from scratch.

• Append tasks: Add instructions in the bottom input box. The agent will process them after completing the current task.

• Interrupt current generation: Click the stop button next to the input box to interrupt the ongoing generation process.

• Select and annotate on the canvas: Select an area and tell the agent what to change. It will adjust based on the visual context instead of regenerating the entire design.

• Nudge to fine-tune key parameters: After generation, you can directly adjust parameters like color, spacing, and corner radius without writing new prompts.

• Switch models mid-stream: Use the model dropdown menu next to the input box (e.g., Standard / Flagship) to switch the model for the next step.

• Edit the source files directly: Open Design Files to inspect or edit the source code, allowing you to work at the code level when necessary.

Typical scenarios

Product landing page

Design a SaaS product landing page for enterprise users.
Include: a top navigation bar, a hero section (headline + subheadline + primary CTA),
a three-column value props section, a customer logo strip, a pricing comparison table,
a bottom CTA, and a footer.
Style: clean, lots of whitespace, cool color palette.

Marketing visual kit

Design a set of marketing visuals for an online product launch:
1. A 16:9 promo banner (title + countdown + QR code area)
2. A square social media graphic (for WeChat Moments and Weibo)
3. An event landing page (agenda, speakers, registration)
Use brand color #1A73E8 throughout, in a modern tech style.

Dashboard redesign

Redesign a data analytics dashboard.
Include: a sidebar navigation, a top filter bar, four key metric cards,
a line chart for trends, a donut chart for distribution, and a data table.
Use Linear as the style reference, with a dark theme that is information-dense but clearly structured.

One-click handoff to Qoder

Click Deliver to Qoder in the upper-right corner to hand off code artifacts directly to the Qoder IDE for further development. Designers comfortable with front-end code can continue iterating on the same branch and commit directly, without switching between design and development tools.

Next steps

• AI Slides: Create presentations.

• Writing: Write and polish documents with AI collaboration.