Example of a Prompt

Agent: Document Agent

<aside> <img src="notion://custom_emoji/be6005d7-8302-4c8e-93fe-03d0d3d71970/12f3c107-d7a8-8009-8054-007a9b09b0b8" alt="notion://custom_emoji/be6005d7-8302-4c8e-93fe-03d0d3d71970/12f3c107-d7a8-8009-8054-007a9b09b0b8" width="40px" />

Referring to the @Member Information Update use case document, design the necessary front-end screens and output them according to the @VB Screen Design Document format.

</aside>

Template

# 1. Basic Information

- Screen ID:
- Screen Name:
- Function Overview:

## 2. Screen Layout

### 2.1 Screen Structure

Based on the following legend, please specify each object name using concrete file names or form/control names (e.g., Form1, btnSearch, dgvCustomer).

```mermaid
%%{init: {'theme': 'neutral', 'themeVariables': { 'fontFamily': 'Meiryo', 'fontSize': '15px'}}}%%
flowchart TD
    A["Form/Window"] --> B["Control (CommandButton/ TextBox/ ComboBox, etc.)"]
    B --> D["Form Element (TextBox, CheckBox, etc.)"]
    D --> E["Data Display (ListView, DataGridView, etc.)"]
    E --> G["Database"]
    B -.-> F["Action (Button/Event)"]
    F --> H["API"]
    C["Branch Condition"] --> B
    classDef page fill:#d0d1ff,stroke:#333,stroke-width:2px,color:#000
    classDef component fill:#ffe680,stroke:#333,stroke-width:2px,color:#000
    classDef condition fill:#c2e0c2,stroke:#333,stroke-width:2px,color:#000
    classDef form fill:#ffcce0,stroke:#333,stroke-width:2px,color:#000
    classDef data fill:#c6c6ff,stroke:#333,stroke-width:2px,color:#000
    classDef action fill:#ffb3b3,stroke:#333,stroke-width:2px,color:#000
    classDef database fill:#bce2e8,stroke:#333,stroke-width:2px,color:#000
    classDef api fill:#bce2e8,stroke:#333,stroke-width:2px,color:#000
    class A page
    class B component
    class C condition
    class D form
    class E data
    class F action
    class G database
    class H api
    style A text-align:center
    style B text-align:center
    style C text-align:center
    style D text-align:center
    style E text-align:center
    style F text-align:center
    style G text-align:center
    style H text-align:center

3. Input Item Definition

3.1 Form Item List

3.2 Input Rules & Validation (VB Specification)

Text Input

• Allowed Characters:
• Minimum Characters:
• Maximum Characters:
• Half-width/Full-width:
• Permitted Symbols:
• Whitespace Allowed:
• Prohibited Items:

Numeric Input

• Input Range:
• Decimal Allowed:
• Decimal Places:
• Unit:

Selection Item (ComboBox/ListBox, etc.)

• List of Choices:
• Initial Selection:
• Selection Required:

4. Button & Action Definition

4.1 Button List

4.2 Action Definition

(Sample: btnSearch\_Click)

• Event: On Click
• Process: 1. Input Check 2. Data Retrieval 3. Result Display

5. Error & Message Definition

5.1 Validation Error

5.2 System Error

6. Backend Integration Specification

6.1 Data Destination Definition

• Destination URL/Connection Name:
• Method (REST API/Direct DB/Other):
• Remarks:

6.2 List of Items to Send

• Destination API/Database Name

7. Other Notes

7.1 Screen Transition

• Previous Screen:
• Next Screen:

## Output Image

```markdown
# 1. Basic Information

- Screen ID: MemberInfoEdit\\_v2
- Screen Name: Member Information Update Screen
- Function Overview:
  A screen designed to allow logged-in member users to safely and reliably change or update their "Email Address," "Password," and "Profile Image." Includes validation, error notifications, user authentication, API integration, and security measures.

***

## 2. Screen Layout

### 2.1 Screen Structure

```mermaid
%%{init: {'theme': 'neutral', 'themeVariables': { 'fontFamily': 'Meiryo', 'fontSize': '15px'}}}%%
flowchart TD
    A["MemberInfoEditForm_v2"]
    B["txtEmail (Email Address Input/Display)"]
    C["txtCurrentPassword (Current Password)"]
    D["txtNewPassword (New Password)"]
    E["txtConfirmPassword (Password Re-entry)"]
    F["imgProfile (Current Profile Image Display)"]
    G["fileProfileUpload (Image Upload/Selection)"]
    H["btnSave (Save)"]
    I["btnCancel (Cancel)"]
    J["lblErrorMsg (Various Error/Result Notifications)"]
    K["API: Member Information Update"]
    L["lblSessionError (Session Timeout Notification)"]
    A --> B
    A --> C
    A --> D
    A --> E
    A --> F
    A --> G
    A --> H
    A --> I
    A --> J
    J --> L
    H -.-> K
    G -.-> K

3. Input Field Definitions

4. Button Definitions

5. Message/Notification Areas

• lblErrorMsg: Individual field errors, common errors (communication failure/server error/input deficiency), notification upon successful processing.
• lblSessionError: Session timeout, prompts user to login screen.

6. API Integration

• Submission API: Member Information Update API (supports individual/simultaneous updates of email address, password, and profile image)
• Validation is required on both frontend and server sides

7. Security Requirements

• CSRF/XSS protection (token management, input sanitization, etc.)
• All input values must be sent encrypted
• Operations allowed only during valid session
• Consider email notification for important changes

8. Remarks

• Immediate error display beside fields for incomplete/invalid input
• Only common error area notification for system failures
• Strict adherence to all business flow/specifications for "Member Information Update" use case