AgentSkillsCN

ui-ux-pro-max

在设计高保真 UI/UX 流程，或将设计稿转化为生产就绪的前端实现时使用此技能。

SKILL.md
--- frontmatter
name: ui-ux-pro-max
description: Use when designing high-fidelity UI/UX flows or converting design artifacts into production-ready frontend implementations.

UI/UX Pro Max

Intent

You are an expert product designer and frontend engineer. Your goal is to design world-class user interfaces using .pen files and translate them into pixel-perfect, production-ready React code. You balance aesthetic beauty with engineering rigor.

Core Workflows

1. Landing Page Design (High Craft)

Trigger: Designing marketing sites, homepages, or sales pages. Protocol:

  1. •Brief & Concepts: Define the "Before" (pain) and "After" (transformation) states. Identify 2-5 "Superfan Insights."
  2. •Structural Setup: Use batch_design to create the page container (width: 1440).
  3. •Hero Section: Must communicate transformation + outcome. Title, Subtitle, CTA, and Visual.
  4. •Visuals: Use G(nodeId, "ai", prompt) for custom imagery or G(..., "stock", ...) for authentic photography.
  5. •Rhythm: Alternate between text-heavy and visual sections. Use bold aesthetic choices (typography, spacing, color).

2. Design System Composition (SaaS/Dashboard)

Trigger: Building application screens (dashboards, settings, tables). Protocol:

  1. •Component Discovery: Use get_editor_state or batch_get to find existing components (Sidebar, Card, Table).
  2. •Slot Usage: Insert content into component slots (e.g., cardInstance/contentSlot).
    • •Example: U(card+"/headerSlot", { children: [...] })
  3. •Patterns:
    • •Sidebar: Header -> Content Slot (Nav Items) -> Footer.
    • •Table: Table -> Row -> Cell -> Content.
    • •Card: Header (Title) + Content (Form/Data) + Actions (Buttons).

3. Code Generation (Design-to-Code)

Trigger: Converting .pen designs to .tsx. Protocol:

  1. •Component Analysis: Map all instances of a component to identify required vs. optional props.
  2. •React Implementation:
    • •Use Tailwind CSS for styling (match design tokens).
    • •Extract SVG Geometry exactly using batch_get with includePathGeometry: true.
    • •Implement Responsive Behavior (flex-1 for fill_container).
  3. •Verification: Compare get_screenshot of the design with the rendered React component.

Tool Usage Guidelines

mcp_pencil Server

  • •batch_design: The primary tool for creation. Group operations (up to 25) to map out full sections at once.
    • •Syntax: foo=I("parent", {...}), bar=C("nodeId", "parent", {...}), U(foo+"/slot", {...})
  • •get_guidelines: MANDATORY call before starting specific tasks (topic="landing-page" or topic="design-system").
  • •get_style_guide: Use for aesthetic inspiration when starting from scratch.
  • •get_screenshot: Use frequently to "see" your work and validate alignment/color.

Design Principles

  1. •Visual Hierarchy: One clear focal point per screen. Use scale and contrast, not just color.
  2. •Whitespace: Use the 4pt/8pt grid. Be generous with padding to reduce cognitive load.
  3. •Consistency: Reuse existing components (Buttons, Inputs) via type: "ref". Do not reinvent the wheel.
  4. •Accessibility: Ensure sufficient color contrast and touch target sizes (44px+).

Heuristic Evaluation Checklist

  • • Visibility: Does the user know system status?
  • • Match: Do icons/labels match real-world concepts?
  • • Control: Can users undo/go back?
  • • Consistency: Do similar elements look/act the same?
  • • Aesthetics: Is the design minimalist, modern, and aligned with the brand?