UI Component Generation
Gives Bolt explicit design tokens, interaction specs, and accessibility requirements so the component is production-ready without multiple revision rounds.
Prompt
Create a {{component_name}} component with the following specs:\n\nVisual design:\n- {{design_style}} aesthetic\n- Rounded corners (8px border radius)\n- Subtle shadow on hover\n- Smooth transitions (200ms ease)\n\nFunctionality:\n- {{interaction_1}}\n- {{interaction_2}}\n- Keyboard accessible (Tab, Enter, Escape)\n- Loading and empty states\n\nProps: {{prop_list}}\n\nUse TypeScript. Export as default. Include JSDoc comments for each prop.
Variables to customize
{{component_name}}{{design_style}}{{interaction_1}}{{interaction_2}}{{prop_list}}
Why this prompt works
Gives Bolt explicit design tokens, interaction specs, and accessibility requirements so the component is production-ready without multiple revision rounds.
What you get when you save this prompt
Your workspace unlocks powerful tools to iterate and improve.
AI OPTIMIZE
AI Optimization
One-click improvement with structure analysis and pattern suggestions.
VERSION DIFF
Version History
Track every edit. Compare versions side-by-side with word-level diffs.
ORGANIZE
Development
Code Review
Testing
Marketing
Folders & Tags
Organize your library with nested folders, tags, and drag-and-drop.
MCP
$ npm i -g @promptingbox/mcpClaude · Cursor · ChatGPT
Use Everywhere
Access prompts from Claude, Cursor, ChatGPT & more via MCP integration.
Your prompts, organized
Save, version, and access your best prompts across ChatGPT, Claude, Cursor, and more.