Sign in with Google

AI tools for UI and product design

Design apps, turn screenshots into code and give your coding agent good taste, with open-source tools.

For developers and designers who want AI help with screens: design apps you can host, tools that turn a screenshot into code, and skills that give a coding agent better taste.

8 picks in 3 sections · checked by an editor on Oct 30, 2026 · How we pick

01Design apps3 picks

  1. Open Designnexu-io/open-design

    Pick this to design screens with your own coding agent on your computer.

    Desktop · Apache-2.0 · active 2 days ago · ★ 105k

    92worth
  2. open-pencilopen-pencil/open-pencil

    Pick this if you want a Figma-style editor with AI built in.

    Web · Desktop · CLI · MIT · active yesterday · ★ 9.5k

    80worth
  3. Onlookonlook-dev/onlook

    Pick this to edit a real React app visually, like in a design tool.

    Web · Desktop · Apache-2.0 · active 3 months ago · ★ 27k

    65worth

02Code from pictures1 pick

  1. Screenshot to Codeabi/screenshot-to-code

    Pick this to turn a screenshot or mockup into HTML or React.

    Web · Docker / self-host · MIT · active 3 weeks ago · ★ 81k

    75worth

03Skills for agents4 picks

  1. UI UX Pro Max Skillnextlevelbuilder/ui-ux-pro-max-skill

    Pick this to give your coding agent design rules before it builds a UI.

    Extension / plugin · MIT · active yesterday · ★ 143k

    94worth
  2. DESIGN.mdgoogle-labs-code/design.md

    Pick this to describe your brand once so every agent follows it.

    Library / SDK · Apache-2.0 · active 2 weeks ago · ★ 29k

    73worth
  3. awesome-design-mdVoltAgent/awesome-design-md

    Ready-made design files from well-known sites to start from.

    Web · Guide / course · MIT · active 3 days ago · ★ 125k

    73worth
  4. Diagram Designcathrynlavery/diagram-design

    Pick this when your agent must draw clean diagrams for docs.

    Extension / plugin · MIT · active 4 days ago · ★ 63k

    82worth

More in AI tools by job

Add-ons that make your coding agent better

Memory, token savers, specs and skills that make Claude Code, Codex and other coding agents faster and cheaper.Inside: Claude-Mem, RTK, Headroom + 7 more10 picks · 6 sections

Open-source AI coding agents to try first

Coding agents you can read, change and run with the model you choose, in the terminal, the editor or the browser.Inside: OpenCode, Codex CLI, Gemini CLI + 5 more8 picks · 4 sections

AI tools for testing web apps and AI features

Let an AI agent click through your web app, write browser tests, or check the answers your own AI feature gives.Inside: Playwright MCP, playwright-cli, Chrome DevTools MCP + 7 more10 picks · 2 sections

Other groups

See every project in this category on Explore →Missing a project? Suggest it →

How we pick

An editor picks 6 to 12 projects for one job and writes when to choose each one. Every pick had a commit in the last 6 months. It is not archived. Its worth score is 60 or more. An editor breaks a rule only for a reason, and writes that reason in the pick's note. We check every list again each quarter. A pick goes when it breaks a rule or a clearly better project appears.