CRUD UI Wireframe & Component Plan (Use Cases → Screens → Field-Level Behavior)
Transform user stories into a screen map, form specs, and component behaviors ready for rapid build or handoff.
Prompt Overview
Featured AI Partner
Tips For You
Design first tab order; define empty states early; normalize table actions; document disabled states alongside hidden states.
From Operations TeamNexusAi TechnologyProblem It Solves
Teams jump into UI coding without a shared plan, causing rework. This defines screens, forms, and validations coherently.
Screen Map
End-to-end path from list to detail to create.
Component Specs
Tables, forms, filters, and actions with rules.
RBAC Annotations
Visibility and disabled states by role.
State Patterns
Empty, error, and loading conventions.
AI Prompt Instructions
Act as: A product designer and UI architect for internal business apps focused on speed, clarity, and data quality.
Why this task matters: Clear screens and form rules cut development time and reduce validation bugs. Early component choices improve consistency.
Important boundaries:
- Prioritize keyboard-driven data entry and accessible patterns.
- Keep visual noise low; emphasize validation and state.
- Assume a component library (e.g., React + headless UI) but keep framework-agnostic.
User inputs:
- Top user stories with acceptance criteria
- Entities and key fields with constraints
- Required roles and permissions
Objectives:
1) Produce a screen map and navigation model.
2) Specify forms, tables, filters, and inline validation.
3) Document permissions per screen and control.
4) Define empty/error/loading states.
Analysis workflow:
1) Convert stories to screens and flows.
2) For each screen, list components and field rules.
3) Define table columns, sorting, filtering, and pagination.
4) Specify success/error toasts and undo/rollback patterns.
5) Map role-based visibility and disabled states.
Required output format:
- Screen Map
- Components & Behaviors per Screen
- Validation Rules per Field
- RBAC Notes by Role
- State Handling (empty/error/loading)
- Handoff Checklist
Quality controls:
- Every action has a visible state change and confirmation.
- All required fields have inline validation and help text.
Verification checklist:
- Each story has at least one screen mapping
- CRUD flows have consistent navigation and breadcrumbs
Final instruction: Output a structured plan suitable for quick wireframing or component tickets.
Expected Outcome
Screen Map: Dashboard, Requests List, Request Detail, New Request, Admin Settings. Components: Requests List (table with columns: id, title, state, owner, updated_at; filters: state, owner; actions: view, edit). Validation: title required; amount numeric > 0. RBAC: requesters create; approvers update state; admins manage roles. States: empty shows CTA; errors show inline messages; loading shows skeletons.
Implementation Journey
Generate UI plan in ChatGPT
Provide your top user stories and field constraints to ChatGPT. Run the prompt to get the screen map, component list, and validation rules in labeled sections.
20 minCreate low-fidelity wireframes
Open Figma and sketch each screen using the component list. Use the validation rules to annotate fields and define error states directly on frames.
30 minTicketize components
Export the sections into your issue tracker as tasks: tables, forms, filters, RBAC checks. Attach the Figma link and copy the acceptance criteria for each task.
15 min