Build fluency in the vocabulary of AI-generated starting UI layouts within a design system.
0 / 5 completed
1 / 5
At standup, a designer mentions typing a description of a screen, like a login page, and getting an initial editable UI layout generated automatically as a starting point. What is this capability called?
AI-generated first-draft UI layout produces an initial, editable interface design, like a login screen, directly from a text description, giving the designer real, editable layers and components to refine rather than starting from a completely blank frame. This speeds up the early exploration phase of a design, especially for common, well-understood UI patterns. The generated draft is meant as a starting point that still benefits from a designer's refinement to match specific brand and usability requirements.
2 / 5
During a design review, the team wants a generated draft to automatically use the components already defined in the project's design system rather than generic, unstyled elements. Which capability supports this?
Design-system-aware generation produces a draft that uses the actual components already defined in the project's design system, like a specific button or input style, rather than generic elements disconnected from the team's established design language. This significantly reduces the manual work of replacing generic generated elements with the correct branded components afterward. It requires the generation tool to have access to, and awareness of, the project's specific design system.
3 / 5
In a code review, a dev notices a generated draft includes layers and groups organized in a structure consistent with the team's naming and layer organization conventions. What does this represent?
Convention-consistent generated file structure organizes a draft's layers and groups following the team's established naming and organization conventions, rather than producing an unstructured, hard-to-navigate file that a designer then has to manually clean up. This makes a generated draft immediately usable within the team's existing workflow rather than requiring significant reorganization before it's practical to build on. It reflects the generation tool being tailored to fit into an established team process rather than producing generic, one-size-fits-all output.
4 / 5
An incident report shows a generated UI draft was shipped with an accessibility issue, like insufficient color contrast, that wasn't caught before development began. What practice would prevent this?
Running an accessibility check, like verifying color contrast, on a generated draft before it moves into development catches an issue the generation tool may not reliably account for by default. Assuming generated output is automatically accessible skips a review step that applies just as much to AI-generated drafts as to any hand-designed screen. This accessibility review shouldn't be treated as optional simply because the draft originated from a generative tool rather than being manually designed from scratch.
5 / 5
During a PR review, a teammate asks why the design team uses AI-generated first drafts for common screen types instead of designing every screen manually from a blank frame. What is the reasoning?
Manually designing every screen, including common, well-understood patterns like a login page, from a completely blank frame means re-deriving a layout structure that's fairly predictable for that screen type. AI-generated first drafts produce that starting layout quickly, letting the designer spend their time on refinement and the details specific to the actual product. The tradeoff is that the generated draft still needs a designer's judgment to ensure it truly fits the product's specific requirements and brand.