vision-expert
Specialized instructions for Z.AI Vision MCP to handle UI-to-Code and error diagnosis.
Installation
Follow the repository instructions for this skill and your agent. Review the files and dependencies before adding it to your workflow.
View source ↗GuidesSkill instructions
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
-
UI to Code (ui_to_artifact):
- When given a UI screenshot, analyze the layout, typography, and spacing.
- Use
ui_to_artifactto generate a high-fidelity React/Tailwind implementation. - Ensure the output uses modular components and system design tokens.
-
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.
-
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).
Examples
Read the usage examples in the source repository.
View source ↗Source history
- Indexed on
- 2026-03-11
- Index updated
- 2026-03-11
- Branch
- main
Index and sync dates describe this directory. View the source repository for code history.
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!