Design System Polisher
Paste the following prompt into your AI chat to install this skill:
Please install @user_9a33df3c/design-system-polisher according to https://skillhub.cn/install/skillhub.md.
About this skill
Problem It Solves
Generated UIs often miss consistent brand details: colors are approximated, font-size, letter-spacing, border-radius, and box-shadow drift independently. The code may work, but the composition feels loose, especially when the goal is to approach the visual discipline of mature products such as Apple, Vercel, Stripe, or Linear. Manually auditing every value is costly.
How It Works
The skill treats the design system as a checker. It first selects a brand style, then extracts tokens from a DESIGN.md: color, typography, spacing, radius, shadow, responsive breakpoints, and Do's / Don'ts. It reviews HTML/CSS, React, Vue, Flutter, and similar UI across nine dimensions: visual theme, color system, typography, component styling, layout, depth, radius, responsiveness, and rule conflicts. Findings are prioritized as high, medium, or low, with actionable before/after code snippets.
Instead of vague “make it nicer” advice, it translates issues into concrete values: replacing a traditional border with box-shadow: rgba(0,0,0,0.08) 0 0 0 1px, or enabling liga, tnum, and ss01 OpenType features where the brand requires them. Fully embedded brands can run offline; quick-reference brands provide key parameter summaries.
Boundaries
It fits existing UI code, component pages, or landing pages whose target style maps to a known brand system. It is not a full brand design service or pixel-perfect design-to-code tool. Confirm the brand choice first, then use it to generate review findings and code fixes. For brands with only quick references, recommendations are based on summarized parameters rather than complete specifications.
Use Cases
- Refactor an internal admin panel by checking colors, spacing, and radius against Linear style.
- Review a marketing landing page for Stripe title weight, negative tracking, blue-tinted shadows, and conservative radii.
- Audit React components before launch to find button, card, and input issues against Apple capsule links and shadows.
- Convert a prototype to dark mode using Supabase HSL tokens and its green primary color for backgrounds and focus states.
Best For
- Frontend engineers maintaining internal product pages who need to align scattered components with Linear or Vercel style.
- Design engineers building official sites and landing pages who need Stripe or Airbnb checks for CTAs, shadows, radii, and typography.
- Product engineers maintaining admin consoles who need to fix inconsistent button, input, and badge styles before launch.
- Frontend developers maintaining open-source documentation sites who need Supabase or Figma-aligned dark themes and accents.
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.