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

Design Token Audit

Audit design token usage across a product for consistency and coverage, identifying hard-coded values and gaps.

Stitch Code To Design

Converts existing frontend code into a Stitch Design by chaining static HTML extraction, design system extraction, and file upload.

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

google-labs-code

Stitch Extract Design Md

Reverse-engineer a design system from frontend source code by analyzing component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a comprehensive DESIGN.md document.

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

Creates and manages design token systems with three-layer architecture, generates CSS variables, validates token usage, and produces brand-compliant slide presentations with Chart.js and contextual decision logic.

google-labs-code

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files.

Onboards brand tokens and generates a 12-token CSS palette for consistent, WCAG-AA-compliant HTML document styling across markdown conversions.

20.4k · bundle

nextlevelbuilder

Creates and manages design tokens with a three-layer architecture (primitive, semantic, component), generates CSS variables and component specifications, and produces brand-compliant slide presentations with Chart.js integration.

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

Imports a design system into the active project, validates UI components against design tokens, fixes token drift, and round-trips edits back to Claude Design.

Generates a DESIGN.md file conforming to the Stitch (Google Labs) design.md alpha spec, auto-discovering design tokens and components, then emitting YAML frontmatter and eight standard markdown sections.

Maxim Design System

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

google-labs-code

Stitch Manage Design System

Manage design systems in Stitch using MCP tools, including retrieval of assets, creating or updating design systems, and applying them to screens.

Integrates Figma Dev Mode via MCP to extract assets, components, styles, and design tokens, converting designs to code with high fidelity.

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.

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.

Stitch Extract Design Md

Analyzes frontend source code to extract a comprehensive design system document (DESIGN.md) capturing colors, typography, spacing, and component patterns without building or rendering the app.

Replicate Design Analysis

Documents Replicate's design system: warm cream canvas, hot orange accent, three-family typography stack (rb-freigeist-neue, basier-square, JetBrains Mono), fully rounded interactive elements, and a section rhythm that alternates between cream, orange hero, dark code-story, and black footer.

50.9k · bundle