Frontend Design Optimizer
Paste the following prompt into your AI chat to install this skill:
Please install @user_8ec29dbe/frontend-design-optimizer according to https://skillhub.cn/install/skillhub.md.
About this skill
What it solves
Frontend pages often work but feel rough: weak heading hierarchy, magic spacing values, raw hex colors, missing hover/focus feedback, inaccessible keyboard behavior, or poor LCP and CLS. It fits new pages, legacy UI upgrades, design reviews, and competitive analysis, focusing on product-grade visual and interaction quality without changing business logic.
How it works
The skill collects a URL, screenshots, or code, then audits visual hierarchy, typography, color systems, responsive layout, interaction feedback, accessibility, and performance. It checks H1/H2/H3 scale, WCAG contrast, line-height, rem usage, spacing tokens, :focus-visible, and prefers-reduced-motion. Outputs can be a prioritized issue list, refactored code snippets, design tokens, or a step-by-step migration plan, verified with Lighthouse, keyboard navigation, and before/after screenshots.
Boundaries
It targets frontend presentation and UX, not backend logic, data models, or complex business state. Provide code, screenshots, or stack context when possible. Avoid blind pixel-perfect replication; prioritize design intent, accessibility, and cross-device usability.
Use Cases
- Before release, audit a login page for visual defects and keyboard accessibility, then produce a prioritized issue list.
- Take over a legacy admin dashboard, locate magic spacing, hardcoded colors, and inconsistent typography, then create a CSS variable migration plan.
- After converting a Figma component to code, check focus states, ARIA attributes, loading feedback, and responsive layout to reach product quality.
- Improve form interaction feedback by adding hover, focus-visible, and ARIA associations to buttons, inputs, and error messages.
Best For
- Frontend engineers who need UI-level code review guidance in pull requests.
- Product engineers responsible for upgrading legacy pages to modern design systems.
- QA engineers or designers who need to catch visual and accessibility defects before release.
- Full-stack engineers who generate accessible component code from screenshots or Figma files.
Related Skills
Enter a material name to get preview and download links for free, commercially usable video assets, with paid platform options, pricing, and search suggestions when results are limited.
Restyle a short video into a new visual style while preserving core elements such as characters, actions, and composition, suitable for various creative conversions like anime, illustration, ink wash, etc.
Create Douyin vertical video covers from topics, hooks, or materials with support for creative generation, image synthesis, and refinement.
An AI tool that transforms real photos into specified illustration styles while preserving subject recognition.