Refactoring UI
技能 已验证 活跃Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off", "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.
To help developers audit and fix UI design issues, ensuring a professional and consistent visual appearance without requiring a dedicated designer.
功能
- Audits visual hierarchy, spacing, color, and depth
- Provides systematic design principles (e.g., grayscale first)
- Offers actionable advice for common UI problems
- Covers styling for components and design tokens
- Includes examples for Tailwind CSS and other frameworks
使用场景
- When a UI 'looks off' or unprofessional
- Improving consistency in design tokens or component styling
- Reviewing designs for visual hierarchy and spacing issues
- Applying constrained design scales for consistent UIs
非目标
- Selecting typefaces (see web-typography skill)
- Conducting full usability audits (see ux-heuristics skill)
- Generating pixel-perfect mockups from scratch
- Providing subjective aesthetic opinions without principles
实践
- UI Design
- Frontend Development
- Visual Hierarchy
- Spacing Systems
- Color Theory
- Typography
安装
请先添加 Marketplace
/plugin marketplace add wondelai/skills/plugin install skills@wondelai-skills质量评分
已验证类似扩展
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
Component Audit
100Component consistency audit covering state coverage, hierarchy, patterns
Impeccable
99当用户希望设计、重新设计、塑造、批评、审计、打磨、澄清、提炼、加固、优化、改编、动画化、着色、提取或以其他方式改进前端界面时使用。涵盖网站、登陆页面、仪表板、产品 UI、应用外壳、组件、表单、设置、入职流程和空状态。处理用户体验审查、视觉层次、信息架构、认知负荷、可访问性、性能、响应行为、主题化、反模式、排版、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边缘情况、i18n 以及可复用的设计系统或令牌。也适用于需要从平淡变得更大胆或更令人愉悦的设计，需要变得更安静的醒目设计，对 UI 元素的实时浏览器迭代，或应该感觉技术上非凡的雄心勃勃的视觉效果。不适用于仅限后端或非 UI 任务。
Macos Design
100Design and build native-feeling macOS application UIs. Use this skill whenever the user asks to create a desktop app, macOS app, Mac-style interface, Apple-style UI, system utility, or anything that should look and feel like a native Mac application. Also trigger when users mention "native feel", "desktop app design", "Apple design patterns", "sidebar layout", "traffic lights", or want to build tools/utilities that feel like they belong on macOS. This skill covers layout, composition, interaction patterns, animations, light/dark mode, and all the subtle details that make an app feel like Apple built it.
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Brand Landingpage
99Brand-first landing page designer — interviews the user to discover brand identity (adjectives, colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML output. Preferred over frontend-design for standalone landing/marketing pages where the user hasn't established visual direction yet. TRIGGER when: user asks to "create/design/build a landing page", "make a homepage for my project/product/service", "build a marketing page", or wants to promote an app/side project. Especially when they haven't defined brand colors, fonts, or visual style — the guided brand interview is the core value. DO NOT TRIGGER when: user has a specific design mockup to implement, wants a dashboard or app UI, needs component-level frontend work (buttons, forms, navbars), is building a multi-page application, or is restyling an existing page with known design tokens. Use frontend-design for those cases.