Menu
支持可搜索数据库的 UI/UX 设计智能。
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
| name | ui-ux-pro-max-zh |
| description | 支持可搜索数据库的 UI/UX 设计智能。 |
面向 Web 和移动端应用的全面设计指南。包含跨 16 个技术栈的 67 种 UI 风格、161 个色板、57 组字体配对、99 条 UX 指南以及 25 种图表类型。支持基于优先级的推荐和可搜索数据库。
检查开发环境是否已安装 Python 3.x：
python3 --version || python --version
如果未安装 Python，请根据您的操作系统执行相应命令安装：
macOS:
brew install python3
Ubuntu/Debian:
sudo apt update && sudo apt install python3
Windows:
winget install Python.Python.3.12
在以下业务开发场景中，可直接调用此技能：
| 场景 (Scenario) | 触发示例 (Trigger Examples) | 推荐起点 (Start From) |
|---|---|---|
| 全新项目 / 页面开发 | "做一个 landing page"、"Build a dashboard" | 步骤 1 → 步骤 2（生成设计系统） |
| 新组件设计与还原 | "Create a pricing card"、"Add a modal" | 步骤 3（专项检索：style, ux） |
| 风格定义 / 调性设计 / 字体配对 | "What style fits a fintech app?"、"推荐配色" | 步骤 2（生成设计系统） |
| UI 走查与无障碍审查 | "Review this page for UX issues"、"检查无障碍" | 上方的快速参考指南 (Quick Reference) |
| UI 还原度缺陷及交互异常修复 | "Button hover is broken"、"Layout shifts on load" | 快速参考指南 → 匹配章节调优 |
| 体验升级与性能优化 | "Make this faster"、"Improve mobile experience" | 步骤 3（专项检索：ux, react） |
| 适配暗黑模式 | "Add dark mode support" | 步骤 3（专项检索：style "dark mode"） |
| 引入图表与数据可视化 | "Add an analytics dashboard chart" | 步骤 3（专项检索：chart） |
| 特定技术栈的最佳开发实践 | "React performance tips" | 步骤 4（框架指令检索） |
请遵循以下标准开发流：
从用户请求中精准提取以下决策因子：
请务必首先执行 --design-system 命令，以获取包含严密推理逻辑的完整设计系统方案：
python3 .codex/skills/ui-ux-pro-max-zh/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
底层执行逻辑：
ui-reasoning.csv 决策模型，智能匹配并输出最佳方案示例：
python3 .codex/skills/ui-ux-pro-max-zh/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
若需保存生成的配置以支持跨会话的层级上下文检索，请追加 --persist 参数：
python3 .codex/skills/ui-ux-pro-max-zh/scripts/search.py "<query>" --design-system --persist -p "Project Name"
这将在项目根目录下自动创建：
design-system/MASTER.md —— 全局唯一事实来源 (Single Source of Truth，包含全局通用规范)design-system/pages/ —— 存放特定页面覆盖规则的文件夹生成特定页面覆盖规则示例：
python3 .codex/skills/ui-ux-pro-max-zh/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
这还会额外创建：
design-system/pages/dashboard.md —— 仅针对仪表盘页面的局部覆盖规范（只声明偏离 Master 的差异部分）层级上下文检索机制：
design-system/pages/checkout.md 是否存在MASTER.md 的设定design-system/MASTER.md 为全局唯一依据上下文感知检索提示词模板 (Context-Aware Prompt)：
I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...
在设计系统大框架下，若需针对特定交互细节进行微调，可运行以下命令检索：
python3 .codex/skills/ui-ux-pro-max-zh/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
补充检索场景：
| 需求 | 检索领域 (Domain) | 示例 (Example) |
|---|---|---|
| 产品原型与排版模式 | product | --domain product "entertainment social" |
| 视觉风格深度检索 | style | --domain style "glassmorphism dark" |
| 配色/色板精选 | color | --domain color "entertainment vibrant" |
| 字体组合/字体配对 | typography | --domain typography "playful modern" |
| 图表展现与库推荐 | chart | --domain chart "real-time dashboard" |
| UX 交互与无障碍合规 | ux | --domain ux "animation accessibility" |
| 落地页布局与 CTA 策略 | landing | --domain landing "hero social-proof" |
| 开发框架性能调优 | react | --domain react "rerender memo list" |
| 平台交互规范 (iOS/Android) | web | --domain web "accessibilityLabel touch safe-areas" |
| AI 提示词与核心变量 | prompt | --domain prompt "minimalism" |
检索针对特定框架底层实现的高质量代码模板与性能建议：
python3 .codex/skills/ui-ux-pro-max-zh/scripts/search.py "<keyword>" --stack <stack>
| 领域 (Domain) | 用途 | 示例关键词 |
|---|---|---|
product | 产品类型模式推荐建议 | SaaS, e-commerce, portfolio, healthcare, beauty, service |
style | UI 设计风格、颜色、特效特征 | glassmorphism, minimalism, dark mode, brutalism |
typography | 经典字体搭配、Google Fonts 导入推荐 | elegant, playful, professional, modern |
color | 匹配行业受众的产品色板推荐 | saas, ecommerce, healthcare, beauty, fintech, service |
landing | 落地页页面结构与 CTA 转化策略 | hero, hero-centric, testimonial, pricing, social-proof |
chart | 推荐的数据图表类型与可视化图表库 | trend, comparison, timeline, funnel, pie |
ux | 交互设计优秀实践与反模式防坑指南 | animation, accessibility, z-index, loading |
react | React 生态框架的前端渲染性能调优 | waterfall, bundle, suspense, memo, rerender, cache |
web | 主流端平台设计与无障碍接口规范 | accessibilityLabel, touch targets, safe areas, Dynamic Type |
prompt | 生成特定风格视觉的 AI 绘图提示词 | (style name) |
用户请求："帮我设计一个 AI 搜索首页"
python3 .codex/skills/ui-ux-pro-max-zh/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"
输出：获得一份量身定制的设计系统方案，包含推荐布局、视觉风格特征、语义配色、字体排版、核心交互动效以及避坑指南。
# 检索极简与纯黑 OLED 模式的设计规范细节
python3 .codex/skills/ui-ux-pro-max-zh/scripts/search.py "minimalism dark mode" --domain style
# 检索关于搜索过渡和加载状态的 UX 优秀动效实践
python3 .codex/skills/ui-ux-pro-max-zh/scripts/search.py "search loading animation" --domain ux
# 检索特定技术栈下的输入性能与列表渲染最佳实践
python3 .codex/skills/ui-ux-pro-max-zh/scripts/search.py "input performance" --stack react
最后阶段：将设计系统规范与检索出的最佳交互细节融会贯通，产出高质量前端代码。
--design-system 命令行标志支持以下两种输出格式：
# ASCII 艺术框（默认）- 最适合终端显示与命令行直观阅读
python3 .codex/skills/ui-ux-pro-max-zh/scripts/search.py "fintech crypto" --design-system
# Markdown 格式 - 格式更规整，最适合保存为文档记录或传给 AI 上下文
python3 .codex/skills/ui-ux-pro-max-zh/scripts/search.py "fintech crypto" --design-system -f markdown
"entertainment social vibrant content-dense"，而不是随意地检索一个 "app""playful neon" → "vibrant dark" → "content-first minimal"--design-system 构建底层规范，随后用 --domain 深入研究有疑问的局部维度--stack <stack_name>，以获取针对该框架最优雅的组件封装与渲染逻辑| 问题 | 解决方案 |
|---|---|
| 视觉失焦（风格或配色拿捏不准） | 尝试微调检索关键词重新运行 --design-system 进行设计推演 |
| 暗黑模式文本对比度不合规 | 参阅快速参考指南第 1 节：color-dark-mode + color-accessible-pairs 优化明度 |
| 动画与交互手感生硬 | 参阅快速参考指南第 7 节：spring-physics + easing + exit-faster-than-enter 曲线 |
| 表单填报交互繁琐、报错不友好 | 参阅快速参考指南第 8 节：inline-validation + error-clarity + focus-management 重构 |
| 导航路径混乱、返回状态丢失 | 参阅快速参考指南第 9 节：nav-hierarchy + bottom-nav-limit + back-behavior 保留现场 |
| 移动端小屏布局拥挤或溢出 | 参阅快速参考指南第 5 节：mobile-first + breakpoint-consistency 优雅折行 |
| 列表滚动掉帧或交互响应迟钝 | 参阅快速参考指南第 3 节：virtualize-lists + main-thread-budget + debounce-throttle 优化 |
--domain ux "animation accessibility z-index loading" 作为防错预走查以下是极易被忽略、但会导致界面显得极其廉价和不专业的细节硬伤：
@phosphor-icons/react)。src/ui-ux-pro-max-zh/data/icons.csv 中列出的只是常用推荐图标，不是完整集合。@heroicons/react) 作为备选，注意保持风格一致（线性/填充、笔画粗细、圆角风格）。| 规范准则 (Rule) | 优秀实践 (Do) | 应规避的反模式 (Avoid) | 核心设计考量 (Why It Matters) |
|---|---|---|---|
| 禁止将 Emoji 用于结构化图标 | 统一使用高阶矢量图标（如 Phosphor、Heroicons 或平台专有矢量图标库）。 | 在侧边栏导航、设置表单或重要交互控件中胡乱堆叠 Emoji（如 🎨 🚀 ⚙️）。 | Emoji 极其依赖客户端系统预装字库，渲染效果千差万别且无法被设计 Token 所控制。 |
| 纯矢量化资产原则 | 全量使用可无限缩放、完美兼容主题切换的 SVG 图标或平台级矢量 XML 格式。 | 使用 PNG、JPG 等拉伸时会产生锯齿、模糊且无法变色的位图图标。 | 确保在高分视网膜屏幕下的极致清晰度，以及无缝切换亮/暗主题的能力。 |
| 按压状态过渡稳定性 | 点击/按压态仅使用颜色深浅、不透明度 (Opacity) 或投影高度 (Elevation) 的过渡，绝对不改变组件本身的边框物理大小。 | 在按压或悬停时，使用会改变物理宽高、导致周围元素被挤压或抖动的形变 (Layout Shift)。 | 避免造成交互过程中的页面视觉抖动，保障移动端交互的极其平滑，提升感知质量。 |
| 品牌资产规范使用 | 统一使用官方矢量品牌资产，严格遵循其标志安全边界与配色指南。 | 主观臆断或手动绘制 Logo、未经授权随意为品牌图标重新配色或强行拉伸比例。 | 确保品牌呈现的严肃与规范，防范法务纠纷及合规性风险。 |
| 图标尺寸系统化 | 将图标高度与宽度抽象并定义为统一的设计 Token（如 icon-sm、icon-md=24px、icon-lg）。 | 在同一界面中随意混用 18px、21px、25px、29px 等混乱的任意像素尺寸。 | 维持产品设计系统的整体韵律感，建立严谨的视觉阶梯。 |
| 图标描边线宽一致性 | 在同一个视觉信息层级内，所有图标必须采用相同的线宽描边（如统一使用 1.5px 或 2px）。 | 随意拼凑不同线宽、粗细交织的图标集合。 | 描边粗细不一会严重割裂页面的精致度，降低产品的整体品质感。 |
| 图标填充/线性风格纯净度 | 在同一视觉层级或同一组功能区（如底部 Tab 栏）内，必须统一使用同一种图标风格（要么全部线性，要么全部填充）。 | 在同一功能区域内，随性混用填充型与线性图标（如首页是线性，搜索页是填充）。 | 维护图标系统的整体调性与视觉规律性。 |
| 触控热区最小面积限制 | 确保可交互按钮物理热区面积至少达 44×44pt；如果图标视觉过小，必须使用负外边距或 hitSlop 属性扩大实际热区。 | 使用直接暴露的小图标而未做任何热区扩展，导致用户反复点击失败。 | 保障不同手部尺寸用户在运动、颠簸场景下的触碰成功率，满足 A11y 规范。 |
| 图标文字基线精准对齐 | 图标必须与同级排版的文本基线（Baseline）或中心线严格对齐，并保持统一的水平外边距。 | 图标高度偏高或偏低，产生杂乱无章的视错觉。 | 细微的视觉失衡是摧毁高级感的主要元凶，必须做到像素级严谨对齐。 |
| 图形对比度无障碍审查 | 遵循 WCAG 对比度底线：常规功能图标对比度 ≥4.5:1，大型图形化装饰性符号对比度 ≥3:1。 | 采用过淡的灰色图标，导致在阳光直射下完全看不清。 | 确保在各种极端照度和不同设备屏幕上的卓越可读性。 |
| 规范法则 (Rule) | 正面实践 (Do) | 反面模式 (Don't) |
|---|---|---|
| 即时触控反馈 (Tap feedback) | 必须在触控后的 80–150ms 内给出明确的涟漪、明度微调或透明度过渡等响应 | 点击后界面如一潭死水，无任何视觉或动效响应 |
| 动效时间把控 (Animation timing) | 微交互时长限定在 150–300ms 左右，且必须配置符合物理特性的非线性曲线 | 动效瞬间硬切 (0ms) 或采用超过 500ms 的沉重拖沓动画 |
| 朗读焦点顺序 (Accessibility focus) | 确保屏幕阅读器 (Screen Reader) 的焦点流向与页面视觉布局顺序绝对匹配 | 焦点焦点随意跳动或将无关的装饰元素朗读给视障用户 |
| 禁用态状态表达 | 应用淡化透明度、鼠标禁用标识，并通过 disabled 属性禁止一切点击触发 | 按钮看起来依然可用但点击后无任何反应，使用户困惑是否发生卡顿 |
| 扩大最小交互区域 | 确保移动端触控目标热区宽与高均 ≥44pt，对微小图标通过属性扩充交互热区 | 使用过小的像素点，逼迫用户像做外科手术一样精准点击 |
| 规避多重手势冲突 | 每一个物理区域仅设计一种主流手势操作，防止嵌套滚动或边缘划动手势拦截系统手势 | 在支持滑动的卡片组件内，强行嵌入横向滚动的次级数据列表 |
| 无障碍语义声明 | 规范使用原生交互控件（如 Button、Pressable），配置准确的 accessibility role 角色 | 随意使用普通的无语义容器（如 Div、View）来包裹关键交互入口 |
| 规范法则 (Rule) | 正面实践 (Do) | 反面模式 (Don't) |
|---|---|---|
| 卡片/卡板层级感 (Surface readability) | 善用投影高度、高光边框或微弱明度差将卡片面板与底层背景界定分明 | 卡片完全融入背景，导致页面沦为平铺直叙的一张白板 |
| 浅色模式文本易读性 | 确保浅色主题下的正文段落与背景的对比度 ≥4.5:1 | 在白底上使用过淡的浅灰色文字，伤害视力 |
| 暗黑模式文本易读性 | 确保深色主题下主要文本对比度 ≥4.5:1，次要说明文字对比度 ≥3:1 | 暗色主题下的文本对比度不足，导致文字几乎隐形 |
| 边框与分割线辨识度 | 确保分割线和细边框在浅色与暗色主题下均有匹配的明暗度对比 | 只针对默认主题调优，在暗黑模式下边框彻底消失 |
| 交互状态双向适配 | 针对亮/暗两套主题，均设计高水准的 hover、focus、disabled 及 active 交互态 | 仅针对其中一个主题优化了状态，导致另一主题下交互态难以辨认 |
| Token 化色彩管理 | 在文字、背景和边框上全量引入语义化色彩 Token，实现主题一键切换 | 在组件样式中大量写死 Hex 颜色，使得主题适配维护成本巨大 |
| 半透明遮罩对比调优 | 模态弹窗的底层 Scrim 半透明度应设在 40%–60% 之间，以提供充足的前景聚焦力 | 遮罩过淡导致底层内容与弹窗文本发生视觉打架，严重干扰阅读 |
| 规范法则 (Rule) | 正面实践 (Do) | 反面模式 (Don't) |
|---|---|---|
| 安全区域对齐 (Safe-area) | 针对页眉、底栏及全局悬浮 CTA 栏，强制注入顶部与底部安全区域 padding | 悬浮底栏把刘海屏或系统底部手势条死死挡住，阻断操作 |
| 避开系统交互热区 | 为系统状态栏和导航指示条预留充足的高度避让，严防手势冲突 | 让可交互的按钮与系统自带的手势滑轨边缘重叠，触发误触 |
| 统一多端限制宽度 | 依据设备屏幕尺寸，采用预设的最大安全内容容器宽度（如大屏 PC 限制在 1200px 左右） | 页面布局在宽屏下无限延伸扩展，导致视觉重心涣散 |
| 4/8pt 间距韵律系统 | 内边距、外边距、网格空隙等，一律采用统一的 4/8/16/24/32/48px 等阶梯节奏 | 随心所欲使用 7px、13px、19px、31px 等无规律的间距数值 |
| 控制段落最大排版宽度 | 在宽屏平板及 PC 上，限制单行文字最大排版宽度，保证视线移动舒适 | 段落文字横跨整屏，导致用户每读完一行都需要长距离移动眼球寻找下一行 |
| 垂直间距分明层级 | 页面各区块之间使用鲜明的、拉开差距的垂直间距（如 24px/48px/64px） | 区块区块之间没有清晰的空隙，使页面显得局促而杂乱 |
| 响应式水平槽宽 | 随着设备屏幕宽度增加，按比例增加两侧的水平页面边距 (Page Gutters) | 在平板和移动端上都顽固使用相同极窄的 12px 边距 |
| 底部滚动安全占位 | 凡是页面底部有固定粘性底栏时，必须为列表容器最底端提供相等的 Padding 占位 | 用户滑动到列表最底部时，最后一个条目被粘性底栏永久遮挡 |