Generate SVG or PNG mockup images of UI screens and components in wireframe, mockup, or component preview modes.
MIT
224,369 tools. Last updated 2026-06-22 11:39
"Tools and Methods to Create SVG and PNG Components for UI Design" matching MCP tools:
- Discover available UI patterns and their descriptions before building components. Returns an array of pattern names to guide development.MIT
- Scan a project to inventory existing UI components for review, documentation, or design-system curation. Outputs a catalog in JSON or Markdown.MIT
- Convert DGMO diagram markup into SVG or PNG images with support for multiple diagram types, themes, and color palettes.MIT
- Convert slide plans into formatted visual assets for LinkedIn, Instagram, or Threads by generating SVG, PDF, or PNG files with custom graphics and brand templates.MIT
- Extracts colors, typography, components, and layout from UI design images for machine learning training. Privacy-friendly, no image storage.MIT
Matching MCP Servers
- Alicense-qualityBmaintenanceMCP server for ingesting UI screenshots, Figma MCP node JSON, or hybrid Figma-plus-screenshot sources into a cross-platform design-to-code artifact pipeline.Last updatedMIT
- -license-quality-maintenanceEnables AI assistants to interact with Databricks workspaces, running SQL queries, managing jobs, and exploring schemas via the Model Context Protocol.Last updated1
Matching MCP Connectors
Native Claude Code integration for @annondeveloper/ui-kit — a zero-dependency React component library with 147 components, 3 weight tiers, physics-based animations, and OKLCH color system. Gives Claude deep awareness of the library's components, design patterns, and conventions. Includes 5 skills for component discovery, code generation, design system reference, tier selection, and accessibility auditing. 2 custom agents for architecture design and accessibility review. Auto-connects to a hoste
Create, edit, preview, publish, and manage web pages from MCP-capable AI clients.
- Search for UI design inspiration across Dribbble, Behance, Awwwards, Mobbin, and Pinterest. Find images with URLs, dimensions, and source links using specific design queries like 'dashboard dark mode' or 'mobile onboarding flow'.MIT
- Downloads a layer's visual asset (SVG, PNG, PDF, JPG) from Zeplin and saves it to a local path. Use when an asset is missing from the codebase.MIT
- Analyze any OpenSIPS route block to identify its components: SIP methods handled, module functions called, conditions, and overall flow. Understand routing logic with clear breakdown.Apache 2.0
- Rank a palette of foreground colors by contrast ratio with WCAG grades and get recommendations for body text, large text, and UI components.MIT
- Add LPM packages to your project by extracting source files for customization. Use for UI components, blocks, templates, and MCP servers.ISC
- Analyzes design references from URLs and images to extract colors, typography, layout patterns, and UI components. Identifies common patterns across multiple sources to inform UI/UX generation decisions.MIT
- Retrieve detailed design specifications for a UI component from Zeplin, including properties, variants, layers, and design tokens.MIT
- List all design repositories in OpenL Studio and return their display names for use in other tools.LGPL 3.0
- Generate UI components for React, Vue, Angular, Svelte, or HTML with style audit and design context awareness. Integrates with libraries like shadcn/ui, Radix UI, and more.MIT
- Generate UI components from popular libraries like shadcn, radix, headlessui, or material UI with support for themes, custom props, tests, stories, and framework-specific output.MIT
- Generate UI components with modern best practices for React, Vue, or Angular frameworks, including accessibility features and responsive design options.MIT
- Render a Figma node as an image (PNG, JPG, SVG, or PDF) at a specified scale to visually verify edits without modifying the design.MIT
- Capture a screenshot of any Figma node or page for visual inspection or analysis. Use the image data to feed into design analysis tools.MIT
- Render a specific page from a reMarkable document as an image (PNG or SVG) to view hand-drawn diagrams, sketches, or annotated PDFs merged with the annotation layer.MIT