Skills Guide beginner 6 min read

Mastering `cm-ux-master`: The Complete Guide

Hướng dẫn chi tiết về Mastering `cm-ux-master`: The Complete Guide trong Vibe Coding dành cho None.

Skills used: cm-ux-master

In the world of Vibe Coding, speed is our greatest asset, but it is often our greatest liability when it comes to user experience. We have all been there: you have a breakthrough idea, the backend logic is humming perfectly, and you’ve managed to “vibe” a functional prototype into existence in record time. But when you step back to look at the interface, something is off. It feels clunky. The buttons are in the wrong place. The information density is overwhelming. It looks like a “Frankenstein UI”—a collection of mismatched components that lack a cohesive soul.

This is the “Design Debt” trap. In traditional development, you’d hand this off to a senior UI/UX designer who would spend weeks wireframing and testing. In Vibe Coding, we don’t have weeks. We have minutes. This is precisely why cm-ux-master was engineered. It isn’t just a component generator; it is a high-fidelity design intelligence engine that embeds decades of cognitive psychology and interface standards directly into your development workflow.

Core Concepts: The Anatomy of Design Intelligence

To master cm-ux-master, you must first understand that it operates on a “Constraint-First” philosophy. Instead of generating random layouts, it filters every design decision through four primary layers of intelligence:

1. The Cognitive Framework (48 UX Laws & 37 Tests)

At its base, the skill is pre-loaded with the “48 Laws of UX.” These aren’t just suggestions; they are mathematical and psychological certainties. When you ask cm-ux-master to build a navigation menu, it isn’t just choosing a style. It is applying Hick’s Law to minimize the number of choices and Fitts’s Law to ensure that target areas are sized correctly for the user’s input device.

The “37 Design Tests” are the automated auditors. Every time a UI is proposed, the skill runs a “Validation Gate.” This checks for things like:

  • Contrast Ratios: Ensuring WCAG 2.1 compliance for accessibility.
  • Tap Target Minimums: Checking if mobile users can actually click the buttons.
  • Information Hierarchy: Using the “Squint Test” simulation to ensure the most important data pops.

2. Harvester v4: Semantic Visual Extraction

One of the most powerful features of cm-ux-master is the Harvester. It allows the agent to “see” and deconstruct high-end design systems. When you find an app or a website that has the “vibe” you want, Harvester v4 doesn’t just copy the CSS. It extracts the semantic tokens: the spacing scales, the border-radius logic, the typography rhythm, and the shadow depths. It then translates these into a DESIGN.md file that guides all future generation.

3. Google Stitch & Figma Integration

The skill acts as a bridge. It doesn’t just write code; it orchestrates design tools. By integrating with Google Stitch, it can generate production-ready UI previews before a single line of React or HTML is written. This allows you to iterate on the “visual intent” in a sandbox before committing to the technical implementation.

cm-ux-master uses a specialized search algorithm across 16 design domains (e.g., Fintech, SaaS, E-commerce, Healthcare). When you are building a dashboard for a crypto-app, it looks at the conventions specific to that industry—how charts are displayed, how “danger” actions are colored—ensuring your app feels “at home” in its niche.

Practical Example: Building the “Continuity Dashboard”

Let’s walk through a real-world scenario. You are building a “Continuity Dashboard” for an AI agent system. You need to display active tasks, agent health, token usage, and a real-time event log.

Step 1: The Intent Scan

Instead of saying “Build me a dashboard,” you start by invoking the intelligence engine to define the requirements based on user jobs (JTBD).

/invoking cm-ux-master
Objective: Design a Project Continuity Dashboard.
Persona: Technical Lead managing 10+ autonomous agents.
Core Job: "I need to quickly see which agents are stuck and why, so I can unblock them without digging through logs."

The skill responds by mapping the Information Architecture. It suggests a Bento Grid layout because it handles varying data types (charts, lists, status dots) with high density but clear boundaries.

Step 2: Harvesting the Aesthetic

You want the dashboard to feel like a high-end developer tool (think Vercel or Linear). You point the Harvester at a reference image or URL.

# Conceptual command inside the agent flow
cm-ux-master --harvest "https://linear.app" --output ./design/linear-tokens.json

The skill extracts the “Deep Dark” theme tokens: #0A0A0A backgrounds, 1px borders with rgba(255,255,255,0.1), and the Inter typeface stack.

Step 3: Generating the Stitch Preview

Now, we generate the UI using the harvested tokens and the Bento Grid strategy.

// The agent uses the Stitch tool via cm-ux-master
stitch.generate({
  layout: "bento-grid",
  components: ["AgentStatusCard", "TokenUsageLineChart", "LiveEventLog"],
  style: "linear-dark-minimal",
  constraints: ["high-density", "no-scrolling-main-view"]
});

Step 4: The Heuristic Audit

Before the code is finalized, cm-ux-master runs its 37-point check. It might find a flaw: “Alert: The ‘Stop All Agents’ button is too close to the ‘Refresh’ button. Risk of accidental trigger (violation of Fitts’s Law). Suggesting 24px margin and destructive color styling.”

You accept the fix, and only then does the skill output the final, production-ready React + Tailwind (or Vanilla CSS) code.

Best Practices for Vibe Coders

To get the most out of cm-ux-master, you should shift your mindset from “Editor” to “Orchestrator.”

1. Use “Aesthetic Intent” Prompts

Avoid vague descriptors like “clean” or “modern.” Instead, use structural descriptors that the skill understands semantically:

  • “Bento Grid” for dashboards.
  • “Card-Minimal” for content feeds.
  • “Glassmorphism” for overlays and modals.
  • “Utility-First” for high-functionality admin panels.

2. The “Squint Test” Loop

Periodically ask the skill to perform a “Visual Hierarchy Analysis.” It will return a map of where the user’s eye goes first, second, and third. If your “Delete Project” button is drawing more attention than your “Save” button, the hierarchy is broken.

3. Respect the “8px Grid”

cm-ux-master is obsessed with the 8px spacing system. When you manually override styles, try to stick to multiples of 8 (4, 8, 16, 24, 32). This ensures that the generated components and your manual tweaks align perfectly, preventing that “uncanny valley” feeling of a slightly-off UI.

4. Contextual Continuity

Always keep your DESIGN.md updated. When you make a decision about a specific border-radius or brand color, ensure the skill records it. This prevents the “Style Drift” that happens when an agent generates a new page three days later and forgets the conventions established on day one.

Troubleshooting Common Pitfalls

“The UI feels too generic.” This usually happens when the Harvester hasn’t been given enough “soul” to work with. If you don’t provide a reference, the skill defaults to “Industrial Standard SaaS,” which is safe but boring. Feed it 2-3 screenshots of interfaces you love to inject personality.

“The information density is too high.” AI agents love to put everything on one screen. If the 37 Design Tests report high “Cognitive Load,” ask the skill to implement Progressive Disclosure. This means moving secondary information into tooltips, accordions, or “Click to Expand” states.

“The mobile version is broken.” Vibe Coding often focuses on the desktop view first. Force cm-ux-master to do a “Mobile-First Audit” early. It will likely suggest switching horizontal tables to vertical “Data Cards” to save space and improve readability.

Conclusion: Designing for the Future

cm-ux-master represents a fundamental shift in how we build software. In the traditional era, design was a separate phase that often acted as a bottleneck. In the Vibe Coding era, design is a real-time utility.

By leveraging the cognitive laws embedded in this skill, you are doing more than just making things “look pretty.” You are ensuring that your applications are accessible, intuitive, and professional from the very first prompt. You are bridging the gap between a “side project” and a “product.”

As you continue to master this skill, remember: the goal is not to eliminate the designer, but to become a Master Architect who can command design intelligence as easily as they command code. Start by harvesting your favorite patterns today, and watch as your “vibes” transform into world-class interfaces.