🎉 Exciting news! We've launched Nakxi, a powerful design tool for creating designs, app screenshots and mockups. Check it out today! 🚀
Compatible: chatgpt

Glassmorphic User Profile Widget Design Tokens

Complexity Level: Beginner
Prompt Code Block

Define the CSS variables, HTML layout structure, and design token parameters for a premium glassmorphic user profile widget. Ensure detailed specs for: - Layer styling: glass backing blur (`backdrop-filter`), exact border gradient opacity, and inner drop shadow - Typographic layout: avatar image sizing, verified badge placement, and bio snippet structure - Dynamic responses: hover scale expansions, focus borders, and clean active toggles.

🌟 Example Output / Preview

Optimized AI prompt output placeholder.

Prompt Metadata

DifficultyBeginner
Compatibilitychatgpt

Primary Use Cases:

  • General AI optimization
  • Workflow automation

Associated Tags:

#ux #glassmorphism #tokens #widget

💡 Pro Tips & Advice

1. Use bracketed items: Be sure to fill out all [PLACEHOLDER] elements with specific details before sending the prompt to the AI model.

2. Adjust temperature: For creative tasks, set AI temperature higher (e.g., 0.8), or lower (e.g., 0.2) for strict coding/technical tasks.

🔗 Related AI Prompts

★ Featured

Premium Bento-Grid Landing Page Layout Spec

Act as a Lead Product Designer and Design Systems Architect. Write an extremely comprehensive UX wireframe specification and CSS g...

Compatible:chatgptDiff:Intermediate
#ux #bento-grid #landing-page #wireframe

Dark-Mode SaaS Pricing Table Comparison Layout

Design a high-converting, accessible dark-mode SaaS pricing comparison table structure. Provide a comprehensive markdown wirefram...

Compatible:chatgptDiff:Intermediate
#ux #pricing-table #dark-mode #conversion

High-Conversion Onboarding Carousel UX Checklist

Draft a professional UX specification checklist and micro-copy sequence for a mobile application's onboarding carousel flow. Requ...

Compatible:chatgptDiff:Advanced
#ux #onboarding #carousel #mobile