design-from-code
Design UI changes from real source code: trace handler->query->schema to confirm what each number counts, iterate faithful AS-IS/TO-BE HTML mockups (keep/new/changed tags), lock a…
Pacote de plugins · de nlook
Resumo
design-from-code é um pacote de plugins para ferramentas de programação com IA publicado por nlook. Marketplaces que lemos e que o listam: 1 (Community GitHub marketplaces). Vimos pela primeira vez em 2026-10-15 e não registramos mudanças desde então. Conforme nossa passagem pelos marketplaces em 2026-10-16.
Design UI changes from real source code: trace handler->query->schema to confirm what each number counts, iterate faithful AS-IS/TO-BE HTML mockups (keep/new/changed tags), lock a design doc, then delegate. Claude Code plugin & Codex skill.
O que pede
- Instala-se como pacote de plugins
Nenhum dos marketplaces que lemos publica as ferramentas ou as configurações que ele pede.
O que declara, pede e executa, por completo
Instale apenas plugins de desenvolvedores em quem você confia. Mostramos o que os marketplaces publicam e não testamos plugins.
Funciona com
- Claude Code
Pelos marketplaces que o listam e pelo transporte MCP que declara, conforme cada cliente documenta. Não testamos plugins.
Conectar
Comandos e configurações gerados apenas a partir do que os marketplaces declaram. Não os executamos por você e não testamos plugins.
Como plugin do Claude Code
Gerado a partir do que Community GitHub marketplaces declara.
/plugin marketplace add ccplugins/awesome-claude-code-plugins
/plugin install design-from-code@awesome-claude-code-pluginsOnde está publicado
| Marketplace | Status | Versão | Números | Verificado | Visto pela primeira vez |
|---|---|---|---|---|---|
| Marketplace da comunidade ccplugins/awesome-claude-code-plugins (Abrir o código no GitHub) | Listado | 1.0.0 | Forks (GitHub): 700 Estrelas (GitHub): 972 |
Sem marcação |
Cada número é do próprio marketplace e nunca é somado entre marketplaces. Um marketplace que não publica números não mostra nenhum: sem número não é zero.
Listado em um marketplace da comunidade
| Marketplace | Repositório | Estrelas (GitHub) |
|---|---|---|
| awesome-claude-code-plugins | ccplugins/awesome-claude-code-plugins | 972 |
O que o pacote contém
Conforme publicado em Community GitHub marketplaces.
Skills: 1
design-from-code
O que mudou
- Passou a ser um produto que acompanhamos
- Community GitHub marketplaces: apareceu
Plugins semelhantes
Produtos cujos próprios nomes, descrições, ferramentas e skills são os mais próximos deste pelo significado, em todos os marketplaces que lemos. A proximidade é ordenada apenas dentro desta lista.
-
Design or redesign frontend UI and marketing graphics on the Superdesign infinite canvas. Reads your codebase for context, sets up a design system, and generates branchable design…
-
Build fast, then refine through specialized lenses. Spawns 8 parallel specialist agents across 4 structured iterations (DIAGNOSE, FOUNDATIONS, ENHANCE, SHIP) to review and…
-
Design fluency for frontend development. Give your agent a designer's vocabulary: 1 skill with 23 commands (/zarishnoksha polish, /zarishnoksha audit, /zarishnoksha critique…
-
Stop prompting. Start pointing. Visual Stack adds a Figma-like feedback layer to Claude Code. Create a new screen from a prompt, screenshot, reference site, or design system, or…
-
Agent-orchestrated design pipeline for Claude Code. Five stages (brief → discover → plan → design → verify), 33 specialized agents, 12 tool connections including Figma, shadcn/ui…
-
Design-first MCP for coding agents that improves websites with screenshot-grounded iteration.
-
Design-system memory and UI quality tools for Claude Code.
-
Use this agent when creating user interfaces, designing components, building design systems, or improving visual aesthetics. This agent specializes in creating beautiful…
-
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
-
Create and edit designs with Claude on a canvas where every design is real code.
Plugins semelhantes por marketplace
A mesma pergunta feita a cada marketplace separadamente: existe lá um equivalente deste plugin?
Listado em Claude Code: claude-plugins-community (5)
-
Agent-orchestrated design pipeline for Claude Code. Five stages (brief → discover → plan → design → verify), 33 specialized agents, 12 tool connections including Figma, shadcn/ui…
-
29 specialized design agents as Claude Code commands. Bring expert design knowledge into every coding session - accessibility, motion design, design systems, color theory…
-
Teaches AI coding tools to design and edit pencil.dev UI files (.pen format) through the Pencil MCP server. Every read and write goes through the MCP for schema validation. Live…
-
Connect Claude Code to Figma with 46 MCP tools, 20 specialized skills, and 8 commands. Read, write, and analyze Figma designs directly — no REST API token required. Privacy-first…
-
Search, preview, inspect, and install MagicPath UI components from Claude Code via the magicpath-ai CLI. Supports MagicPath design system themes.
Listado em Claude Code: claude-plugins-official (5)
-
Design or redesign frontend UI and marketing graphics on the Superdesign infinite canvas. Reads your codebase for context, sets up a design system, and generates branchable design…
-
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.
-
Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the gap between design and…
-
Creates interactive HTML playgrounds — self-contained single-file explorers with visual controls, live preview, and prompt output with copy button. Includes templates for design…
-
Comprehensive feature development workflow with specialized agents for codebase exploration, architecture design, and quality review
Listado em Claude: knowledge-work-plugins (5)
-
Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the gap between design and…
-
Accelerate design workflows — critique, design system management, UX writing, accessibility audits, research synthesis, and dev handoff. From exploration to pixel-perfect specs.
-
Create production-ready Pendo in-app guides (walkthroughs, announcements, alerts, polls, promotions) as HTML/CSS/JS from a short intake conversation, using Pendo's guide…
-
AI-first project auditor and re-engineer based on the 9 design principles and 7 design patterns from the TechWolf AI-First Bootcamp
-
Keep your coding agent up to date with the latest web best practices
Listado em Codex: openai-curated (openai/plugins) (5)
-
Figma workflows for design implementation, Code Connect templates, and design system rule generation.
-
The Product Design plugin is built for turning early ideas into prototypes teams can review. It starts design and build work by confirming the brief, then helps teams explore…
-
Use MagicPath to find, inspect, install, create, and edit UI components from Codex.
-
Build web apps with frontend asset design, browser testing, UI components, payments, and database guidance.
-
Bring your Canva design workflow into Codex and create, refine, and review designs through natural conversation. Available skills: Resize for social media: Adapt a design for…
Listado em Community GitHub marketplaces (5)
-
Design or redesign frontend UI and marketing graphics on the Superdesign infinite canvas. Reads your codebase for context, sets up a design system, and generates branchable design…
-
Build fast, then refine through specialized lenses. Spawns 8 parallel specialist agents across 4 structured iterations (DIAGNOSE, FOUNDATIONS, ENHANCE, SHIP) to review and…
-
Design fluency for frontend development. Give your agent a designer's vocabulary: 1 skill with 23 commands (/zarishnoksha polish, /zarishnoksha audit, /zarishnoksha critique…
-
Stop prompting. Start pointing. Visual Stack adds a Figma-like feedback layer to Claude Code. Create a new screen from a prompt, screenshot, reference site, or design system, or…
-
Design-system memory and UI quality tools for Claude Code.
Listado em Copilot CLI: github/awesome-copilot (5)
-
Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the gap between design and…
-
Equips AI coding agents with knowledge and tooling for working with UI theme designer, the SAP Design System, and SAP Fiori design tokens.
-
Essential prompts, instructions, and chat modes for modern frontend web development including React, Angular, Vue, TypeScript, and CSS frameworks.
-
SAPUI5 / OpenUI5 plugin for GitHub CoPilot. Create and validate UI5 projects, access API documentation, run UI5 linter, get development guidelines and best practices for UI5…
-
Keep your coding agent up to date with the latest web best practices
Listado em Copilot CLI: github/copilot-plugins (5)
-
Build Power Apps Canvas Apps using the Canvas Authoring MCP server.
-
Toolkit for building Microsoft 365 Copilot declarative agents — scaffolding, JSON manifest development, and capability configuration.
-
code-apps-preview
Build and deploy Power Apps code apps using React, Vite, and Power Platform connectors.
-
Bring Azure DevOps work-item, repository, and pull-request workflows into GitHub Copilot.
-
model-apps
Build and deploy Power Apps generative pages for model-driven apps with specialist agents for planning, entity creation, and parallel code generation. Requires PAC CLI >= 2.7.0…
Listado em Cursor: cursor/plugins (5)
-
Render PR diffs as review canvases grouped by importance.
-
Skills for building on the Cursor Origin API. Fetch the live spec first, then follow the Origin rules for credentials, scopes, webhooks, paging, and errors. Includes a skill that…
-
Render documentation as a navigable canvas.
-
Build apps, scripts, and automations with the TypeScript SDK.
-
Generate presentations, documents, and webpages.
Listado em Docker MCP Catalog (5)
-
Generate images, video, and audio with Glif's media-generation agent
-
Stop stitching context for Copilot and Cursor. With Sequa MCP, your AI tools know your entire codebase and docs out of the box.
-
next-devtools-mcp is a Model Context Protocol (MCP) server that provides Next.js development tools and utilities for AI coding assistants.
-
Tools and resources for writing Effect code in Typescript.
-
Access the latest Astro web framework documentation, guides, and API references.
Listado em Official MCP Registry (5)
-
Design-first MCP for coding agents that improves websites with screenshot-grounded iteration.
-
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
-
saglitzdesign-mcp io.github.HalidSaglam/saglitzdesign-mcp
Expert design & marketing MCP: UI/UX, design languages, SEO/GEO, tokens, a11y, recipes.
-
Generates React components and design frameworks from visual layouts.
-
Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the gap between design and…
Encontrados pelo significado, não por código ou repositório em comum: plugins semelhantes continuam sendo produtos distintos, e isto não é uma avaliação nem uma recomendação.
Quer esta marca no seu plugin em nosso catálogo?
Prove que o mantém com um arquivo no repositório, um arquivo no seu domínio ou um registro DNS, e você poderá mostrar esta marca na ficha, com banners ao vivo para o seu site e o README. Como funciona a verificação
Você também recebe alertas quando um marketplace o publica, o remove, muda a marca de verificado ou o que ele pede, e o endpoint remoto passa a ser monitorado como um serviço web.
Dados de Community GitHub marketplaces. Os números vêm das nossas próprias passagens regulares pelos marketplaces, última leitura em . Não publicamos dados de contato dos editores de plugins.