ui-ux-pro-max
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
- Installs
- 431
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://skills.volces.com --skill ui-ux-pro-max- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads ui-ux-pro-max automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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:
python3 skills/ui-ux-pro-max/scripts/design_system.py --help
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.
FAQ
What does the ui-ux-pro-max skill do?
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
How do I install ui-ux-pro-max?
Run npx skills add https://skills.volces.com --skill ui-ux-pro-max in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/ui-ux-pro-max/ (personal) or .claude/skills/ui-ux-pro-max/ (project).
Which AI agents can use ui-ux-pro-max?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is ui-ux-pro-max safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains ui-ux-pro-max?
It is published by skills.volces.com in skills.volces.com. It has 431 recorded installs.
More from skills.volces.com
byted-web-search
skills.volces.com
火山引擎豆包搜索 API（原联网搜索/融合信息搜索），返回网页/图片结果。联网搜索场景优先使用本 skill。触发词包括：豆包搜索、查/搜/找、真的吗/靠谱吗/确认/核实、最近/今天/最新/近期、出处/来源/链接、Agent Plan、融合信息搜索、Harness、有什么/有哪些/推荐、价格/政策/汇率/行情、对比/区别/哪个好、听说/据说/不太确定、热搜/热门/火、帮我看/了解一下、求证/辟谣、值不值得/该不该。任务依赖在线事实或时效性时优先使用。若回答可能依赖外部事实，优先调用本 skill 再作答。
byted-supabase
skills.volces.com
火山引擎 Supabase . 管理 AIDAP Supabase 项目、工作区、数据库、分支、Auth、Realtime、Edge Functions、Storage、API Keys、SQL、Schema 变更、TypeScript 类型生成和 MCP 集成。
find-skills
skills.volces.com
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
byted-util-ark-cua
skills.volces.com
Delegate broad computer-use tasks to ARK CUA for Volcengine AgentPlan users through an authenticated cloud desktop, and synchronize explicit credentials to a caller-owned CUA through Credential Agent. Use for web or desktop-app operation, file workflows, reusable task contexts, artifacts, temporary CUA App URLs, desktop shutdown/start/recovery, inspection, or exact browser, environment, secret, Credential Set, and managed-file credential setup/sync/status/reset. Do not use when local reasoning or a purpose-built local/API tool can complete the request more directly.
agent-browser
skills.volces.com
Headless browser automation CLI optimized for AI agents with accessibility tree snapshots and ref-based element selection
self-improving-agent
skills.volces.com
AI自我改进与记忆系统 - 解决'同类错误反复犯、用户纠正不长记性'的痛点。自动捕获错误、用户纠正、最佳实践，并转化为长期记忆。
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.