ckryptickunal/OpenDesigner
ckryptickunal
Python77updated today
Python77updated todayA free, open-source add-on for Claude, ChatGPT, Codex and Cursor that turns a few plain answers into a design system, so everything you build looks like it belongs together.
Codex
accessibilityagent-skillsai-agentschatgptclaudeclaude-codeclaude-skillscodexcursordesign-systemdesign-system-generatordesign-tokens
README
<p align="center">
<a href="https://opendesigner.dev">
<picture>
<source media="(max-width: 600px)" srcset="https://raw.githubusercontent.com/ckryptickunal/OpenDesigner/main/brand/kit/readme/banner-narrow.png">
<img src="brand/kit/readme/banner.png" width="1012" alt="OpenDesigner. Make everything you build look like it belongs together. Your AI tools know what to build. OpenDesigner tells them how it should look.">
</picture>
</a>
</p>
<p align="center">
<a href="https://opendesigner.dev"><b>Website</b></a> ·
<a href="https://opendesigner.dev/docs/">Docs</a> ·
<a href="https://opendesigner.dev/showcase/">Showcase</a> ·
<a href="#quickstart">Install</a> ·
<a href="CONTRIBUTING.md">Contribute</a> ·
<a href="https://calendar.app.google/42qSQUrBiSL4CHfv6">Book a 20-minute intro call</a>
</p>
A free, open-source (MIT) add-on for your AI coding tool. It gives your product one design system and checks every screen against it.
<p align="center"> <picture> <source media="(max-width: 600px)" srcset="https://raw.githubusercontent.com/ckryptickunal/OpenDesigner/main/brand/kit/readme/works-in-narrow.png"> <img src="brand/kit/readme/works-in.png" width="1012" alt="Works in Claude Code and the Claude app, ChatGPT and Codex, Cursor, GitHub Copilot and Gemini CLI."> </picture> </p>Two ways in
Fix what you built. It audits every button, font, size, color and alignment on your pages, marks each problem with the rule it breaks, and fixes it after your yes.
Build a system. It reads your repo, studies your competitors, proposes a positioning and three directions, then writes the rules your AI follows.
<picture> <source media="(max-width: 600px)" srcset="https://raw.githubusercontent.com/ckryptickunal/OpenDesigner/main/brand/kit/readme/before-after-narrow.png"> <img src="brand/kit/readme/before-after.png" width="1012" alt="Two versions of an invoices page.