Design Professional UI
AI prompt to create beautiful, polished user interfaces for NaaP plugins with modern design patterns.
When to Use This#
Use this prompt when:
- You have a working plugin but the UI looks basic
- You want to redesign a plugin's interface to be more professional
- You're starting fresh and want great design from the beginning
- You want to match a specific design style (dashboard, SaaS, minimal, etc.)
The Prompt#
Markdown
| 1 | # Task: Design a Professional UI for a NaaP Plugin |
| 2 | |
| 3 | ## Context |
| 4 | |
| 5 | I have a NaaP plugin that needs a professional, modern UI redesign. |
| 6 | The plugin runs inside the NaaP shell (a React dashboard application). |
| 7 | |
| 8 | Technical stack: |
| 9 | - React 18+ with TypeScript |
| 10 | - Tailwind CSS for styling |
| 11 | - Lucide React for icons (import { IconName } from 'lucide-react') |
| 12 | - The shell provides dark/light theme via useThemeService() hook |
| 13 | - The shell provides user info via useAuth() hook |
| 14 | - Available CSS variables from the shell theme: |
| 15 | --background, --foreground, --card, --card-foreground, --primary, |
| 16 | --primary-foreground, --secondary, --muted, --muted-foreground, |
| 17 | --accent, --border, --ring, --destructive |
| 18 | |
| 19 | ## Current Plugin Description |
| 20 | |
| 21 | [DESCRIBE YOUR PLUGIN AND ITS CURRENT STATE — for example: |
| 22 | - "A task tracker with a list of tasks, add/edit forms, and filters" |
| 23 | - "A dashboard showing network analytics with charts" |
| 24 | - "A settings page with forms for configuring integrations" |
| 25 | ] |
| 26 | |
| 27 | ## Design Requirements |
| 28 | |
| 29 | Redesign the UI with these principles: |
| 30 | |
| 31 | 1. **Layout**: Clean, spacious layout with proper visual hierarchy |
| 32 | - Use a top section for page title, description, and primary actions |
| 33 | - Main content area with clear sections |
| 34 | - Use cards for grouping related content |
| 35 | - Proper spacing (gap-4/6 between sections, p-4/6 for card padding) |
| 36 | |
| 37 | 2. **Typography**: Clear hierarchy |
| 38 | - Page title: text-2xl or text-3xl, font-bold |
| 39 | - Section headings: text-lg, font-semibold |
| 40 | - Body text: text-sm, text-muted-foreground |
| 41 | - Labels: text-xs, text-muted-foreground, uppercase tracking-wider |
| 42 | |
| 43 | 3. **Colors**: Use the shell's CSS variables |
| 44 | - Primary actions: bg-primary text-primary-foreground |
| 45 | - Secondary actions: border border-border hover:bg-muted |
| 46 | - Cards: bg-card rounded-xl border border-border shadow-sm |
| 47 | - Status badges: Colored with low opacity backgrounds |
| 48 | (bg-emerald-500/10 text-emerald-500 for success, etc.) |
| 49 | |
| 50 | 4. **Interactive Elements**: |
| 51 | - Buttons with hover/active states and transitions |
| 52 | - Smooth transitions (transition-all duration-200) |
| 53 | - Hover effects on cards and list items |
| 54 | - Loading skeletons (animated pulse placeholders) |
| 55 | - Empty states with illustrations or icons |
| 56 | |
| 57 | 5. **Responsive**: Works on mobile (sm:), tablet (md:), and desktop (lg:) |
| 58 | |
| 59 | 6. **Dark Mode**: Must work in both light and dark themes |
| 60 | - Use Tailwind's dark: prefix where needed |
| 61 | - Rely on CSS variables for automatic theme switching |
| 62 | - Test contrast in both modes |
| 63 | |
| 64 | 7. **Data Display Patterns**: |
| 65 | - Stats: Row of metric cards (icon + number + label + trend) |
| 66 | - Tables: Rounded borders, striped rows, sticky headers |
| 67 | - Lists: Cards with hover states, badges for status |
| 68 | - Forms: Labeled inputs with helper text and validation states |
| 69 | - Charts: Clean, minimal style with proper legends |
| 70 | |
| 71 | ## Components to Generate |
| 72 | |
| 73 | Create these reusable components: |
| 74 | |
| 75 | - PageHeader — title, description, action buttons |
| 76 | - StatsCard — icon, metric value, label, trend indicator |
| 77 | - DataTable — sortable columns, pagination, row actions |
| 78 | - StatusBadge — colored badge for different statuses |
| 79 | - EmptyState — icon, title, description, action button |
| 80 | - LoadingSkeleton — animated placeholder for each component |
| 81 | - SearchInput — search bar with icon and clear button |
| 82 | - FilterBar — filter chips/dropdowns |
| 83 | |
| 84 | ## Quality Standards |
| 85 | |
| 86 | - All components must be TypeScript with proper types |
| 87 | - Each component in its own file in a components/ directory |
| 88 | - Use Tailwind CSS only (no inline styles, no CSS modules) |
| 89 | - Smooth animations and transitions |
| 90 | - Accessible (proper aria labels, keyboard navigation, focus states) |
| 91 | - Include a dark mode screenshot description in comments |
| 92 | |
| 93 | Generate complete, production-ready component code. |
How to Customize#
Replace:
[DESCRIBE YOUR PLUGIN]— describe what your plugin shows and does- Add or remove items from "Components to Generate" based on your needs
- Add a "Design Reference" section if you want a specific style:
Markdown
| 1 | ## Design Reference |
| 2 | |
| 3 | I want the UI to look similar to: |
| 4 | - Linear.app (minimal, clean, fast-feeling) |
| 5 | - Vercel Dashboard (dark, modern, metric-focused) |
| 6 | - Notion (content-first, spacious, neutral colors) |
| 7 | - Stripe Dashboard (data-rich, tables and charts) |
Follow-Up Prompts#
Add Animations#
Markdown
| 1 | Add smooth micro-animations to the plugin UI: |
| 2 | - Fade-in on page load (opacity 0 → 1 with slight upward motion) |
| 3 | - Staggered list items (each card fades in 50ms after the previous) |
| 4 | - Button press feedback (scale down slightly on click) |
| 5 | - Smooth tab transitions |
| 6 | - Loading spinner with the NaaP primary color |
| 7 | Use Tailwind's animation utilities and CSS transitions. No external animation libraries. |
Add Data Visualization#
Markdown
| 1 | Add beautiful data visualizations to the plugin: |
| 2 | - Use the recharts library (import { LineChart, BarChart, PieChart, ... } from 'recharts') |
| 3 | - Style charts to match the shell theme (use CSS variable colors) |
| 4 | - Add a chart wrapper component that handles loading/empty states |
| 5 | - Charts should be responsive and resize with the container |
| 6 | - Include tooltips on hover with formatted values |
| 7 | - Add a time range selector (7d, 30d, 90d, 1y) |
Redesign to Match a Specific App#
Markdown
| 1 | Redesign the plugin UI to look like [APP_NAME]. Specifically: |
| 2 | - Match their color palette and spacing |
| 3 | - Use their layout patterns (sidebar nav, content area, etc.) |
| 4 | - Copy their data display style (cards, tables, metrics) |
| 5 | - Match their button and form input styling |
| 6 | But keep using Tailwind CSS and the shell's theme CSS variables for |
| 7 | dark/light mode compatibility. |