DEDUPED Hot AI repos. Real use cases. What people build. Get the Monday 5

How to design a screen from a prompt and export it to React and Tailwind with Openpencil

Install OpenPencil, describe a UI in plain language, and export the design to code.

Short answer: On macOS run brew tap zseven-w/openpencil then brew install --cask openpencil; then on Windows run scoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil then scoop install openpencil; describe the UI in natural language and watch the agents build hero, features and footer in parallel. All steps.

  • Top pick
  • Content
  • Beginner
  • 20 minutes
  • From the README
  • Any agent

Who it is forA developer who needs a decent first design and the code for it, without a designer.

The problemGoing from an idea to a mockup to code means three tools and a lot of copying.

The outcomeA design on the canvas saved as an .op file, exported to React with Tailwind or HTML with CSS.

What you need first

  • macOS, Windows or Linux (desktop) or the web app
  • An AI model provider key, or Claude Code, Codex or OpenCode via MCP
  • Homebrew, Scoop or a GitHub Release download

Steps

  1. On macOS run brew tap zseven-w/openpencil then brew install --cask openpencil
  2. On Windows run scoop bucket add openpencil https://github.com/zseven-w/scoop-openpencil then scoop install openpencil
  3. Describe the UI in natural language and watch the agents build hero, features and footer in parallel
  4. Select elements and chat to modify them, or apply a style guide such as glassmorphism
  5. Export to React + Tailwind or HTML + CSS

Prompt for your agent

Install ZSeven-W/openpencil and design <screen> for <product> from this description: <description>. Apply the <style> style guide and export it to React + Tailwind in <folder>.

Caveat.

Use this in your AI agent

Ask your agent

Using the Deduped MCP, get the setup steps for ZSeven-W/openpencil and "Design a screen from a prompt and export it to React and Tailwind"

Add Deduped to Claude Code once

claude mcp add --transport http deduped https://dedupedai.com/mcp

Cursor, ChatGPT, others

Share: X LinkedIn Hacker News Email Copy link

Third-party repos we don't own. AI-written use cases can be wrong. Disclaimer