What problem does it solve?
This Skill eliminates the risk of generic, AI-generated, or default UI that fails to match a product's unique brand, user workflow, and production requirements, which leads to poor user experience, low product differentiation, and avoidable rework.
Core Features & Use Cases
- End-to-End UI Design & Build: Create product-specific interfaces for websites, apps, dashboards, and components that align with user tasks and brand direction, with full state coverage and verification.
- Design System Hardening: Define and refine semantic tokens, component contracts, and state models for Tailwind/shadcn systems to eliminate default framework "vibe-coded" feels.
- Vibe-Coded UI Audits: Identify and prioritize generic AI design tells (purple gradients, default cards, generic marketing copy) with concrete, product-specific replacements.
- Visual QA & Accessibility Verification: Inspect rendered desktop/mobile states for responsive fit, overlap, clipping, and accessibility compliance before shipping.
- Use Case Example: Audit a React/Tailwind SaaS dashboard full of generic purple gradients and shadcn card scaffolding to replace with product-specific layouts, tokens, and states that match the brand and user workflow.
Quick Start
Use the design-engineer skill to audit your existing SaaS dashboard for generic AI design tells and get prioritized, concrete fixes to make it product-specific and production-ready.
