Color Audit
技能 已验证 活跃Color-only audit to extract, evaluate, and recommend improvements for the project's color system
To provide developers with an automated, data-driven method for evaluating and enhancing their project's color system, ensuring consistency, accessibility, and aesthetic harmony.
功能
- Color extraction from CSS, JSX, and Tailwind
- WCAG and APCA contrast ratio checking
- Semantic color role mapping
- Harmony, consistency, and coverage analysis
- Generation of improved color palettes (light/dark)
- Output of color tokens (CSS vars or Tailwind config)
使用场景
- Auditing an existing project's color system for compliance and consistency
- Identifying and fixing contrast issues for accessibility
- Generating a cohesive and semantically sound color palette
- Ensuring a consistent color system across light and dark modes
非目标
- Auditing aspects other than the color system (e.g., typography, layout)
- Providing subjective design feedback or aesthetic opinions
- Modifying project files directly without user interaction
工作流
- Extract all colors from project files
- Map extracted colors to semantic roles
- Check contrast ratios for foreground/background pairs
- Evaluate color harmony, consistency, and coverage
- Generate an improved color system and palettes
- Output audit findings and recommendations
实践
- Color System Auditing
- Accessibility Compliance
- Design System Maintenance
- Automated Code Analysis
先决条件
- Node.js 18+
安装
请先添加 Marketplace
/plugin marketplace add Aboudjem/ui-ux-suite/plugin install ui-ux-suite@ui-ux-suite质量评分
已验证类似扩展
Impeccable
99当用户希望设计、重新设计、塑造、批评、审计、打磨、澄清、提炼、加固、优化、改编、动画化、着色、提取或以其他方式改进前端界面时使用。涵盖网站、登陆页面、仪表板、产品 UI、应用外壳、组件、表单、设置、入职流程和空状态。处理用户体验审查、视觉层次、信息架构、认知负荷、可访问性、性能、响应行为、主题化、反模式、排版、字体、间距、布局、对齐、颜色、动效、微交互、UX 文案、错误状态、边缘情况、i18n 以及可复用的设计系统或令牌。也适用于需要从平淡变得更大胆或更令人愉悦的设计，需要变得更安静的醒目设计，对 UI 元素的实时浏览器迭代，或应该感觉技术上非凡的雄心勃勃的视觉效果。不适用于仅限后端或非 UI 任务。
Baseline Ui
100在 Tailwind CSS 项目中验证动画持续时间，强制执行排版比例，检查组件可访问性，并防止布局反模式。适用于构建 UI 组件、审查 CSS 工具类、 styling React 视图或强制执行设计一致性。
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
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.
Component Audit
100Component consistency audit covering state coverage, hierarchy, patterns
Review Ux Ui
99Review user experience and interface design using Nielsen's heuristics, WCAG 2.1 accessibility guidelines, keyboard and screen reader audit, user flow analysis, cognitive load assessment, and form usability evaluation. Use when conducting a usability review before release, assessing WCAG 2.1 accessibility compliance, evaluating user flows for efficiency, reviewing form design, or performing a heuristic evaluation of an existing interface.