Mastering `ux-master`: The Complete Guide

The “Vibe Coding” revolution has fundamentally changed how we build software. We can now describe complex logic, wire up databases, and deploy full-stack applications in minutes. However, a persistent “final boss” remains for the modern builder: the Generic AI Aesthetic.

We’ve all seen it. You prompt an AI to build a dashboard, and it gives you a perfectly functional, yet utterly soul-less interface. It uses the default shadcn colors, standard spacing, and a layout that feels like a thousand other “AI-generated” templates. It works, but it doesn’t resonate. It lacks the intentionality that separates a side project from a category-defining product.

This is where ux-master enters the frame. It is not just another UI library or a set of prompts; it is the “Design Intelligence” layer of the Cody Master ecosystem. It bridges the gap between functional code and professional craft by applying rigorous UX laws, visual psychology, and heuristic analysis to your AI-driven workflow. This guide will show you how to master this skill to transform your “vibe” into a production-grade experience.

Core Concepts: How `ux-master` Thinks

Most AI assistants treat UI as a secondary byproduct of code. ux-master flips the script. It treats UI as a set of mathematical and psychological constraints that must be satisfied to achieve “User Delight.” To use it effectively, you must understand its four foundational pillars:

1. The Harvester v4 (Visual DNA Extraction)

Design often starts with inspiration. Instead of trying to describe a “clean, modern look” (which is subjective and vague), ux-master uses the Harvester v4 engine. This tool analyzes existing visual interfaces—whether from a reference URL or a screenshot—and extracts the “Visual DNA.” It identifies specific color tokens, font-weight ratios, corner radius patterns, and elevation levels. When you invoke ux-master, you aren’t just getting “blue”; you’re getting the exact hex value and opacity used by top-tier design teams.

2. The 48 Laws of UX

The skill is pre-loaded with a library of 48 UX Laws. It doesn’t just know them; it enforces them.

Miller’s Law: It will automatically suggest breaking your complex forms into “bento-style” chunks to keep the cognitive load manageable (7 ± 2 items).
Fitts’s Law: It will audit your mobile layouts to ensure that primary actions are within the “thumb zone” and have sufficient touch targets.
The Peak-End Rule: It will suggest adding micro-interactions or “Easter eggs” at the end of a user journey (like a successful checkout) to leave a lasting positive impression.

3. Heuristic Auditing (Nielsen + Krug)

Before a single line of CSS is written, ux-master performs a “Vibe Check” against the 10 Usability Heuristics. It asks: Is the system status visible? Does the user have control and freedom? Is the language “human-centric”? By the time you get to implementation, the structural flaws of your app have already been identified and mitigated.

4. The Stitch Design Standard

ux-master is deeply integrated with Google Stitch. This allows you to generate a “Design Intent” before you generate code. Instead of guessing how a component should look, you create a visual preview in the Stitch canvas. This separates the designing from the coding, preventing “Code Rot” caused by constant CSS overrides.

The Workflow: From Vibe to Verified Design

To master ux-master, you need to move beyond simple prompts. You need a structured loop. Let’s walk through a real-world scenario: building a High-End AI Research Dashboard.

Step 1: Ingesting the Vibe

Start by providing the “DNA” you want to emulate.

“Invoke ux-master via Harvester. Analyze the visual language of Linear and Vercel. Extract the typography scale, the use of sub-pixel borders, and the ‘glassmorphism’ elevation levels.”

ux-master will respond with a structured DESIGN.md file. This is your project’s “Source of Truth” for design tokens.

Step 2: Defining the JTBD (Jobs To Be Done)

Design is useless if it doesn’t solve the user’s problem. Use ux-master to map the user journey.

“Apply the 48 UX Laws to the ‘Model Selection’ flow. The user’s ‘Job’ is to quickly compare latency vs. accuracy. How should the information hierarchy be structured to minimize decision fatigue?”

Step 3: The Heuristic Audit

Before coding, ask for an audit of your current concept.

“Perform a heuristic audit on my planned dashboard layout. Specifically, check for ‘Consistency and Standards’ and ‘Error Prevention’ in the API key management section.”

Step 4: Visual Preview with Stitch

Now, move to the cm-ui-preview tool (which is the execution arm of ux-master).

“Generate a Stitch preview for the main dashboard. Use the ‘Bento Grid’ layout pattern. Ensure the primary CTA follows the ‘Isolation Effect’ (Von Restorff Effect) to stand out from the data cards.”

Practical Example: The “Ugly Dashboard” Transformation

Imagine you have a standard React dashboard that looks like a basic table. It’s cluttered, the colors are flat, and it feels “cheap.”

The Old Prompt: “Make this dashboard look professional and modern.” (Result: More generic blue buttons).

The ux-master Approach:

Contextual Awareness: ux-master identifies that the dashboard is for “Real-time Monitoring.” It applies the Doherty Threshold, ensuring that system feedback occurs within 400ms to keep the user’s attention.
Color Psychology: It suggests a “Dark Mode” palette with high-contrast accents (e.g., Electric Lime for ‘Active’ states) to reduce eye strain for engineers working at night.
Hierarchy Fix: It applies Occam’s Razor. It removes three unnecessary status columns and replaces them with a single “System Health” sparkline.
Actionable Code:

// ux-master generated tailwind tokens
const designTokens = {
  surface: "bg-[#0a0a0b] border border-[#1f1f21]",
  accent: "text-[#ccff00] shadow-[0_0_20px_rgba(204,255,0,0.15)]",
  typography: "font-sans tracking-tight leading-relaxed",
  spacing: "p-6 rounded-xl",
};

By applying these specific constraints, the dashboard shifts from a “tool” to an “experience.”

Best Practices & Pro Tips

1. Stop “Vibe-Guessing”

Never ask the AI to “choose a good font.” Instead, say: “Analyze my Target Persona (Technical Founder). Suggest a typography pairing from the ux-master Font Pairing library that communicates ‘Stability’ and ‘Precision’.“

2. The “Audit-First” Rule

Before you allow your agent to write a new component, require it to run a ux-master audit.

“Before implementing the PricingPage.tsx, run a ux-master audit against the ‘Hick’s Law’ constraint. Are there too many choices? Can we use ‘Anchoring’ to highlight the Pro plan?“

3. Use the “Design Tests”

ux-master includes 37 automated design tests. Use them to verify your frontend before shipping:

Contrast Test: Ensures WCAG 2.1 compliance for accessibility.
Squint Test: Ask the agent: “Apply a blur filter to the Stitch preview. Is the primary action still the most prominent element?”
Touch-Target Test: Verifies that all buttons are at least 44x44px for mobile users.

4. Managing “Design Debt”

Just like technical debt, “Design Debt” accumulates when you make quick, unprincipled UI choices. Use ux-master to periodically refactor your CSS.

“Scan the src/styles directory. Consolidate hardcoded hex values into the design tokens defined in DESIGN.md. Ensure we are using a consistent 4px spacing grid.”

Why `ux-master` is Essential for Vibe Coding

In the early days of Vibe Coding, we were happy just to get things working. But as the ecosystem matures, the “Minimum Viable Product” (MVP) bar has been raised. A product that looks like an AI built it is immediately perceived as lower value by users.

ux-master is your competitive advantage. It allows a single developer to output work that looks like it came from a team containing a Senior UX Researcher, a Visual Designer, and an Accessibility Specialist.

It solves the Decision Fatigue of the builder. You no longer have to spend 20 minutes tweaking the padding on a button. You define the principle (e.g., “High-density data view, minimal friction”), and ux-master handles the application.

Conclusion: The Path to Craftsmanship

Mastering ux-master is about shifting your mindset from “writing code” to “orchestrating intent.” By leveraging the Harvester for visual intelligence and the 48 Laws for psychological grounding, you ensure that your applications are not just functional, but human-centric.

The next time you start a project, don’t just prompt for a feature. Start with a ux-master session. Extract the DNA, audit the flow, and verify the design in Stitch. Your users might not know that you used Miller’s Law to organize your navigation, but they will feel the clarity. They might not know about the Doherty Threshold, but they will notice that the app feels “snappy.”

That is the power of ux-master. It takes the “vibe” and turns it into a masterpiece.

Next Steps:

Open your current project.
Run batch_get on your main CSS file.
Ask ux-master: “Audit this file against the ‘Visual Hierarchy’ and ‘Consistency’ heuristics. What is the one change that will improve the professional quality of this UI by 50%?”

Happy building.

Mastering ux-master: The Complete Guide

Core Concepts: How ux-master Thinks