Plugins

2 plugins

Design-taste toolkit: image-to-code, high-end visual design, brutalist/minimalist UI systems, image-gen frontends and redesign workflows from Leonxlnx.

12 skills · plugin

@alirezarezvani

13 product skills with 17 Python tools: product manager toolkit (RICE, PRDs), agile product owner, product strategist, UX researcher, UI design system, competitive teardown, landing page generator, SaaS scaffolder, product analytics, experiment designer, product discovery, roadmap communicator, code-to-prd, research summarizer, apple-hig-expert.

10 skills · plugin

Results for “design-to-code”

21 skills

google-labs-code

Stitch Code To Design

Convert frontend code (Vite, React, etc.) into a Stitch Design by extracting static HTML, analyzing the design system, and uploading to Stitch.

Figma Implement Design

Translates Figma designs into production-ready application code with pixel-perfect accuracy, using the Figma MCP server to fetch design context, screenshots, and assets.

23.3k · bundle

Generates premium website design images, then deeply analyzes them to implement faithful frontend code for hero sections, landing pages, and marketing sites.

Scans a codebase to extract design tokens, typography, colors, spacing, and brand patterns, then writes a Design Context section to CLAUDE.md without asking questions.

Figma Create Design System Rules

Generates custom design system rules for AI coding agents by analyzing a project's codebase and conventions, then saving them to the appropriate rule file (CLAUDE.md, AGENTS.md, or .cursor/rules).

23.3k · bundle

Audits UI code for compliance with the StyleSeed design system, covering design tokens, component conventions, accessibility, mobile UX, and typography.

More results

Figma Generate Library

Build or update a professional-grade design system in Figma from a codebase, creating variables, tokens, component libraries, theming, and documentation.

23.3k · bundle

Maxim Design System

Builds and governs design systems with a three-layer token architecture, component specs, and design-to-code handoff, including slide generation.

Fetch design context, screenshots, variables, and assets from Figma, and translate Figma nodes into production code using the Figma MCP server.

23.3k · bundle

Claude Design Principles

Provides a structured checklist of design principles and rules to produce grounded, non-generic UI/HTML/slide outputs by gathering context, offering multiple variants, and avoiding AI-slop patterns.

Guides CLI/API agents through a design process for one-off HTML artifacts like landing pages, prototypes, and decks, emphasizing context gathering and verification.

Identifies reusable UI patterns, components, and design tokens, then extracts and consolidates them into a design system for systematic reuse.

Takes a PRD, reference URL, screenshot, or keywords to produce a DESIGN.md specification, then generates production-ready web code that meets UI/UX, visual, motion, and responsive standards.

google-labs-code

Stitch Generate Design

Generate new design screens from text prompts or images, edit existing screens, and create design variants using Stitch MCP.

Design Chain Audit

Audits a codebase against a multi-layer design system, checking token, primitive, component, and layout drift with automated grep checks and severity ratings.

Improve Animations

Audits a codebase's animation and motion code, then produces a prioritized list of findings and self-contained implementation plans for other agents to execute.

google-labs-code

Stitch React Components

Converts Stitch designs into modular Vite and React components, or syncs existing components to match updated designs.

Sprintable Design

Generates on-brand interfaces and assets for Sprintable, from throwaway HTML prototypes to production code, using the included design tokens, fonts, and UI kit components.

Web Design Reviewer

Visually inspect websites to identify and fix design issues including layout, responsive, accessibility, and visual consistency problems at the source code level.

36.2k · bundle

Batch-convert UI design screenshots into Vue 3 Composition API components using Vant, Element Plus, or Ant Design Vue.

Performs a meticulous final pass on frontend work, checking visual alignment, typography, color contrast, interaction states, micro-interactions, content, icons, forms, edge cases, responsiveness, performance, and code quality to elevate work from shipped to polished.