Build a polished command palette micro-interaction as a small standalone frontend prototype. The experience should show how a refined interface idea can move from design reference to working UI using simple AI-assisted development.
This is not a full product. It should be a focused, demo-ready component that feels premium, minimal, smooth, and easy to understand.
- Let users search across people, projects, and quick actions.
- Show grouped command results with clear section hierarchy.
- Support mouse hover and keyboard selection.
- Let users open or trigger the selected item.
- Include useful keyboard shortcut hints.
- Demonstrate smooth transitions, selected states, empty states, and small interaction details.
- Keep the implementation frontend-only with dummy data.
The prototype is intended for a short TikTok or LinkedIn demo aimed at designers, founders, and product builders. It should communicate craft quickly: the viewer should understand the interface within a few seconds and notice the polish through motion, spacing, hover behavior, and keyboard affordances.
- Use plain HTML, CSS, and JavaScript.
- Do not add a backend.
- Do not require authentication, persistence, or external data.
- Use static dummy data included in this PRD.
- Optional frameworks such as Next.js or Framer Motion should only be used if the project later expands beyond this standalone prototype.
The command palette should sit centered on a light neutral page background.
The palette contains:
- Search input header
- Recent people section
- Projects section
- Quick actions section
- Footer keyboard helper bar
The default visual direction:
- White panel background
- Soft border
- Large rounded corners
- Subtle shadow or depth
- Light gray page background
- Clear vertical spacing
- Muted secondary text
- Soft colored circular avatars and icons
- Visible selected row highlight
- Minimal icon usage
- The command palette is visible on page load.
- The search input is focused.
- All default grouped sections are visible.
- The first result,
Segun Adebayo, is selected by default.
The header must include:
- Search icon
- Placeholder text:
Start typing here... - Full-width text input
- No visible input border
- Divider below the header
Search behavior:
- Filter results as the user types.
- Search is case-insensitive.
- Search across names, emails, project titles, categories, project metadata, and quick action titles.
- Keep sections grouped, but hide any section with zero matching results.
- When the query is empty, show all default grouped sections.
- When there are no matches, show a polished empty state inside the results area.
Section label: Recent 4
Show four people rows. Each row must include:
- Colored avatar circle with initials
- Full name
- Email address
- Small document or message-style icon on the right
- Count number on the right
Rows:
- Segun Adebayo
- Julia Adams
- Michael Igbokwe
- Kendra Eze
Section label: Projects
Show three project rows. Each row must include:
- Soft colored icon circle
- Project title
- Project category
- Secondary metadata line
- Arrow-up-right icon on the right
Rows:
- Design system review
- User feedback analysis
- Prototype iteration
Section label: Quick actions
Show three quick action rows. Each row must include:
- Icon circle
- Action title
- Keyboard shortcut badge on the right
Rows:
- Create new project,
⌘ N - Project library,
⌘ J - Invite friends,
⌘ K
- Mouse hover updates the selected item.
- Arrow Down moves to the next visible item.
- Arrow Up moves to the previous visible item.
- Keyboard selection loops from the last visible item back to the first and from the first to the last.
- Enter opens or triggers the selected item.
- Escape closes the palette or visually marks it as dismissed.
- Option+L copies a link for the selected item.
- Command shortcuts shown in quick actions should trigger their matching action.
Because this is a prototype, opening or triggering an item does not need to navigate to a real route. It should provide visible feedback, such as:
- A temporary status message
- A subtle row confirmation state
- A lightweight toast-style message
The feedback should feel quiet and consistent with the command palette design.
The footer must stay visually separated from the results area with a top border.
Show keyboard hints:
↕Select↵Open⌥ LCopy linkESCClose
const commandPaletteData = {
recent: [
{
id: "person-1",
type: "person",
name: "Segun Adebayo",
email: "SegunAdebayo@acme.co",
initials: "SA",
color: "pink",
count: 3
},
{
id: "person-2",
type: "person",
name: "Julia Adams",
email: "JuliaAdams@acme.co",
initials: "JA",
color: "purple",
count: 5
},
{
id: "person-3",
type: "person",
name: "Michael Igbokwe",
email: "MichaelIgbokwe@acme.co",
initials: "MI",
color: "gray",
count: 2
},
{
id: "person-4",
type: "person",
name: "Kendra Eze",
email: "KendraEze@acme.co",
initials: "KE",
color: "green",
count: 4
}
],
projects: [
{
id: "project-1",
type: "project",
title: "Design system review",
category: "Assessment",
meta: "Reviewed by Liam Chen",
color: "blue"
},
{
id: "project-2",
type: "project",
title: "User feedback analysis",
category: "Research",
meta: "Modified by Zoe Patel",
color: "orange"
},
{
id: "project-3",
type: "project",
title: "Prototype iteration",
category: "Development",
meta: "Created by Marcus Lee",
color: "green"
}
],
actions: [
{
id: "action-1",
type: "action",
title: "Create new project",
shortcut: "⌘ N",
icon: "plus"
},
{
id: "action-2",
type: "action",
title: "Project library",
shortcut: "⌘ J",
icon: "library"
},
{
id: "action-3",
type: "action",
title: "Invite friends",
shortcut: "⌘ K",
icon: "user-plus"
}
]
};- The palette visually matches the provided Figma reference.
- Search filters all three content groups correctly.
- Empty state appears when no results match.
- Hover, Arrow Up, Arrow Down, Enter, Escape, and Option+L interactions work.
- Selected state is always visible when there are results.
- Footer hints remain separated and readable.
- The prototype runs locally without backend services.