The prompt
Create a [COMPONENT TYPE] component for a [TYPE OF PRODUCT] with these exact specifications:
## Visual Design
- Style: [minimal / bold / corporate / playful / dark mode native]
- Primary color: [color or "use Tailwind's default palette"]
- Typography: [modern sans-serif / editorial serif / monospace accents]
- Border style: [sharp corners / subtle rounded / fully rounded pills]
- Spacing: generous whitespace, nothing cramped
## Component Requirements
- Component name: [ComponentName]
- Props: [list all configurable props with their types and defaults]
- States: [default / hover / active / loading / error / disabled / empty]
- Responsive breakpoints: mobile-first, breakpoints at sm (640px) and lg (1024px)
## Interactions
- [Describe hover effects]
- [Describe click/tap behavior]
- [Describe transitions and animations — keep them subtle]
- [Describe any keyboard accessibility needed]
## Content
[Describe what text, icons, or data appears in the component]
## Technical Requirements
- React functional component with TypeScript
- Tailwind CSS only — no custom CSS files
- shadcn/ui base components where appropriate
- No external icon libraries — use Lucide React
- Accessible: proper ARIA labels, keyboard navigable, semantic HTML
## Example Usage
```tsx
<[ComponentName]
[prop1]="[example value]"
[prop2]="[example value]"
/>
```
How to use this
1
Settings → Custom Instructions → paste into "How should ChatGPT respond?"
2
Or create a custom GPT with this as the system prompt
3
API → use as the system role message
Pro tips
→Reference real sites: "similar to Stripe's pricing card but simpler"
→Ask for dark mode variant immediately after: "Now give me the dark mode version"
→Request multiple variants: "Give me 3 variations of this card with different layouts"
→Export the component and drop it into any Next.js + Tailwind project — zero cleanup