Plugin open-design
Make posters, social posts, slides, landing pages and prototypes in your chat, with ready-made design systems, checks and PDF, PNG or PowerPoint exports.
Como instalar o plugin open-design
Execute os dois comandos dentro do Claude Code. O primeiro adiciona o marketplace uma vez; o segundo instala o plugin.
/plugin marketplace add feimacode/open-design-agent-kit
/plugin install open-design@open-design-agent-kitO que há dentro de open-design
47 partes lidas dos próprios arquivos do plugin.
Agentes 1
Chame como @agent-open-design:nome- @agent-open-design:design-critic
Fresh-eyes design critic for Open Design artifacts. Use from the open-design-critique skill (the open-design skill's check step, or when the user asks for a second opinion): give it the artifact's entry path, the critiqueInput from get_open_design_artifact with critique true, and full paths to the c
Skills 45
Claude o carrega quando a tarefa coincide- od-deck-deck-guizang-editorial
Converts content into an editorial magazine style e-ink horizontal deck using specific layouts and palettes.
- od-deck-deck-open-slide-canvas
Generates a 1920x1080 React-based slide deck using the Open Design system based on a provided brief.
- od-deck-deck-swiss-international
Generates a 16-column-grid presentation deck using the Swiss International template with 22 locked layouts and real content.
- od-deck-guizang-ppt
Generates marketing and go-to-market decks using the Guizang Ppt visual system to connect creative choices to measurable growth.
- od-deck-ppt-keynote
Generates Keynote-style slide decks with keyboard navigation using the Open Design system.
- od-prototype-article-magazine
Converts content into long-form HTML essays inspired by Huashu magazine layouts using Open Design templates.
- od-prototype-card-twitter
Generates Twitter quote or data cards designed to accompany social media posts using the Open Design system.
- od-prototype-card-xiaohongshu
Xiaohongshu Card (Open Design) — use only when the user explicitly runs this skill
- od-prototype-data-report
Generates visual report pages from CSV, Excel, or JSON data using Open Design templates.
- od-prototype-doc-kami-parchment
Kami Parchment Document (Open Design) — use only when the user explicitly runs this skill
- od-prototype-mockup-device-3d
Generates 3D-style iPhone and MacBook mockups with embedded HTML content for device showcases.
- od-prototype-poster-hero
Generates vertical posters or Moments-style share images from user content using the Open Design system.
- od-prototype-resume-modern
Generates a modern minimal single-page A4 resume for print or PDF export using the Open Design system.
- od-prototype-social-carousel
Generates cinematic 1080x1080 social media carousels for Instagram using the Open Design system.
- od-prototype-social-reddit-card
Generates realistic Reddit post cards with vote rails and comment counts for video overlays or social media stories.
- od-prototype-social-spotify-card
Spotify Now-Playing Card (Open Design) — use only when the user explicitly runs this skill
- od-prototype-social-x-post-card
Generates realistic X post cards with engagement metrics for use in video overlays or shareable image cards.
- od-prototype-social-youtube-thumbnail
Generates high-contrast YouTube thumbnails featuring a short hook line and a strong focal subject using the Open Design system.
- od-video-frame-data-chart-nyt
NYT-Style Data Chart Frame (Open Design) — use only when the user explicitly runs this skill
- od-video-frame-flowchart-sticky
Creates whiteboard-style flowchart frames with SVG connectors and sticky-note nodes from user content.
- od-video-frame-glitch-title
Generates digital-glitch and chromatic-offset title frames for video transitions or cyberpunk-themed content.
- od-video-frame-light-leak-cinema
Creates cinematic video openings or chapter cards featuring film light leaks, grain, letterbox framing, and serif typography.
- od-video-frame-liquid-bg-hero
Creates WebGL-style fluid displacement backgrounds with quote overlays for video intros, landing hero sections, or posters.
- od-video-frame-logo-outro
Generates video outro or brand closing frames with segmented logo assembly, glow bloom, and tagline reveals.
- od-video-frame-macos-notification
Generates realistic macOS notification banner overlays for video content or product teasers using the Open Design system.
- od-video-vfx-text-cursor
Generates video intro quote reveals with cursor light trails, chromatic rays, and directional flares using Open Design templates.
- od-video-video-hyperframes
Creates continuous frame animations compatible with Hyperframes and Remotion using the Open Design framework.
- open-design
Generate and export visual designs like posters, slide decks, and landing pages using bundled design skills and ready-made design systems.
- open-design-campaign
Turn one brief into a whole campaign — one master design exported to every channel size (social, link previews, banners, display ads), plus an optional landing page and email, in every language you need, checked and shown on one campaign sheet — use whenever the user wants a campaign, a launch kit, assets for several channels or sizes at once, ad banners in several sizes, or the same creative in several languages, even if they don't mention Open Design
- open-design-critique
Get a second opinion on an Open Design artifact from a design critic, judged from its latest check screenshots, the brief and the design system against a fixed rubric, with one verdict (ship, polish or rework) and at most five fixes — use before telling the user a design is done (the open-design skill's check step), and whenever the user asks for a second opinion, another opinion, a critique or a review of an Open Design artifact, or asks "is this good?"
- open-design-deck-from-source
Turn a document (a report, spec, spreadsheet, PDF, existing deck, or repository files such as a CHANGELOG) into a deck or one-pager, storyline first, with every number traced back to the source — use whenever the user wants slides, a deck, a presentation or a one-pager made from an existing document, spreadsheet, PDF or deck, or from repository files (CHANGELOG, RFCs, architecture decision records, metrics CSVs), even if they don't mention Open Design
- open-design-design-system-from-url
Make a design system from a website, a Figma file or a Canva design — measure its real colours, fonts, spacing and button states, write DESIGN.md and tokens.css that agree, and check the result side by side with the source before saving — use whenever the user wants a design system, brand kit, theme or tokens taken from a website, URL, Figma file or Canva design ("make a design system from stripe.com", "take our design system from my Figma file", "use my Canva brand", "match our site's look", "extract the brand from this page"), even if they don't mention Open Design
- open-design-docs
Turn a folder of Markdown documents (ADRs, RFCs, runbooks, notes) into designed HTML pages, one per file, all in one style, and keep them in step when the Markdown changes — use whenever the user wants several Markdown files (a docs folder, ADRs, RFCs, runbooks, meeting notes) turned into HTML pages, or wants HTML versions of existing docs refreshed after edits
- open-design-edit
Steer one part of an existing design in one direction — bolder, quieter, denser, roomier, simpler, more polished or sturdier — and change nothing else, with a check that proves only that part changed and a before and after to show — use whenever the user wants one part of an existing Open Design design changed in a direction rather than redesigned ("make the hero pop", "tone down the footer", "the table feels cramped", "simplify this section", "clean up the pricing cards", "what if the names are really long?", "make it bolder"), or clicked a verb in the preview, even if they don't mention Open Design; not for a new design or a whole new direction
- open-design-explore
Explore 2–4 deliberately different design directions for one brief, compare them side by side, then build out the one you pick — use whenever the user explicitly asks for several options, directions, alternatives or versions of a design to compare ("show me three directions for…", "a few different takes on…"), even if they don't mention Open Design; not for a single, ordinary design request
- open-design-integrations
Displays available service integrations, their connection status, and provides setup instructions for tools like Canva, Figma, and Notion.
- open-design-new
Start a new design by picking what to make (prototype, app screens, mobile app, slides, document, wireframe, animation, résumé, research, data report, poster, social post, diagram), then build it with the right recipe
- open-design-portfolio
Build a designer's portfolio from their real work — a work library of projects, facts and images (screenshots, Figma frames, live pages, kit designs) entered once, with privacy levels, redaction and alt text, then a portfolio site or interview deck from it — use whenever the user wants to build, update or tidy a design portfolio, case studies or a body of work to show (job hunting, client pitches, Dribbble or Behance, a portfolio review, a promotion packet), or wants to add a project, screenshots, Figma frames or a live product to their portfolio, even if they don't mention Open Design
- open-design-poster
Design a poster or flyer for print or screen, check it, and export print-ready PDFs or upload-ready images, including other sizes and one version per row of a spreadsheet — use whenever the user wants a poster, flyer, event or gig poster, print piece, handout, certificate or name card set, or wants an existing design in other sizes or as a print-ready PDF, even if they don't mention Open Design
- open-design-preview
Open an Open Design artifact in a live browser preview, where you can see it update as it changes, click elements to comment on them, and compare check screenshots before and after — use whenever the user asks to see, show, preview or open an Open Design artifact, or wants to comment on one visually
+5
MCP servers 1
Inicia com o plugin- open-designstdio
node ${CLAUDE_PLUGIN_ROOT}/scripts/open-design-mcp.mjs
Usando open-design no Claude Code
Peça um agente pelo nome:
@agent-open-design:design-criticSkills não precisam de comando. Claude as lê quando sua solicitação corresponde ao que elas descrevem.
Atualizar, desligar ou remover
- Atualizar o plugin (shell)
- claude plugin update open-design@open-design-agent-kit
- Atualizar o marketplace
- /plugin marketplace update open-design-agent-kit
- Desligar por enquanto
- /plugin disable open-design@open-design-agent-kit
- Remover
- /plugin uninstall open-design@open-design-agent-kit
Skills em open-design
- open-designfeimacode/open-design-agent-kit
Generate and export visual designs like posters, slide decks, and landing pages using bundled design skills and ready-made design systems.
2 arquivos1,1 milestrelas - open-design-campaignfeimacode/open-design-agent-kit
Turn one brief into a whole campaign — one master design exported to every channel size (social, link previews, banners, display ads), plus an optional landing page and email, in every language you need, checked and shown on one campaign sheet — use whenever the user wants a campaign, a launch kit, assets for several channels or sizes at once, ad banners in several sizes, or the same creative in several languages, even if they don't mention Open Design
1,1 milestrelas - open-design-critiquefeimacode/open-design-agent-kit
Get a second opinion on an Open Design artifact from a design critic, judged from its latest check screenshots, the brief and the design system against a fixed rubric, with one verdict (ship, polish or rework) and at most five fixes — use before telling the user a design is done (the open-design skill's check step), and whenever the user asks for a second opinion, another opinion, a critique or a review of an Open Design artifact, or asks "is this good?"
1,1 milestrelas - open-design-deck-from-sourcefeimacode/open-design-agent-kit
Turn a document (a report, spec, spreadsheet, PDF, existing deck, or repository files such as a CHANGELOG) into a deck or one-pager, storyline first, with every number traced back to the source — use whenever the user wants slides, a deck, a presentation or a one-pager made from an existing document, spreadsheet, PDF or deck, or from repository files (CHANGELOG, RFCs, architecture decision records, metrics CSVs), even if they don't mention Open Design
1,1 milestrelas - open-design-design-system-from-urlfeimacode/open-design-agent-kit
Make a design system from a website, a Figma file or a Canva design — measure its real colours, fonts, spacing and button states, write DESIGN.md and tokens.css that agree, and check the result side by side with the source before saving — use whenever the user wants a design system, brand kit, theme or tokens taken from a website, URL, Figma file or Canva design ("make a design system from stripe.com", "take our design system from my Figma file", "use my Canva brand", "match our site's look", "extract the brand from this page"), even if they don't mention Open Design
1,1 milestrelas - open-design-docsfeimacode/open-design-agent-kit
Turn a folder of Markdown documents (ADRs, RFCs, runbooks, notes) into designed HTML pages, one per file, all in one style, and keep them in step when the Markdown changes — use whenever the user wants several Markdown files (a docs folder, ADRs, RFCs, runbooks, meeting notes) turned into HTML pages, or wants HTML versions of existing docs refreshed after edits
1,1 milestrelas - open-design-editfeimacode/open-design-agent-kit
Steer one part of an existing design in one direction — bolder, quieter, denser, roomier, simpler, more polished or sturdier — and change nothing else, with a check that proves only that part changed and a before and after to show — use whenever the user wants one part of an existing Open Design design changed in a direction rather than redesigned ("make the hero pop", "tone down the footer", "the table feels cramped", "simplify this section", "clean up the pricing cards", "what if the names are really long?", "make it bolder"), or clicked a verb in the preview, even if they don't mention Open Design; not for a new design or a whole new direction
1,1 milestrelas - open-design-explorefeimacode/open-design-agent-kit
Explore 2–4 deliberately different design directions for one brief, compare them side by side, then build out the one you pick — use whenever the user explicitly asks for several options, directions, alternatives or versions of a design to compare ("show me three directions for…", "a few different takes on…"), even if they don't mention Open Design; not for a single, ordinary design request
1,1 milestrelas - open-design-integrationsfeimacode/open-design-agent-kit
Displays available service integrations, their connection status, and provides setup instructions for tools like Canva, Figma, and Notion.
1,1 milestrelas - open-design-newfeimacode/open-design-agent-kit
Start a new design by picking what to make (prototype, app screens, mobile app, slides, document, wireframe, animation, résumé, research, data report, poster, social post, diagram), then build it with the right recipe
1,1 milestrelas - open-design-portfoliofeimacode/open-design-agent-kit
Build a designer's portfolio from their real work — a work library of projects, facts and images (screenshots, Figma frames, live pages, kit designs) entered once, with privacy levels, redaction and alt text, then a portfolio site or interview deck from it — use whenever the user wants to build, update or tidy a design portfolio, case studies or a body of work to show (job hunting, client pitches, Dribbble or Behance, a portfolio review, a promotion packet), or wants to add a project, screenshots, Figma frames or a live product to their portfolio, even if they don't mention Open Design
1,1 milestrelas - open-design-posterfeimacode/open-design-agent-kit
Design a poster or flyer for print or screen, check it, and export print-ready PDFs or upload-ready images, including other sizes and one version per row of a spreadsheet — use whenever the user wants a poster, flyer, event or gig poster, print piece, handout, certificate or name card set, or wants an existing design in other sizes or as a print-ready PDF, even if they don't mention Open Design
1,1 milestrelas - open-design-previewfeimacode/open-design-agent-kit
Open an Open Design artifact in a live browser preview, where you can see it update as it changes, click elements to comment on them, and compare check screenshots before and after — use whenever the user asks to see, show, preview or open an Open Design artifact, or wants to comment on one visually
1,1 milestrelas - open-design-publishfeimacode/open-design-agent-kit
Share an Open Design artifact as a live link (a temporary no-account link, or your own Netlify, Vercel, Cloudflare Pages or GitHub Pages), or as one self-contained HTML file — use whenever the user wants to share, publish, deploy or host an Open Design artifact, or get a link to send to teammates or stakeholders; also when they want a single HTML file to attach or send
1,1 milestrelas - open-design-recurringfeimacode/open-design-agent-kit
Automate recurring design tasks like weekly report decks or social media posts using scheduled job files and a scheduler.
1,1 milestrelas - open-design-redesignfeimacode/open-design-agent-kit
Redesign existing websites by auditing current content and branding to create a new, improved multi-page concept site.
1,1 milestrelas - open-design-site-auditfeimacode/open-design-agent-kit
Audit a live website with Open Design's own checks — contrast, tap targets, phone layout, larger text, broken images, page weight and template looks — and get a short, plain-language report of the biggest problems with marked screenshots — use whenever the user wants a website audited, checked or reviewed for design, accessibility or mobile problems ("audit this site", "what's wrong with our website", "find problems on example.com", "why does our site look bad on phones"), or wants talking points before pitching a redesign, even if they don't mention Open Design
1,1 milestrelas - open-design-social-postfeimacode/open-design-agent-kit
Design social media posts for platforms like X, Instagram, and YouTube and export them as upload-ready files.
1,1 milestrelas - od-deck-deck-guizang-editorialfeimacode/open-design-agent-kit
Converts content into an editorial magazine style e-ink horizontal deck using specific layouts and palettes.
1,1 milestrelas - od-deck-deck-open-slide-canvasfeimacode/open-design-agent-kit
Generates a 1920x1080 React-based slide deck using the Open Design system based on a provided brief.
1,1 milestrelas - od-deck-deck-swiss-internationalfeimacode/open-design-agent-kit
Generates a 16-column-grid presentation deck using the Swiss International template with 22 locked layouts and real content.
1,1 milestrelas - od-deck-guizang-pptfeimacode/open-design-agent-kit
Generates marketing and go-to-market decks using the Guizang Ppt visual system to connect creative choices to measurable growth.
1,1 milestrelas - od-deck-ppt-keynotefeimacode/open-design-agent-kit
Generates Keynote-style slide decks with keyboard navigation using the Open Design system.
1,1 milestrelas - od-prototype-article-magazinefeimacode/open-design-agent-kit
Converts content into long-form HTML essays inspired by Huashu magazine layouts using Open Design templates.
1,1 milestrelas - od-prototype-card-twitterfeimacode/open-design-agent-kit
Generates Twitter quote or data cards designed to accompany social media posts using the Open Design system.
1,1 milestrelas - od-prototype-card-xiaohongshufeimacode/open-design-agent-kit
Xiaohongshu Card (Open Design) — use only when the user explicitly runs this skill
1,1 milestrelas - od-prototype-data-reportfeimacode/open-design-agent-kit
Generates visual report pages from CSV, Excel, or JSON data using Open Design templates.
1,1 milestrelas - od-prototype-doc-kami-parchmentfeimacode/open-design-agent-kit
Kami Parchment Document (Open Design) — use only when the user explicitly runs this skill
1,1 milestrelas - od-prototype-mockup-device-3dfeimacode/open-design-agent-kit
Generates 3D-style iPhone and MacBook mockups with embedded HTML content for device showcases.
1,1 milestrelas - od-prototype-poster-herofeimacode/open-design-agent-kit
Generates vertical posters or Moments-style share images from user content using the Open Design system.
1,1 milestrelas
Perguntas sobre o plugin open-design
Como instalo o plugin open-design?
No Claude Code, execute /plugin marketplace add feimacode/open-design-agent-kit e depois /plugin install open-design@open-design-agent-kit.
O que o plugin open-design inclui?
open-design agrupa 1 agent, 45 skills, MCP servers.
Quais agentes vêm com open-design?
design-critic. Chame um com @agent-open-design:design-critic.
Como eu atualizo ou removo o plugin open-design?
Atualize-o com claude plugin update open-design@open-design-agent-kit no seu shell, ou pela aba Instalados de /plugin. Remova-o com /plugin uninstall open-design@open-design-agent-kit.
Sob qual licença o plugin open-design está?
MIT, conforme declarado no manifesto do plugin.