opendesigner plugin
Nine skills: opendesigner (the interview), opendesigner-extract (learn from a reference without copying identity), opendesigner-extend (change a system safely), opendesigner-export (code, Figma, Paper), opendesigner-illustrate (open-licence illustrations recolored to your tokens), opendesigner-review (check a built UI at every size, theme, state and motion, with measurements and evidence), opendesigner-paint (original art and films painted in code in your palette), opendesigner-preflight (the silly mistakes to check before exporting anything visual), opendesigner-search (get a site found by search engines and AI answers).
How to install the opendesigner plugin
Run both commands inside Claude Code. The first adds the marketplace once; the second installs the plugin.
/plugin marketplace add ckryptickunal/OpenDesigner
/plugin install opendesigner@opendesignerWhat's inside opendesigner
11 parts read from the plugin's own files.
Skills 10
Claude loads it when the task matches- opendesigner
Design systems and the pages built on them, one question at a time. Use for tokens, DESIGN.md, a landing page, an app or a redesign ("make it look professional"), a style direction, a taste poll.
- opendesigner-export
Exports an OpenDesigner system to CSS variables, Tailwind, DTCG, Swift, Compose, Figma or Paper, and writes it into Figma or Paper when connected. Use for "export tokens" or "put it in Figma".
- opendesigner-extend
Changes an existing OpenDesigner system (an opendesigner/ folder), such as a new colour, rounder corners, dark mode or a component. Reads DESIGN.md, decisions and locks first, asks only what is new.
- opendesigner-extract
Learns a look from a website, screenshot, Figma file, repo CSS or brand book. Measures it, maps it to dials, or writes a taste index. Copies structure and quality, never a brand's identity.
- opendesigner-illustrate
Illustrations, stock photos and icons. Finds open-licence art, recolours it to the tokens and wires it in (empty states, onboarding, hero), with a licence ledger. Draws icons like a product's own.
- opendesigner-paint
Original art painted in code in the brand's palette. A hero or launch film, a celebration loop, or a still in watercolour, pointillism, charcoal, sketch, woodcut or 2D cel.
- opendesigner-preflight
A launch checklist for anything visual (page, video, deck, share image, UI) that catches the silly mistakes that look cheap or wrong. Use before any render, export, deploy, post or publish.
- opendesigner-review
Audits every draft of a built UI before it is shown, like a careful user. Every screen size and theme, scroll, hover, keyboard, motion, measured spacing, type and contrast. "Review this", "QA this".
- opendesigner-search
SEO, AEO and GEO. Gets a site found by Google and AI answer engines. Checks crawling, robots, sitemap, llms.txt, titles and markup, asks ChatGPT and Perplexity by hand, proposes fixes.
- opendesigner-smart-ui
Optional. An assistant's answers show a part of the person's own system (a chart, a form, a booking step) instead of text. Reads the repo, writes an A2UI catalog, checks each answer before it renders.
Hooks 1
Runs on these events- SessionStartcommand
startup|resume|clear|compact
Using opendesigner in Claude Code
Skills need no command. Claude reads them when your request matches what they describe.
Update, turn off or remove
- Update the plugin (shell)
- claude plugin update opendesigner@opendesigner
- Refresh the marketplace
- /plugin marketplace update opendesigner
- Turn it off for now
- /plugin disable opendesigner@opendesigner
- Remove it
- /plugin uninstall opendesigner@opendesigner
Skills in opendesigner
- opendesignerckryptickunal/OpenDesigner
Design systems and the pages built on them, one question at a time. Use for tokens, DESIGN.md, a landing page, an app or a redesign ("make it look professional"), a style direction, a taste poll.
200 files151stars - opendesigner-exportckryptickunal/OpenDesigner
Exports an OpenDesigner system to CSS variables, Tailwind, DTCG, Swift, Compose, Figma or Paper, and writes it into Figma or Paper when connected. Use for "export tokens" or "put it in Figma".
2 files151stars - opendesigner-extendckryptickunal/OpenDesigner
Changes an existing OpenDesigner system (an opendesigner/ folder), such as a new colour, rounder corners, dark mode or a component. Reads DESIGN.md, decisions and locks first, asks only what is new.
2 files151stars - opendesigner-extractckryptickunal/OpenDesigner
Learns a look from a website, screenshot, Figma file, repo CSS or brand book. Measures it, maps it to dials, or writes a taste index. Copies structure and quality, never a brand's identity.
7 files151stars - opendesigner-illustrateckryptickunal/OpenDesigner
Illustrations, stock photos and icons. Finds open-licence art, recolours it to the tokens and wires it in (empty states, onboarding, hero), with a licence ledger. Draws icons like a product's own.
9 files151stars - opendesigner-paintckryptickunal/OpenDesigner
Original art painted in code in the brand's palette. A hero or launch film, a celebration loop, or a still in watercolour, pointillism, charcoal, sketch, woodcut or 2D cel.
148 files151stars - opendesigner-preflightckryptickunal/OpenDesigner
A launch checklist for anything visual (page, video, deck, share image, UI) that catches the silly mistakes that look cheap or wrong. Use before any render, export, deploy, post or publish.
7 files151stars - opendesigner-reviewckryptickunal/OpenDesigner
Audits every draft of a built UI before it is shown, like a careful user. Every screen size and theme, scroll, hover, keyboard, motion, measured spacing, type and contrast. "Review this", "QA this".
12 files151stars - opendesigner-searchckryptickunal/OpenDesigner
SEO, AEO and GEO. Gets a site found by Google and AI answer engines. Checks crawling, robots, sitemap, llms.txt, titles and markup, asks ChatGPT and Perplexity by hand, proposes fixes.
8 files151stars - opendesigner-smart-uickryptickunal/OpenDesigner
Optional. An assistant's answers show a part of the person's own system (a chart, a form, a booking step) instead of text. Reads the repo, writes an A2UI catalog, checks each answer before it renders.
18 files151stars
opendesigner plugin questions
How do I install the opendesigner plugin?
In Claude Code run /plugin marketplace add ckryptickunal/OpenDesigner, then /plugin install opendesigner@opendesigner.
What does the opendesigner plugin include?
opendesigner bundles 10 skills, hooks.
How do I update or remove the opendesigner plugin?
Update it with claude plugin update opendesigner@opendesigner in your shell, or from the Installed tab of /plugin. Remove it with /plugin uninstall opendesigner@opendesigner.
What license is the opendesigner plugin under?
MIT, as stated in the plugin's manifest.