UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Design Systems Page Patterns

Prompt Builder Interface

Prompt Builder Interface turns a frequent interface judgment into an executable constraint before generation.

aipromptworkflow

Design Principle

Prompt builders should help users express goal, context, constraints, and output format instead of only offering a large textarea.

Principle Prompt builders should help users express goal, context, constraints, and output format instead of only offering a large textarea.

Design action Split goal, audience, assets, constraints, tone, format, and examples into editable sections while keeping raw prompt preview.

Examples Positive example: AI design, copy, code, image, and agent workflows need reusable inputs. Counterexample: There is only a blank prompt field with no structured guidance.

Apply when AI design, copy, code, image, and agent workflows need reusable inputs. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries.

Agent Directive

Split goal, audience, assets, constraints, tone, format, and examples into editable sections while keeping raw prompt preview.

Apply When

  • AI design, copy, code, image, and agent workflows need reusable inputs.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • There is only a blank prompt field with no structured guidance.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Design Systems Page Patterns
Quality
86%
Version
v1
Published
6/6/2026