A busy table, with room to act.

Full pagesClarityResponsive

By UI Prompts editorial

A busy table, with room to act. — revised design

Before: earlier UI Prompts version · After: current implementation

The prompt

Real context.
Useful constraints.

A complete brief for this working fictional example.

TASK AND PERSON A studio operations lead needs to find invoices, select several and archive them without losing the filter. DESIGN AND CONTENT Build a fictional invoice management screen for Ledger Studio with a muted teal presentation canvas, pale navigation rail, white work area and teal #246369 accent, following the credited Nadia Kapyrina invoice reference. Use compact Inter typography, thin rules, softly grouped summary values and original geometric client symbols. Use a real bundled portrait for the fictional workspace owner. Sidebar All invoices, Pending, Paid and Overdue buttons drive the same status filter as the toolbar. Show four summary values and six realistic invoice rows: client, invoice ID, amount, status and due date. Use varied names, paid and pending records, and an overdue invoice. Keep numbers aligned and statuses textual. BEHAVIOR AND STATES Search matches client and invoice ID. A status filter intersects search. Checkboxes select rows; Select visible affects only filtered rows and shows a mixed state for partial selection. A contextual bar shows the selection count and Archive selected. Archiving removes selected rows and clears selection while preserving filters. Announce the result and offer Undo. Show a useful no-matches recovery action. DELIVERY Deliver a working responsive web interface, not a static image. Use local fictional data and in-memory state. No authentication, analytics, remote data requests, payments or persistent storage. Serve any bundled fonts and images locally. Include an obvious return-to-prompt link and clearly identify this as a demonstration. Keep every visible navigation item or action useful; do not add decorative fake controls. ACCESSIBILITY AND RESPONSIVENESS Use semantic headings, labelled inputs and real buttons. Touch controls must be at least 44 px high. Provide visible keyboard focus and announce updates with a status region. Do not rely only on color. Dialogs need a visible title, Escape dismissal, focus containment and focus restoration. At 390 px, preserve the reading order and all actions without horizontal page overflow. Respect reduced motion. ACCEPTANCE On desktop and a 390 px phone, complete the primary task described above, exercise an invalid or empty state, recover without losing unrelated inputs, and restore its initial state using the reset control where provided, or by refreshing. Verify displayed calculations and selected states against the fictional data. Report exactly what was checked; do not claim usability improvements or reliable independent regeneration. ASSETS AND OPTIONAL VISUAL REFERENCES Bundled assets: /images/patterns/assets/portrait-joseph-gonzalez.avif. If building outside this repository, supply those files with the prompt or use suitable licensed replacements. Draw the described product artwork in code. The written requirements define the scope; reference links are optional visual context. Nadia Kapyrina: https://dribbble.com/shots/27051773-Invoice-Management-Dashboard Joseph Gonzalez / Unsplash: https://unsplash.com/photos/man-wearing-white-v-neck-shirt-iFgRcqHznqg

Scroll to read. Copy includes the full prompt.

Inputs, credit and review

INPUTS

Use the bundled example assets where specified. Fictional data and source credits accompany the brief.

CREDIT

Original brief and implementation: UI Prompts editorial. Visual references credited alongside the example.

REVIEW

Interactive example. Changes stay in memory and reset on refresh.

The job to be done

A studio operations lead needs to find invoices, select several and archive them without losing the filter.

What to explore

Intersect invoice search with the sidebar and toolbar status filters.
Select visible rows with checked and mixed states, then archive selected records.
Preserve filters and offer Undo after archiving.

Make the brief yours

Ledger Studio starts with six fictional GBP invoices. Summary amounts are explicitly labelled as a fictional November snapshot; the live row counts and selection reflect the current local list. Use the bundled owner portrait and original client symbols.

Replace the fictional product and content with your own. Preserve the task, states and acceptance checks that matter to your use case.

Visual research & credit

Reference studied directly: muted teal presentation, pale navigation rail, white invoice work area, compact table and predictable bulk actions. Ledger uses original fictional invoices, symbols and local archive/undo behavior. View reference by Nadia Kapyrina

Stock portrait used as a fictional member avatar, not a testimonial or endorsement. View reference by Joseph Gonzalez / Unsplash

Original UI Prompts code, fictional branding and editorial brief. Reference designers did not write or endorse this prompt. This is an interpretation of visual patterns, not a reproduction of their product or assets.

A working example, with clear limits. State stays in memory and resets on refresh. No real account, upload, payment or booking is created. Independent prompt regeneration and usability outcomes have not been verified.

Real context.
Useful constraints.

A complete brief for this working fictional example.

Scroll to read. Copy includes the full prompt.

Inputs, credit and review

INPUTS

Use the bundled example assets where specified. Fictional data and source credits accompany the brief.

CREDIT

Original brief and implementation: UI Prompts editorial. Visual references credited alongside the example.

REVIEW

Interactive example. Changes stay in memory and reset on refresh.

Make the brief yours

Replace the fictional product and content with your own. Preserve the task, states and acceptance checks that matter to your use case.

Visual research & credit

Stock portrait used as a fictional member avatar, not a testimonial or endorsement. View reference by Joseph Gonzalez / Unsplash