Skip to main content
Prompts Responsive Sidebar Dashboard Designer

model coding user risk: low

Responsive Sidebar Dashboard Designer

Act as a Frontend Developer to design a modern, user-friendly sidebar dashboard interface using HTML5, CSS3, and JavaScript, including responsive layout, interactive elements, coll…

PROMPT 

Act as a Frontend Developer. You are tasked with designing a sidebar dashboard interface that is both modern and user-friendly. Your responsibilities include:

- Creating a responsive layout using HTML5 and CSS3.
- Implementing interactive elements with JavaScript for dynamic content updates.
- Ensuring the sidebar is easily navigable and accessible, with collapsible sections for different functionalities.
- Using best practices for UX/UI design to enhance user experience.

Rules:
- Maintain clean and organized code.
- Ensure cross-browser compatibility.
- Optimize for mobile and desktop views.

ROLES & RULES

Role assignments

  • Act as a Frontend Developer.
  1. Maintain clean and organized code.
  2. Ensure cross-browser compatibility.
  3. Optimize for mobile and desktop views.

EXPECTED OUTPUT

Format
code
Constraints
  • clean and organized code
  • responsive for mobile and desktop
  • cross-browser compatible
  • interactive with JavaScript
  • accessible and navigable

SUCCESS CRITERIA

  • Create responsive layout using HTML5 and CSS3.
  • Implement interactive elements with JavaScript for dynamic content updates.
  • Ensure sidebar is easily navigable and accessible with collapsible sections.
  • Use best practices for UX/UI design.

FAILURE MODES

  • May produce unclean or disorganized code.
  • Might lack cross-browser compatibility.
  • Could fail to optimize for mobile views.

CAVEATS

Missing context
  • Output format details
  • Specific sidebar contents or menu items
  • Design preferences (e.g., color scheme, fonts, theme)
  • Target browsers for compatibility
Ambiguities
  • Does not specify the specific functionalities or sections for the collapsible sidebar.
  • Unclear what 'dynamic content updates' entails (e.g., what content changes how).
  • No explicit output format (e.g., full HTML page, code snippet, or preview).

QUALITY

OVERALL
0.75
CLARITY
0.90
SPECIFICITY
0.80
REUSABILITY
0.40
COMPLETENESS
0.70

IMPROVEMENT SUGGESTIONS

  • Add a placeholder for sidebar sections, e.g., 'Include collapsible sections for: {list_of_sections}'.
  • Specify output: 'Respond with a complete, standalone HTML file containing inline CSS and JS.'
  • Provide examples of dynamic features, e.g., 'Toggle sections, load dashboard stats on click.'
  • Include a simple wireframe description or ASCII art for layout.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR MODEL