VividKit Crystal clear AI coding
VI
Choose Your Setup Get Started with AgentKit Continue with ClaudeKit Migrate from ClaudeKit to AgentKit Clean cutover from ClaudeKit What Is AgentKit? How AgentKit Works AgentKit Kits, Skills, Agents & Hooks AgentKit Runtime Support AgentKit Desktop App AgentKit Configuration AgentKit CLI Quick Reference AgentKit Skills Cheatsheet AgentKit Workflows AgentKit Statusline Update AgentKit CLI & Kits AgentKit Helper Clean reinstall of AgentKit AgentKit Troubleshooting What is ClaudeKit? ClaudeKit CLI Guide Command Finder Commands Cheat Sheet Workflow Recipes CLI Quick Reference Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Other coding tools How ClaudeKit Works Inside ClaudeKit Finding Your Unknowns Session Recovery Fix from Logs UI/UX Guide Accounts Switcher IDE Config Remote Control Codex App System Diagramming UI Review Gate Promotions Support VividKit

Quick Ref / Command

Marketing Kit

/ak:ui-ux-pro-max

UI/UX design intelligence

Design intelligence for product UI: style systems, color, type, layout, accessibility, interaction states, responsive behavior, forms, charts, and app review.

01

Classify request

02

Extract needs

03

Design system

04

Persist if needed

Rule 01

Design system first, detail searches second.

Rule 02

Accessibility and touch interaction outrank decorative style.

Rule 03

Professional UI depends on semantic tokens, vector assets, stable states, and consistent spacing.

Rule 04

Review both light and dark modes; never infer one from the other.

Execution Map

Core lanes from input to output, aligned with the command's real execution path.

01

Start

Input, scope, route

  1. 1 Classify request Confirm the task changes how a feature looks, feels, moves, or is interacted with; otherwise skip this skill.
  2. 2 Extract needs Capture product type, target audience, usage context, style keywords, and stack before choosing design rules.
02

Work

Agent / skill execution

  1. 3 Design system Start from a design-system search to combine product, style, color, landing, typography, effects, and anti-pattern reasoning.
  2. 4 Persist if needed When cross-session consistency matters, persist a master design system and page-level overrides for hierarchical retrieval.
03

Verify

Gate, review, validation

  1. 5 Deep search Use domain searches for product, style, typography, color, landing, chart, UX, React, web, or prompt details.
  2. 6 Stack rules Add React Native implementation guidance for components, navigation, and lists when building app UI.
04

Close

Report, handoff, artifact

  1. 7 Review priorities Apply rule priority 1→10: accessibility and touch first, then performance, style, layout, typography, motion, forms, nav, charts.
  2. 8 Pre-deliver Before delivery, verify critical/high checks: contrast, touch targets, small phone, landscape, reduced motion, Dynamic Type, dark mode, and safe areas.

Don't skip the required step

Each item contrasts a tempting shortcut with the required approach.

Tempting shortcut

A polished style is enough.

Do this instead

Critical accessibility, touch, and performance issues rank higher than decoration.

Tempting shortcut

Dark mode will work if light mode works.

Do this instead

Dark contrast, borders, state colors, and scrims must be checked independently.

Tempting shortcut

Emoji icons make the UI friendly.

Do this instead

Structural icons should be consistent SVG/vector assets, not platform-dependent emoji.

Sample Prompt

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

New landing page Recommended 
/ak:ui-ux-pro-max build a SaaS landing page design system
Use when:
Use before creating a visible page or product UI direction.
Expected:
Design system recommendations cover style, colors, typography, effects, anti patterns, implementation cautions, and visual priorities.
UI review 
/ak:ui-ux-pro-max review this mobile app screen for accessibility and polish
Use when:
Use when the UI feels unprofessional or needs pre-launch review.
Expected:
Prioritized UX, accessibility, responsive behavior, and visual consistency findings include concrete remediation guidance for developers.
Chart guidance 
/ak:ui-ux-pro-max add an analytics dashboard chart
Use when:
Use when the task includes data visualization choices.
Expected:
Chart type, legend, tooltip, color, accessibility, and responsive guidance for the dashboard context.

Handled Scope

  • Design systems and visual direction
  • Accessibility and touch targets
  • Responsive layout and safe areas
  • Typography, color, and icon discipline
  • Charts, forms, navigation, and motion review

Next