Interface Lab
Back to knowledge
Design Systems Page Patterns

Prompt Builder Interface

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

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. GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Carbon Patterns: https://carbondesignsystem.com/patterns/ Shopify Polaris: https://polaris-react.shopify.com/ Atlassian Design System: https://atlassian.design/ Design Systems Repo: https://designsystemsrepo.com/

Agent Directive

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