Design
Screenshot To Code
Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)
★ 80,0 mil estrelasMIT
Ver o guia →// design · GalaxyXieyu/Design-Learn
Design-Learn
Design-Learn é um projeto de design de código aberto de GalaxyXieyu (GalaxyXieyu/Design-Learn no GitHub). Tem 172 estrelas no GitHub e 16 forks, é publicado sob a licença MIT e foi atualizado pela última vez no GitHub em 19 de abril de 2026.
Extract any site's design language into reusable rules for AI coders
💎 Joia escondida★ 172 estrelas⑂ 16 forksMITatualizado abr 2026
▦ visual: o README deste projeto não inclui nenhuma captura incorporável,
então aqui vai um marcador. O guia abaixo está completo mesmo assim.
então aqui vai um marcador. O guia abaixo está completo mesmo assim.
// dados do projeto
Dados do projeto
- Repositório
- GalaxyXieyu/Design-Learn
- Estrelas no GitHub
- 172
- Forks
- 16
- Licença
- MIT
- Última atualização no GitHub
- 19 de abril de 2026
- Categoria
- Design
- Tipo de ficha
- Joia escondida: uma página mais breve para um projeto menos conhecido
- Site oficial
- Official site
// como funciona
Como funciona
- 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.
// recursos
Por que as pessoas gostam tanto
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
// execute você mesmo
Execute você mesmo
- 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
// casos de uso
O que você pode criar
- 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
// perguntas frequentes
Perguntas frequentes
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.
// continue explorando
Ferramentas semelhantes
Design
Penpot
Penpot: The open-source design platform for Product teams that need scalable collaboration
★ 60,6 mil estrelasMPL-2.0
Ver o guia →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,9 mil estrelasApache-2.0
Ver o guia →Design
dembrandt
Extract any website's design system — logo, colours, typography and tokens — in one command.
★ 3,6 mil estrelasMIT
Ver o guia →Design
presentation-design-prompts
Free slide-design prompt pack for ChatGPT, Claude and any AI tool
★ 166 estrelasMIT
Ver o guia →Design
wibi-style
36 installable visual-design skills for Codex — turn photos into artwork
★ 162 estrelasCustom
Ver o guia →// alternativas
Alternativas em Design
Os outros projetos de Design com mais estrelas no catálogo do LibreAI — a lista realista de alternativas se Design-Learn não for o ideal para você.
- Excalidraw★ 134,0 mil
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,0 mil
Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)
- archify★ 79,8 mil
Turn any idea, plan or codebase into a beautiful interactive architecture diagram — an agent skill
- AFFiNE★ 73,2 mil
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,6 mil
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
// mais em design
Mais em Design
Projetos de Design próximos no catálogo, os mais próximos em estrelas de Design-Learn: continue explorando dos dois lados dele.
- 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
Baixe o Design-Learn
Grátis e aberto: pegue o código-fonte, dê uma estrela no repositório e comece a criar.