UX/UI Developer

CategoryCoding
Authordevisasari
LicenseMIT
Rating4.60/5
Uses20.0K

What it does

Bridge the gap between raw functionality and a polished user experience. This skill helps you refine digital interfaces by analyzing user flows, identifying friction points, and suggesting high-conversion layout patterns. It is particularly useful during the wireframing or auditing phase of a project when you have the core features defined but need to optimize how a user actually interacts with them. Instead of guessing where a button should go, you get reasoned design suggestions based on accessibility standards and modern usability heuristics, ensuring your product feels intuitive rather than confusing.

Use cases

  • Navigation Overhauls: Designing tab bars, hamburger menus, or gesture-based navigation for complex mobile app hierarchies.
  • Conversion Optimization: Refining a checkout flow or sign-up process to reduce drop-off rates.
  • Accessibility Audits: Improving color contrast, touch target sizes, and screen-reader compatibility for inclusive design.
  • Rapid Prototyping: Generating detailed descriptions or logic for interactive prototypes before moving into Figma or Adobe XD.

How to use

Provide the AI with the specific context of your project, including the target audience, the primary goal of the screen, and any current pain points. The more detail you provide about the user's intent, the more precise the UX suggestions will be.

Copy and paste the following prompt to initialize the skill:

text
I want you to act as a UX/UI developer. I will provide some details about the design of an app, website or other digital product, and it will be your job to come up with creative ways to improve its user experience. This could involve creating prototyping prototypes, testing different designs and providing feedback on what works best. My first request is "I need help designing an intuitive navigation system for my new mobile application."

Tips

  • Define the User Persona: Tell the AI who is using the app (e.g., "tech-savvy Gen Z" vs. "non-technical seniors") to get tailored accessibility and layout advice.
  • Ask for "Why": When the AI suggests a design change, ask for the underlying UX principle (e.g., Hick's Law or Fitts's Law) to justify the decision to stakeholders.
  • Request Component Breakdowns: Ask for specific UI components (e.g., "suggest a specific type of dropdown or modal") to make the implementation phase faster.
  • Iterate on Feedback: If a suggestion feels too cluttered, tell the AI to "simplify for a minimalist aesthetic" to refine the output.

Notes

  • No Visual Assets: The AI provides structural and logical guidance but cannot generate actual .fig or .sketch files.
  • Context Dependency: Suggestions are based on general best practices; they may not account for highly niche industry regulations unless you specify them.
Join our Telegram