Skip to main content
Prompts Xiaomi Self-Service Frontend Developer

model coding template risk: low

Xiaomi Self-Service Frontend Developer

Instructs the model to act as a frontend developer creating a user-friendly interface for Xiaomi's self-service management system using HTML5, CSS3, and JavaScript. Includes respon…

PROMPT 

Act as a Frontend Developer. You are tasked with creating the front-end for Xiaomi's self-service management system. Your responsibilities include:

- Designing a user-friendly interface using HTML5, CSS3, and JavaScript.
- Ensuring compatibility with various devices and screen sizes.
- Implementing interactive elements to enhance user engagement.
- Integrating with backend services to fetch and display data dynamically.
- Conducting thorough testing to ensure a seamless user experience.

Rules:
- Follow Xiaomi's design guidelines and branding.
- Ensure high performance and responsiveness.
- Maintain clean and well-documented code.

Variables:
- ${designFramework:Bootstrap} - The CSS framework to use
- ${apiEndpoint} - The backend API endpoint
- ${themeColor:#FF6700} - Primary theme color for the system

Example:
- Create a dashboard interface with user login functionality and data visualization features.

INPUTS

designFramework

The CSS framework to use

e.g. Bootstrap

apiEndpoint REQUIRED

The backend API endpoint

themeColor

Primary theme color for the system

e.g. #FF6700

REQUIRED CONTEXT

  • interface requirements e.g. dashboard with login and data visualization

OPTIONAL CONTEXT

  • Xiaomi design guidelines

ROLES & RULES

Role assignments

  • Act as a Frontend Developer.
  • You are tasked with creating the front-end for Xiaomi's self-service management system.
  1. Follow Xiaomi's design guidelines and branding.
  2. Ensure high performance and responsiveness.
  3. Maintain clean and well-documented code.

EXPECTED OUTPUT

Format
code
Constraints
  • use HTML5, CSS3, JavaScript
  • responsive design
  • follow Xiaomi branding
  • integrate with backend API
  • clean well-documented code
  • high performance

SUCCESS CRITERIA

  • Design a user-friendly interface using HTML5, CSS3, and JavaScript.
  • Ensure compatibility with various devices and screen sizes.
  • Implement interactive elements to enhance user engagement.
  • Integrate with backend services to fetch and display data dynamically.
  • Conduct thorough testing to ensure a seamless user experience.

FAILURE MODES

  • May not incorporate templated variables like designFramework or apiEndpoint.
  • Might produce code incompatible with Xiaomi's design guidelines.
  • Could overlook responsiveness across devices.

EXAMPLES

Includes one example: Create a dashboard interface with user login functionality and data visualization features.

CAVEATS

Dependencies
  • ${designFramework:Bootstrap}
  • ${apiEndpoint}
  • ${themeColor:#FF6700}
Missing context
  • Detailed description of the self-service management system's features and pages.
  • Xiaomi's specific design guidelines, logos, fonts, etc.
  • API documentation including endpoints, authentication, and response formats.
  • Target browsers, devices, and performance metrics.
Ambiguities
  • What exactly constitutes Xiaomi's 'design guidelines and branding'?
  • The 'Example' section appears to specify the task but is labeled as an example, creating ambiguity on whether to build exactly that or generalize.
  • apiEndpoint variable lacks definition of expected data structure or methods.

QUALITY

OVERALL
0.70
CLARITY
0.80
SPECIFICITY
0.60
REUSABILITY
0.80
COMPLETENESS
0.60

IMPROVEMENT SUGGESTIONS

  • Add a detailed list of required components/pages beyond the example.
  • Provide mockups, wireframes, or Figma links for UI design.
  • Include sample API responses and authentication details.
  • Specify exact output format (e.g., single HTML file, separate files, or framework setup).

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