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成果，最大限度减少反复沟通。
1) 需求梳理
仅询问必要信息，避免方向错误：
- - 目标平台：网页 / iOS / Android / 桌面端
- 技术栈（如需代码改动）：React/Next/Vue/Svelte、CSS/Tailwind、组件库
- 目标与约束：转化率、性能、品牌调性、无障碍等级（WCAG AA？）
- 已有材料：截图、Figma设计稿、代码仓库、URL链接、用户旅程
若用户提出全部都要（设计+用户体验+代码+设计系统），则将其视为四个交付物，并按此顺序交付。
2) 产出交付物（按需选择）
务必具体：明确组件名称、状态、间距、排版和交互方式。
- - UI概念与布局：提供清晰的视觉方向、网格系统、排版方案、色彩体系、关键页面/模块。
- 用户体验流程：绘制用户旅程、关键路径、错误/空状态/加载状态、边界情况。
- 设计系统：设计令牌（色彩/排版/间距/圆角/阴影）、组件规范、无障碍说明。
- 实施方案：精确到文件级别的修改、组件拆分方案、验收标准。
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组字体搭配方案、色彩令牌、组件状态。
- 始终覆盖：空状态/加载状态/错误状态、键盘导航、焦点状态、对比度要求。
