Design
Screenshot To Code
Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)
★ 80.0k starsMIT
View guide →// design · GalaxyXieyu/Design-Learn
Design-Learn
Design-Learn is an open-source design project by GalaxyXieyu (GalaxyXieyu/Design-Learn on GitHub). It has 172 GitHub stars and 16 forks, is released under the MIT license, and was last updated on GitHub on 19 April 2026.
Extract any site's design language into reusable rules for AI coders
💎 Hidden gem★ 172 stars⑂ 16 forksMITupdated 2026-04
▦ visual — this project's README ships no embeddable screenshot,
so here's a placeholder. The guide below is complete regardless.
so here's a placeholder. The guide below is complete regardless.
// project facts
Project facts
- Repository
- GalaxyXieyu/Design-Learn
- GitHub stars
- 172
- Forks
- 16
- License
- MIT
- Last updated on GitHub
- 19 April 2026
- Category
- Design
- Listing
- Hidden gem — a shorter page for a lesser-known project
- Official site
- Official site
// how it works
How it works
- Install the extension
Add Design-Learn to Chrome.
- Visit a reference
Open the site whose style you like.
- Extract rules
The tool analyzes the UI into design tokens.
- Feed to AI
Give the rules to your AI coding tool.
// features
Why people love it
Design extraction
Turn any site into UI rules.
Design tokens
Colors, spacing, type as data.
Chrome extension
Analyze while you browse.
AI-ready output
Rules your coder can follow.
UI analysis
Structured design-system view.
MIT licensed
Free for commercial use with attribution.
Advertisement
// run it
Run it yourself
- Step 1 — Clone the repo
Download the source and move into the project folder.
git clone https://github.com/GalaxyXieyu/Design-Learn.git cd Design-Learn - Step 2 — Check the README
Every project documents its own setup; start with install requirements.
cat README.md | head -60 - Step 3 — Run it
Follow the project's launch command — Docker, pip, npm, or a binary release.
# see README for the exact launch command
// use cases
What you can build
- Steal like an artist — extract design systems.
- Make AI code match a reference style.
- Document a site's visual language.
- Build consistent UIs with AI help.
Advertisement
// faq
Questions, answered
Who maintains Design-Learn?
It is an open-source project at GalaxyXieyu/Design-Learn with 162 forks. Check the repo's contributors and recent commits to see how active maintenance is.
Is Design-Learn free for commercial use?
MIT licensed — commercial use allowed with attribution.
How do I use it?
As a Chrome extension — visit a site, extract, feed to AI.
Which AI tools accept the rules?
Any coding assistant that takes design context — see the docs.
Does it copy the site?
It extracts design language into rules, not the site's assets.
// keep exploring
Similar tools
Design
Penpot
Penpot: The open-source design platform for Product teams that need scalable collaboration
★ 60.6k starsMPL-2.0
View guide →Design
Onlook
The Developer Tool for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your code with AI • World's…
★ 26.9k starsApache-2.0
View guide →Design
dembrandt
Extract any website's design system — logo, colours, typography and tokens — in one command.
★ 3.6k starsMIT
View guide →Design
presentation-design-prompts
Free slide-design prompt pack for ChatGPT, Claude and any AI tool
★ 166 starsMIT
View guide →Design
wibi-style
36 installable visual-design skills for Codex — turn photos into artwork
★ 162 starsCustom
View guide →// alternatives
Alternatives in Design
The most-starred other Design projects in the LibreAI catalogue — the realistic shortlist if Design-Learn is not the right fit.
- Excalidraw★ 134.0k
Excalidraw — the virtual whiteboard with the hand-drawn look: infinite canvas, real-time collaboration and end-to-end encrypted sharing, MIT-licensed
- Screenshot To Code★ 80.0k
Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)
- archify★ 79.8k
Turn any idea, plan or codebase into a beautiful interactive architecture diagram — an agent skill
- AFFiNE★ 73.2k
There can be more than Notion and Miro. AFFiNE(pronounced [ə‘fain]) is a next-gen knowledge base that brings planning, sorting and creating all together. Pri…
- draw.io Desktop★ 63.6k
draw.io Desktop — the official offline desktop app for diagrams.net: flowcharts, architecture diagrams and wireframes in an Electron app that never sends your diagram data anywhere, GPL-3.0
// more in design
More in Design
Nearby Design projects in the catalogue, closest in stars to Design-Learn — keep exploring the shelf either side of it.
- langchat-slides★ 218
An AI slide-deck generator built on Vue 3: describe your topic and it produces
- presentation-design-prompts★ 166
Free slide-design prompt pack for ChatGPT, Claude and any AI tool
- glade-mcp★ 221
Connect AI coding assistants to Unity or Godot with 275+ tools
- paiml-mcp-agent-toolkit★ 164
MCP agent toolkit that makes AI-written code more deterministic
- Smart-AI-Resume-Analyzer★ 256
AI resume analyzer — ATS-friendly templates and job-winning optimization
- wibi-style★ 162
36 installable visual-design skills for Codex — turn photos into artwork
Get Design-Learn
Free and open — grab the source, star the repo, and start creating.