> For the complete documentation index, see [llms.txt](https://t420.gitbook.io/t420/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://t420.gitbook.io/t420/claude-screenshot-ui-punchlist.md). # Claude Screenshot-Based Mobile UI Punch List ## Recommendation Use **one prompt at a time**, not all three. ### Best default choice Use **Prompt 1** first. Why: * it gives Claude the most context * it is specific to the visible screenshot issues * it balances guidance with room to implement properly * it is least likely to create shallow cosmetic fixes ### When to use Prompt 2 Use **Prompt 2** only if Claude starts making small cosmetic tweaks without improving the actual mobile feel. ### When to use Prompt 3 Use **Prompt 3** only if you need a short, forceful execution brief after Claude already understands the problem. *** ## Screenshot-Based UI/UX Punch List ### Current score from screenshots * UI: 8/10 * UX: 7.5/10 ### What is already working * strong visual identity * cleaner top bar * readable summary cards * logical expanded work order structure * clearer quote/budget response area ### What must change to reach 10/10 #### 1. Expanded work order is still too dense The expanded card is doing too much in one continuous vertical stack: * summary * details * coordinator * schedule * audit trail * quote form * decline * request delivery **Fix** Break expanded mobile work orders into clearer sections: * Summary * Schedule * Timeline * Response Use stronger spacing and/or collapsible subsections for lower-priority content. #### 2. Response panel is visually over-weighted The bright response container outline plus green primary CTA plus floating green chat button creates too much competition. **Fix** * remove or soften the bright green outline around the full response container * keep emphasis on the budget card and primary CTA instead * make the panel feel calmer and less visually heavy #### 3. Schedule area is still too form-like The schedule rows are better than before, but still read like compact admin inputs rather than touch-first controls. **Fix** * increase vertical spacing between Bay / Tech / Vehicle / Part rows * slightly increase select height * align labels and controls more cleanly * make each row feel like a mobile settings/action row #### 4. Floating chat button is hurting UX The floating chat button overlaps important content. **Fix** * move it away from primary actions * reduce its size slightly * hide or minimize during expanded-card interactions * avoid covering quote or action controls #### 5. Collapsed job cards are still a little text-heavy They are much better, but still slightly dense. **Fix** * reduce uppercase label intensity * de-emphasize labels, emphasize values * improve truncation treatment for long fleet/location text * consider a cleaner footer action area #### 6. Action hierarchy is not quite right Inside the response area: * Send Response is correctly primary * Decline is too weak * Request Vehicle Delivery feels too prominent for a secondary/conditional action **Fix** Use clearer hierarchy: * Primary: Send Response * Secondary: Decline * Tertiary/contextual: Request Vehicle Delivery #### 7. Too many nested bordered boxes There are several bordered panels inside bordered cards inside bordered sections. **Fix** Reduce nesting: * keep main card boundary * use lighter separators inside * reserve strong borders for important states only #### 8. Mobile header/nav still needs more intention The header is clean, but still minimal in a way that feels slightly unfinished. **Fix** * strengthen orientation/state * improve tab clarity * keep header clean but more purposeful *** ## Priority order ### Priority 1 1. Fix floating chat button overlap 2. Reduce density in expanded work order 3. Soften response panel emphasis 4. Improve schedule block touch ergonomics 5. Rebalance action hierarchy in response section ### Priority 2 6. Reduce nested borders 7. Improve collapsed card scannability 8. Improve top metrics card spacing and hierarchy 9. Improve header/nav intention on mobile 10. Tighten vertical rhythm across job list and expanded details *** ## Prompt 1 — Best default ``` Review the attached mobile screenshots and fix the UI/UX to match the issues below. Context: FleetOS mobile UI is now good, but not yet premium. The goal is 10/10 mobile UI and 10/10 mobile UX. What is good already: - strong dark theme + green action identity - cleaner top bar - readable summary cards - logical expanded work order structure - clearer quote/budget response area Main problems to fix: 1. Expanded work order is still too dense - break into clearer mobile sections: Summary, Schedule, Timeline, Response - add more breathing room - reduce “desktop compressed into phone” feeling 2. Response panel is visually over-weighted - soften or remove the strong green outline around the whole response container - keep emphasis on budget card + primary CTA instead - reduce visual competition 3. Schedule area is too form-like - make Bay / Tech / Vehicle / Part rows feel more touch-native - improve row spacing, alignment, and control height 4. Floating chat button overlaps important content - reposition, reduce, or minimize it during form/expanded-card interactions - it must not cover actions or text 5. Action hierarchy is off - primary: Send Response - secondary: Decline - tertiary/contextual: Request Vehicle Delivery - rebalance layout and visual weight accordingly 6. Too many nested bordered boxes - reduce heavy nested borders - use lighter separators inside cards - reserve strong borders for real state emphasis only 7. Collapsed job cards are still a little text-heavy - reduce label intensity - emphasize values more - improve truncation and spacing - make cards easier to scan fast Output requirements: - show exact files changed - explain the mobile UX issue before changing it - make incremental commits - preserve current visual language - do not redesign the brand - improve hierarchy, spacing, touch ergonomics, and premium feel First response format: 1. Screenshot issues observed 2. Highest-impact mobile fixes 3. Execution plan 4. First files to change Then start work. ``` *** ## Prompt 2 — More forceful premium-mobile framing ``` Push FleetOS mobile UI from “good” to “premium”. Do not do broad redesign. Do not touch backend unless absolutely necessary for mobile UX. Work from these visible issues in the screenshots: - expanded work order is too dense - response box is over-emphasized - schedule controls feel cramped - floating chat button overlaps important UI - collapsed cards are still slightly text-heavy - action hierarchy is not strong enough - too many nested borders make the UI feel busy Design target: - calmer - clearer - more premium - more touch-native - easier to scan - easier to act on with one hand Make the mobile experience feel like an intentional product, not desktop squeezed into a phone. Acceptance criteria: - expanded work order is easier to process - primary actions are clearer - floating chat button no longer harms usability - schedule section feels touch-friendly - cards feel calmer and more premium - visual hierarchy is cleaner without losing information Show exact files changed and commit incrementally. ``` *** ## Prompt 3 — Short punch-list version ``` Fix these mobile UI issues exactly: 1. Rework expanded work order layout into clearer sections 2. Remove/soften the heavy green response container border 3. Improve spacing and touch size in the schedule rows 4. Fix floating chat button overlap with content 5. Make Send Response clearly primary 6. Make Decline clearly secondary 7. Downgrade Request Vehicle Delivery to contextual/tertiary 8. Reduce nested border noise 9. Improve collapsed card scanability 10. Tighten mobile spacing rhythm across the whole jobs flow Do not redesign the theme. Keep the FleetOS look. Just make it feel premium and mobile-native. Show: - exact files changed - before/after reasoning - incremental commits ``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://t420.gitbook.io/t420/claude-screenshot-ui-punchlist.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.