The current prompt covers the implemented layout, project and task flows, time tracking, schedule, responsive behavior, and acceptance checks.
Build “A calmer workspace”, a responsive, working project-management dashboard for a fictional studio lead. Use the supplied browser capture of the coded Acme Studio dashboard as optional visual context; build the interface using the requirements below. The visitor should understand project health, find a project, review its next steps, assign an owner, update status, complete tasks, track focus time, and inspect today’s schedule. Use fictional local data only; no authentication, external services, or persistence.
VISUAL DIRECTION
Use Inter, charcoal page and panel surfaces, subtle gray borders, restrained corner radii, and blue #0088F6 for primary actions and selected states. Reserve teal for completed work and amber for upcoming work, with text labels alongside color. Use a fictional Acme Studio wordmark with a simple original geometric icon, with an original identity. Maintain four summary metrics, compact tracker, project overview, schedule, and activity chart. Use CSS and native code for the whole interface; do not display a screenshot as a functioning screen. In project, status and editing selects, inset the visual chevron 12 px from the right edge and reserve 36 px of trailing text padding while retaining native select behavior. Use actual local portrait photographs for Maya Chen, Alex Morgan and Sam Okafor in owner cells, the workspace profile and meeting participants; never substitute initials for the finished people avatars. Use distinct original geometric client marks instead of project initials tiles. Do not import source-design photographs or logos. Credit the original visual inspiration separately from this original implementation brief.
LAYOUT AND NAVIGATION
On desktop, show one sidebar, then a workspace with a heading and New project action, four aligned metric cards, a wide main column, and a narrower schedule/activity column. Sidebar destinations are Overview, Projects, Tasks, Calendar; each must show a meaningful corresponding view. Keep the overview focused rather than inventing inactive settings/messages/files links. On a 390 px phone, move navigation into a compact top row, arrange metrics in two columns, show projects as stacked rows, and place the schedule and activity below. Avoid horizontal page overflow. Keep all relevant actions available on phones.
FICTIONAL DATA AND METRICS
Provide six projects: Atom Digital Agency (Maya Chen, In progress), Yoga Studio (Alex Morgan, In progress), Medical Clinic (Sam Okafor, Upcoming), Clothing Store (Maya Chen, In progress), Delicious Food Store (Alex Morgan, Completed), and Northstar Journal (Sam Okafor, Upcoming). Give each a category, original client mark, date, and two or three realistic task descriptions. Initial counts are 1 completed, 3 in progress, 2 upcoming, 6 total. Seed 14 tasks, 5 complete and 9 open. Derive all summary metrics, task progress, task totals, completion percentage, and chart data from current state. Do not invent trend percentages or use sample historical numbers that disagree with displayed records. Project lifecycle status is explicitly set by the user; task completion does not automatically change lifecycle status.
PROJECT DISCOVERY AND EDITING
Search by project name, category, and owner, ignoring case. Combine all non-empty search terms and intersect search with a visible status filter. Metric cards open Projects with the corresponding status filter. Display a useful no-results state with Clear filters; do not create a dead end. Opening a project from its name, row action, or schedule opens a labelled native modal. Preserve the current search/filter when the modal closes. The panel shows name/category/date, editable owner and lifecycle status, task checkboxes, and a form to add one next step. Owner choices are Maya Chen, Alex Morgan, Sam Okafor. Every change immediately updates matching overview, task, and chart views. Clearly distinguish project lifecycle state from task progress.
New project opens a focused form with one required project name. Reject empty or whitespace-only names; keep names to 70 characters. Show a useful associated error and focus the field. A valid project is created once as Upcoming, owned by Alex Morgan, with no tasks, and opens its details panel. Do not add empty task rows. Adding a task requires non-whitespace text, limited to 100 characters. Task and project names render as text. All actions are local and reversible by Reset demo.
TASKS AND SCHEDULE
Tasks shows next steps across matching projects, with Open, Completed, and All completion filters. Checking a task immediately updates its project progress and aggregate activity. Keep the empty-state recovery useful when a selected completion filter has no matches. Schedule is a fixed fictional Friday, 23 October 2026: Project overview at 09:00, Team check-in at 10:30, Discovery kick-off at 13:00. Selecting an event updates its description and participants. Project-related events open the appropriate project. Team check-in opens the Tasks view. Calendar shows a broader selectable agenda with the same event details. No calendar synchronization or live-date claim is needed.
TIME TRACKING
Select any current project, start a real elapsed timer, pause/resume, and reset it. Prevent project switching while running. Use elapsed wall-clock differences rather than counting interval callbacks so background-tab delays do not lose elapsed seconds. Selecting a different project while paused resets the current timer to zero; do not imply separate saved time logs or billing. Display HH:MM:SS. Timer state and project changes reset on refresh; cleanup all intervals when unmounted.
ACCESSIBILITY AND STATE
Use semantic navigation, headings, a table on desktop, native labelled controls, accessible names on icon actions, visible keyboard focus, status text, and text alternatives for the activity chart. The dialog must trap focus with native modality, close with Escape or its close button, and restore focus to the opening action. Preserve filters behind the dialog. Announce creation, status changes, and reset without announcing the timer every second. Respect reduced motion. Reset restores all six original projects/tasks, Overview, all filters, selected schedule, and a paused zero timer. Keep all values in memory with no requests, storage, analytics, or accounts.
ACCEPTANCE AND PRESENTATION
A reviewer can find Atom by typing its owner, open it, update status and owner, mark a task done, and see coherent counts and progress after closing without losing filters. They can create a project, add a task, complete it in Tasks, choose a schedule event, start/pause/reset the timer, recover from no matches, and reset the demo. Test desktop and 390 px phone. Keep screenshot/gallery framing outside the application; capture the actual default dashboard without clipping the sidebar or adding fake browser controls.
PROVENANCE
Original implementation and expanded prompt: UI Prompts. Broader visual inspiration: Elinext’s Project Management Platform (https://dribbble.com/shots/20170645-Project-Management-Platform). People imagery is stock photography used for fictional identities. Review the result with real content before adapting it to a live product.
Scroll to read. Copy includes the full prompt.