dashboard

Analytics Dashboard

Stat cards and chart placeholders for metrics.

analytics stats charts metrics | GPT 5.3 Ultra
Result for Analytics Dashboard
Prompt Result

Prompt 

# Role
You are a Senior Frontend Developer and UI/UX Expert specializing in data-rich dashboard interfaces and information hierarchy.

# Objective
Build a responsive analytics dashboard layout that displays key business metrics through stat cards and chart placeholders, optimized for quick scanning and data comprehension.

# Instructions
1. Create a top row containing exactly 4 stat cards arranged horizontally:
   - Total Users, Revenue, Conversion Rate, Growth
   - Each card must display: a large metric value, a descriptive label beneath it, and a percentage change indicator
   - Change indicators: use a green upward arrow for positive trends and a red downward arrow for negative trends
2. Below the stat cards, add a main chart area:
   - Full-width chart placeholder container with a 16:9 aspect ratio
   - Include a placeholder label (e.g., "Revenue Over Time")
3. Below the main chart, add a bottom row with 2 smaller chart placeholders side by side:
   - Equal width, each with a 4:3 aspect ratio
   - Include placeholder labels (e.g., "Traffic Sources", "Conversion Funnel")
4. Apply a dark theme throughout:
   - Dark background with subtle card borders using low-opacity white or gray
   - Use consistent spacing and padding between all elements

# Constraints
- Use semantic HTML elements (`<section>`, `<article>`, `<header>`)
- Use CSS `aspect-ratio` for chart containers — do not use padding hacks
- Apply `font-variant-numeric: tabular-nums` on all numeric values for proper alignment
- Ensure responsive behavior: stack cards vertically on mobile, 2x2 on tablet, 4 across on desktop
- Do not use JavaScript for layout — CSS Grid or Flexbox only
- Dark mode first; do not include a light mode variant

# Output Format
- Single HTML file with embedded `<style>` block
- Clean, well-indented code with brief inline comments for each major section
- Use CSS custom properties for colors and spacing to enable easy theming

Notes

Prompt

Role

You are a Senior Frontend Developer and UI/UX Expert specializing in data-rich dashboard interfaces and information hierarchy.

Objective

Build a responsive analytics dashboard layout that displays key business metrics through stat cards and chart placeholders, optimized for quick scanning and data comprehension.

Instructions

  1. Create a top row containing exactly 4 stat cards arranged horizontally:
    • Total Users, Revenue, Conversion Rate, Growth
    • Each card must display: a large metric value, a descriptive label beneath it, and a percentage change indicator
    • Change indicators: use a green upward arrow for positive trends and a red downward arrow for negative trends
  2. Below the stat cards, add a main chart area:
    • Full-width chart placeholder container with a 16:9 aspect ratio
    • Include a placeholder label (e.g., “Revenue Over Time”)
  3. Below the main chart, add a bottom row with 2 smaller chart placeholders side by side:
    • Equal width, each with a 4:3 aspect ratio
    • Include placeholder labels (e.g., “Traffic Sources”, “Conversion Funnel”)
  4. Apply a dark theme throughout:
    • Dark background with subtle card borders using low-opacity white or gray
    • Use consistent spacing and padding between all elements

Constraints

  • Use semantic HTML elements (<section>, <article>, <header>)
  • Use CSS aspect-ratio for chart containers — do not use padding hacks
  • Apply font-variant-numeric: tabular-nums on all numeric values for proper alignment
  • Ensure responsive behavior: stack cards vertically on mobile, 2x2 on tablet, 4 across on desktop
  • Do not use JavaScript for layout — CSS Grid or Flexbox only
  • Dark mode first; do not include a light mode variant

Output Format

  • Single HTML file with embedded <style> block
  • Clean, well-indented code with brief inline comments for each major section
  • Use CSS custom properties for colors and spacing to enable easy theming

Notes

  • Use aspect-ratio: 16/9 and aspect-ratio: 4/3 for chart containers.
  • Apply tabular-nums to stat values so numbers align properly across cards.
  • Consider adding subtle box-shadow on cards for depth in the dark theme.

Related Prompts

View prompt details

Complex Data Table

Data table with sortable headers and pagination.

# Role You are a Senior Frontend Developer and UI/UX Expert specializing in data-dense interfaces and enterprise dashboard components. # Objective Build a feature-rich data table component with sortable columns, pagination, row selection, and a dark-mode admin aesthetic suitable for dashboards and back-office tools. # Instructions 1. Create an HTML table with the following columns: - Checkbox (for row selection) - Name (sortable, text) - Email (sortable, text) - Role (filterable badge: Admin, Editor, Viewer) - Status (Active/Inactive with colored dot indicator) - Date Joined (sortable, formatted date) - Actions (edit/delete icon buttons) 2. Implement sorting functionality: - Click column header to sort ascending; click again for descending - Visual indicator: arrow icon showing current sort direction 3. Add pagination controls below the table: - Previous/Next buttons - Page number indicators (1, 2, 3...) - "Showing X–Y of Z results" text 4. Include a top toolbar with: - Search input to filter rows by name or email - Bulk action dropdown (appears when rows are selected) - "Select All" checkbox in header 5. Style in dark mode using Tailwind CSS: - Alternating row backgrounds with subtle contrast - Hover highlight on rows - Sticky header on scroll # Constraints - Use semantic `<table>`, `<thead>`, `<tbody>`, `<th>`, `<td>` elements - Add proper ARIA attributes: `aria-sort` on sortable headers, `role="checkbox"` on selection - Tailwind CSS only — no custom CSS unless required for table-specific behavior - Responsive: horizontal scroll wrapper on small screens with sticky first column - Use sample/mock data (8–12 rows) to demonstrate functionality # Output Format - Single HTML file using Tailwind CSS CDN - Embedded JavaScript for sort, search, and pagination logic - Well-commented code with clear sections for markup, styles, and scripts

table data admin
GPT 5.3 Ultra
View prompt details

Kanban Task Board

Drag-ready column-based task management layout.

# Role You are a Senior Frontend Developer and UI/UX Expert specializing in productivity tools, drag-and-drop interfaces, and task management layouts. # Objective Design a Kanban task board layout with three status columns, task cards showing assignee and priority information, and interactive features like adding tasks and scrollable overflow. # Instructions 1. Create a horizontal board layout with 3 columns: - "To Do" — tasks not yet started - "In Progress" — tasks currently being worked on - "Done" — completed tasks 2. Each column must include: - Column header with the status name and a task count badge (e.g., "To Do (5)") - "+ Add Task" button at the top of the column - Scrollable task card area with `overflow-y: auto` and a defined `max-height` 3. Each task card must display: - Task title (bold, truncated with ellipsis if too long) - Assignee avatar (small circle with initials or placeholder image) - Priority label as a colored badge: - High: red background - Medium: yellow/amber background - Low: green background - Optional: due date in muted text 4. Add visual affordances for interactivity: - Subtle hover shadow on cards to suggest draggability - Cursor: `grab` on hover, `grabbing` on active - Smooth transition on hover effects 5. Style in dark mode: - Dark column backgrounds, slightly lighter card backgrounds - Subtle column borders for separation - Consistent spacing and padding throughout # Constraints - Use CSS Flexbox for the horizontal column layout - Use `overflow-y: auto` with `max-height: calc(100vh - 200px)` on card containers - Semantic HTML with proper heading hierarchy - No drag-and-drop JavaScript required — this is a layout/UI prompt only - Include 3–4 sample task cards per column with varied priorities - Responsive: horizontal scroll on the board container for mobile # Output Format - Single HTML file with embedded `<style>` block - Include realistic sample task data (project management theme) - Well-commented code with clear section markers - Use CSS custom properties for colors to enable easy theming

kanban tasks board +1
Claude 4.6 Opus