Habilidades ui-ux-pro-max

🎨

ui-ux-pro-max

Name: ui-ux-pro-max
Author: sickn33

Baixo Risco

使用 AI 指导构建专业 UI/UX 设计

Também disponível em: nextlevelbuilder,DCjanus,ZhanlinCui

设计师和开发者难以在各项目中维护一致且易于访问的设计系统。本技能提供全面的设计指南、配色方案、排版建议以及 9 大技术栈的组件模式。

Suporta: Claude Codex Code(CC)

🥉 72 Bronze

Baixar o ZIP da skill

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

Ative e comece a usar

Testar

A utilizar "ui-ux-pro-max". 为医疗应用推荐配色方案

Resultado esperado:

医疗应用配色方案：主色 (#0891B2 - 宁静青色) 建立信任和冷静。次要色 (#22D3EE - 浅青色) 提供视觉层次。CTA (#059669 - 成功绿) 用于主要操作。背景 (#ECFEFF - 柔和白) 减少眼睛疲劳。文本 (#164E63 - 深青色) 确保可读性。边框 (#A5F3FC - 浅色边框) 用于微妙的分隔。该配色优先考虑冷静和信任，对于可能经历焦虑的医疗应用用户至关重要。

A utilizar "ui-ux-pro-max". 移动按钮的触控目标要求是什么？

Resultado esperado:

触控目标指南：最小 44x44 像素（iOS HIG 和 WCAG 要求）。频繁使用的操作建议 48x48 像素。测量时应包含内边距，而不仅仅是可见按钮。触控目标之间的间距：最小 8px 以防止误触。对于关键操作（删除、购买），建议最小 56x56px。

Auditoria de Segurança

Baixo Risco

v1 • 2/25/2026

Static analysis flagged 1176 patterns but nearly all are false positives. 'Weak cryptographic algorithm' detections are hex color codes (#2563EB) in design data files. 'Hardcoded URLs' are documentation links in guidelines. 'System reconnaissance' and 'C2 keywords' are design terminology matches. Python scripts read CSV files to generate design recommendations - no network calls or code execution. One legitimate concern: scripts/design_system.py uses subprocess calls (Ruby/shell execution patterns) for design tooling integration, which is appropriate for this use case but documented as a minor risk.

Arquivos analisados

2,560

Linhas analisadas

achados

Total de auditorias

Problemas de Risco Médio (1)

scripts/design_system.py:9 scripts/design_system.py:423-425

External Command Execution in Design Scripts

scripts/design_system.py contains shell command execution patterns for design tooling integration. This is legitimate for a design system generator but represents a minor risk if the script were modified to accept untrusted input.

Problemas de Baixo Risco (3)

data/stacks/nuxt-ui.csv:2 data/stacks/nextjs.csv:2

Documentation URLs in Design Guidelines

CSV data files contain documentation URLs (e.g., https://ui.nuxt.com/docs/) as part of design guidelines. These are reference links, not network calls made by the skill.

data/colors.csv:2-30 data/products.csv:2-30

False Positive: Hex Color Codes Flagged as Crypto

Static analyzer flagged hex color codes (e.g., #2563EB, #3B82F6) as 'weak cryptographic algorithm'. These are design color values, not cryptographic operations.

data/ux-guidelines.csv:1-100

False Positive: Design Terminology Flagged as Suspicious

Terms like 'reconnaissance' (in UX research context), 'keylogger' (in security UI guidelines), and 'C2' (likely 'call-to-action' abbreviation) triggered keyword detectors but are legitimate design domain vocabulary.

Auditado por: claude

Pontuação de qualidade

Arquitetura

100

Manutenibilidade

Conteúdo

Comunidade

Segurança

Conformidade com especificações

O Que Você Pode Construir

初创公司构建 MVP 设计系统

独立创始人使用该技能为其 SaaS 产品建立一致的 UI 模式，选择合适的配色方案、组件样式和无障碍指南，用于其基于 React 的应用程序。

设计团队标准化组件

设计团队负责人利用全面的指南创建统一的设计系统文档，确保所有团队成员在多个产品线中遵循一致的模式。

开发者实现无障碍需求

前端开发者参考无障碍指南，确保其 Vue 应用程序满足 WCAG 2.1 要求，包括适当的颜色对比度、焦点管理和键盘导航模式。

Tente Estes Prompts

基础配色方案选择

我正在构建一个 [产品类型，例如：SaaS 仪表板]。推荐一个包含主色、次要色、CTA、背景、文本和边框颜色的配色方案。包含十六进制代码并解释色彩心理学。

组件实现指南

展示在 [框架，例如：React] 中实现 [组件，例如：数据表格] 的最佳实践。包含无障碍要求、常见模式和代码示例。

无障碍审查请求

审查我的 [页面/组件类型] 的无障碍问题。我的 [描述你的 UI] 有哪些 WCAG 指南需要检查？提供优先级清单。

完整设计系统生成

Melhores Práticas

在最终确定设计前，始终验证颜色对比度比例符合 WCAG AA 最低标准（普通文本 4.5:1，大文本 3:1）
在所有页面中保持一致性 - 在整个应用程序中使用相同的样式、配色方案和组件模式
移动优先设计：从触控友好的布局开始（44px+ 目标），然后为更大的屏幕扩展
使用语义化颜色名称（primary、secondary、error）而不是硬编码值，以支持主题和深色模式
使用减少动画偏好（prefers-reduced-motion）测试设计，确保对前庭障碍用户的无障碍性

Evitar

在生产界面中使用 emoji 作为图标 - 它们在各平台上渲染不一致且缺乏专业外观
仅实现悬停交互而没有点击替代方案 - 排除了触控设备用户和无障碍场景
跳过加载状态和骨架屏 - 在异步操作期间造成感知性能问题和用户不确定性
内联硬编码颜色而不是使用设计令牌或 CSS 变量 - 阻止主题化并增加维护负担
使用动画进行装饰而不尊重 prefers-reduced-motion - 可能导致某些用户不适或恶心

Perguntas Frequentes

本技能是否适用于 Claude、Codex 和 Claude Code？

是的。本技能与所有三种 AI 助手兼容。每个助手都可以访问设计指南并根据你的具体项目需求提供建议。

我可以在商业项目中使用这些指南吗？

是的。本技能采用 MIT 许可，允许商业用途。指南参考了来自成熟设计系统的行业标准最佳实践。

如何使这些指南适应我现有的品牌颜色？

使用色彩心理学和对比度建议，同时替换为你品牌的主色。指南提供的比例和关系适用于任何基色。

这些无障碍指南是否符合 WCAG 标准？

是的。指南参考 WCAG 2.1 AA 标准的颜色对比度、触控目标、焦点状态和键盘导航。生产环境请始终使用自动化测试工具验证。

我应该为项目选择哪种技术栈？

本技能为 9 种技术栈提供指南。React/Next.js 用于 Web 应用，React Native/SwiftUI/Flutter 用于移动端，Vue/Svelte 用于轻量级 Web，Tailwind 用于实用优先 CSS，shadcn/ui 用于基于 Radix 的组件。请考虑团队专业知识和项目需求。

设计指南多久更新一次？

设计最佳实践随时间演变。本技能包含来自主要设计系统（Material Design、Human Interface Guidelines、Carbon 等）的成熟模式，这些模式在各框架版本中保持相关性。