Follow these steps to deliver high-quality UI/UX output with minimal back-and-forth.
1) Triage
Ask only what you must to avoid wrong work:
- - Target platform: web / iOS / Android / desktop
- Stack (if code changes): React/Next/Vue/Svelte, CSS/Tailwind, component library
- Goal and constraints: conversion, speed, brand vibe, accessibility level (WCAG AA?)
- What you have: screenshot, Figma, repo, URL, user journey
If the user says "全部都要" (design + UX + code + design system), treat it as four deliverables and ship in that order.
2) Produce Deliverables (pick what fits)
Always be concrete: name components, states, spacing, typography, and interactions.
- - UI concept + layout: Provide a clear visual direction, grid, typography, color system, key screens/sections.
- UX flow: Map the user journey, critical paths, error/empty/loading states, edge cases.
- Design system: Tokens (color/typography/spacing/radius/shadow), component rules, accessibility notes.
- Implementation plan: Exact file-level edits, component breakdown, and acceptance criteria.
3) Use Bundled Assets
This skill bundles data you can cite for inspiration/standards.
- - Design intelligence data: Read from
skills/ui-ux-pro-max/assets/data/ when you need palettes, patterns, or UI/UX heuristics. - Upstream reference: If you need more phrasing/examples, consult
skills/ui-ux-pro-max/references/upstream-skill-content.md.
4) Optional Script (Design System Generator)
If you need to quickly generate tokens and page-specific overrides, use the bundled script:
CODEBLOCK0
Prefer running it when the user wants a structured token output (ASCII-friendly).
Output Standards
- - Default to ASCII-only tokens/variables unless the project already uses Unicode.
- Include: spacing scale, type scale, 2-3 font pair options, color tokens, component states.
- Always cover: empty/loading/error, keyboard navigation, focus states, contrast.
技能名称: ui-ux-pro-max
详细描述:
按照以下步骤交付高质量的UI/UX成果，减少反复沟通。
1) 需求梳理
仅询问必要信息以避免错误工作方向：
- - 目标平台：网页 / iOS / Android / 桌面端
- 技术栈（如需代码变更）：React/Next/Vue/Svelte、CSS/Tailwind、组件库
- 目标与约束：转化率、速度、品牌调性、无障碍等级（WCAG AA？）
- 已有资源：截图、Figma设计稿、代码仓库、URL链接、用户旅程
如果用户提出全部都要（设计+用户体验+代码+设计系统），则将其视为四个交付物，并按此顺序交付。
2) 产出交付物（选择适用项）
始终保持具体：命名组件、状态、间距、排版和交互方式。
- - UI概念+布局：提供清晰的视觉方向、网格系统、排版、色彩体系、关键屏幕/区域。
- UX流程：绘制用户旅程、关键路径、错误/空状态/加载状态、边界情况。
- 设计系统：设计令牌（色彩/排版/间距/圆角/阴影）、组件规则、无障碍说明。
- 实施方案：精确的文件级修改、组件拆分和验收标准。
3) 使用捆绑资源
本技能捆绑了可供引用以获取灵感/标准的数据资源。
- - 设计智能数据：需要调色板、模式或UI/UX启发式规则时，从skills/ui-ux-pro-max/assets/data/读取。
- 上游参考：如需更多措辞或示例，请查阅skills/ui-ux-pro-max/references/upstream-skill-content.md。
4) 可选脚本（设计系统生成器）
如需快速生成令牌和页面级覆盖规则，请使用捆绑脚本：
bash
python3 skills/ui-ux-pro-max/scripts/design_system.py --help
当用户需要结构化的令牌输出（兼容ASCII）时，建议运行此脚本。
输出标准
- - 默认使用仅含ASCII字符的令牌/变量，除非项目已使用Unicode。
- 包含：间距比例、字号比例、2-3组字体搭配选项、色彩令牌、组件状态。
- 始终覆盖：空状态/加载状态/错误状态、键盘导航、焦点状态、对比度。
