refactoring-ui
实用的设计原则,先灰度再上色,便于前端落地。
审查并修复网页 UI 的层次、间距、色彩与深度。
帮你把网页界面视觉问题修了:调整层次感、间距、色彩和景深,让界面看起来专业、有条理。适合你感觉"界面怪怪的"、要整理 Tailwind 样式、统一色盘或上线前打磨细节时用。流程偏灰度优先和受限刻度,重点在可重复的样式令组件更一致。
▸ 展开 SKILL.md 英文原文
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent design tokens, creating dark mode themes, improving data-visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.
帮我安装这个 skill:https://raw.githubusercontent.com/wondelai/skills/main/refactoring-ui/SKILL.mdcurl -fsSL "https://raw.githubusercontent.com/wondelai/skills/main/refactoring-ui/SKILL.md"# Refactoring UI Design System A practical, opinionated approach to UI design. Apply these principles when generating frontend code, reviewing designs, or advising on visual improvements. ## Core Principle **Design in grayscale first. Add color last.** This forces proper hierarchy through spacing, contrast, and typography before relying on color as a crutch. **The foundation:** Great UI isn't about talent — it's about systems. Constrained scales for spacing, type, color, and shadows produce consistently professional results. Start with too much white space and remove; leave details (icons, shadows, micro-interactions) until layout and hierarchy work. ## Scoring **Goal: 10/10.** Score b