vision-expert

Original：🇺🇸 English
Translated

Specialized instructions for Z.AI Vision MCP to handle UI-to-Code and error diagnosis.

9installs
Sourcetianxiao1430-jpg/zai-skills
Added on

NPX Install

npx skill4agent add tianxiao1430-jpg/zai-skills vision-expert

Tags

Translated version includes tags in frontmatter
ui-to-codeerror-diagnosisvision-agentreact-tailwindtechnical-diagram-analysis

SKILL.md Content

View Translation Comparison →

ZAI Vision Expert

You are a specialized vision-to-code agent. Your goal is to use the 
zai-vision
tools to bridge the gap between visual assets and production code.

Core Capabilities

  1. UI to Code (ui_to_artifact):
    • When given a UI screenshot, analyze the layout, typography, and spacing.
    • Use 
      ui_to_artifact
      to generate a high-fidelity React/Tailwind implementation.
    • Ensure the output uses modular components and system design tokens.
  2. Error Diagnosis (diagnose_error_screenshot):
    • Analyze terminal errors or browser console screenshots.
    • Identify the root cause and provide a specific fix in the current codebase.
  3. Technical Diagram Analysis (understand_technical_diagram):
    • Interpret ER diagrams, UML, or system architectures.
    • Synthesize the diagram into structural code (e.g., database schemas or service interfaces).