Using Natural Language

Screenshot specification for the AI Widget Customizer:

Scene:

• Location: Bundle editor page
• The AI prompt bar is visible, docked at the bottom of the screen with the sparkle icon on the left.

Key UI Elements to Capture:

1. AI Prompt Bar (Bottom of Screen)

• Sparkle icon on the left.
• Input field containing a short, clear example prompt, e.g.: Make the background dark gray.
• Send/submit control visible (e.g., arrow icon or button).

1. Chat Message Area (Above Prompt Bar)

• A user message bubble showing the typed prompt: Make the background dark gray.
• An AI response bubble directly above it that includes:
• A short explanation line, e.g.: Here’s a preview of the style changes I’ll apply:.
• The patch preview diff block.

1. Patch Preview Diff Block

• Clearly styled as a diff/preview panel.
• Must show, for at least 2–3 properties:
• Property path (e.g., styles.background.color, styles.text.color, styles.button.borderRadius).
• Before value (e.g., #FFFFFF, #222222, 8px).
• After value (e.g., #1F1F1F, #FFFFFF, 16px).
• Use a clear, tabular or two-column layout so the comparison is obvious:
• Left column: Before
• Right column: After
• Each row labeled with the property path.

1. Apply / Dismiss Controls (Near Diff)

• Two primary action buttons clearly visible and labeled:
• Apply (visually emphasized as the primary action).
• Dismiss (secondary style).
• Buttons should be visually associated with the diff preview (e.g., directly below or to the right of the diff panel).

1. Contextual Page Elements (Background)

• The main bundle widget preview visible in the editor above the chat area, so it’s clear this is a bundle editor.
• Some surrounding editor UI (e.g., side panel or header) to anchor the screenshot in the product, but not so dominant that it distracts from the prompt bar and diff.

Composition & Layout Notes:

• The screenshot should be taken at a resolution where the bottom ~30–40% of the screen clearly shows:
• The prompt bar.
• The latest user + AI messages.
• The full patch preview diff.
• The Apply and Dismiss buttons.
• Ensure the conversation scroll position is such that the most recent interaction (prompt + diff) is fully visible without cropping.
• Avoid blurring or cropping any of the key labels (Before, After, property paths, Apply, Dismiss).

Copy & Labels (Suggested Text):

• User message: Make the background dark gray.
• AI explanation line: Here’s a preview of the style changes I’ll apply:.
• Diff headers: Property, Before, After.
• Example rows:
• styles.background.color | #FFFFFF → #1F1F1F
• styles.text.color | #222222 → #FFFFFF
• styles.button.borderRadius | 8px → 16px
• Buttons: Apply, Dismiss.

Goal of the Screenshot:

Visually demonstrate that:

• The AI prompt bar accepts a natural language prompt.
• The AI responds with a patch preview diff showing property paths, before/after values.
• The user can explicitly choose to Apply or Dismiss the proposed changes before they affect the widget.