mobile-ui-style-engine - Generate mobile screens that match product style
Extracts visual language from existing product screens and applies it to new mobile HTML screens through reusable patterns, style audits, and rendered visual QA.
Tags
Updated: 2026-09-30Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Inspect existing UI references
- Extract reusable design tokens
- Document component grammar
- Classify screen archetypes
- Create screen design contracts
- Generate mobile HTML/CSS
- Audit visual style drift
- Perform rendered visual QA
Inputs
- Existing HTML files
- CSS files and variables
- Reusable components
- Icons and images
- Screenshots and reference images
- Design-system files
- New screen requirements
- Target mobile viewport
Outputs
- Updated design-system files
- Screen design contract
- Mobile HTML/CSS screen
- Visual drift audit
- Rendered mobile screen
Requirements
- Mobile HTML rendering environment
- Access to project UI resources