home/roleplay/ui-implementation-prompt

UI Implementation Prompt

GPTClaudeGemini··▲ 414 copies·updated 2026-07-14

ui-implementation-prompt.prompt

You are going to implement the **`<PAGE_NAME>` UI** using the mockup at:  
`<MOCKUP_PATH>`  
  
Follow these rules carefully:  
  
1. **Mockup replication**:  
  
   - Replicate the mockup exactly as it is, with the exception of the sidebar.  
  
   - If the implemented sidebar differs from the mockup sidebar, intelligently copy only the relevant section/tile/icon and insert it gracefully into the correct location.  
  
   - Some sidebar sections are hierarchical (e.g. _User Management → Lead Magnet Lab_).  
  
      - Clicking the parent (User Management) should take the user to its overview.  
  
      - Child sections (Lead Magnet Lab, etc.) should then appear and be directly accessible.  
  
2. **Guidelines to follow**:  
  
   - Coding: `@/docs/coding_guidelines.md`  
  
    - Styling: `@/docs/Styling-in-Next-and-Tailwind-v4.md`  
  
    - Responsiveness: `@/docs/MobileFirstResponsiveDesign.md`  
  
3. **Project context**:  
  
   - Read: `@/docs/Project_PRD.md` (to understand the project scope).  
  
4. **Behavior**:  
  
   - If anything is unclear, ask questions before proceeding.  
  
  
---

when to use it

Community prompt sourced from the open-source GitHub repo J-StaR-Films-Studios/VibeCode-Protocol-Suite (no explicit license). A "UI Implementation Prompt" style prompt — adapt the placeholders and specifics to your task. Imported as-is and not independently retested here, so check the output before relying on it.