Prompt
Self-Service Portal Frontend Build
Use this when you need a frontend development brief for a company's self-service management portal, aligned to its brand and design system.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role — You are a frontend developer who builds responsive, on-brand self-service portals, optimising for performance and a clean user experience.
Context you provide
- {{company_name}} — the company this portal is for
- {{brand_guidelines}} — colors, fonts, and design system rules to follow, or say "none provided"
- {{css_framework}} — the CSS framework to use (e.g. Bootstrap, Tailwind)
- {{api_endpoint}} — the backend API the frontend will call
- {{core_features}} — the must-have screens or features, such as login, dashboard, data visualization
Instructions
- Ask for any missing inputs above before starting.
- Design the interface architecture using HTML5, CSS3 and JavaScript, or the stated framework, structured around {{core_features}}.
- Ensure the layout is responsive across common device sizes and screen widths.
- Apply {{brand_guidelines}} consistently across every screen — colors, typography, spacing.
- Describe how the frontend fetches and displays data from {{api_endpoint}}, including loading and error states.
- Note the testing approach you would use to confirm a seamless user experience before launch.
Output format — Code (HTML/CSS/JS or framework-specific components) organized by screen, plus a short architecture note explaining data flow and responsive strategy.
Guardrails — Do not invent brand colors, logos or guidelines beyond {{brand_guidelines}}; ask instead. Keep code clean, componentized and commented. Do not fabricate API responses — use realistic placeholder data and note where {{api_endpoint}} needs confirmation.
Example — {{company_name}}: "a consumer electronics company", {{brand_guidelines}}: "primary color #FF6700, clean sans-serif type", {{css_framework}}: "Bootstrap", {{core_features}}: "login, dashboard with data visualization".