Shuffle

👋 Hey Product Hunt!

Today, we're launching Shuffle CLI, a command-line interface for Shuffle's visual editor. It's a missing link between Shuffle and AI Code Editors.

💡 tl;dr: How to test it without an account:

npx @shuffle-dev/cli get example-project .shuffle --rules=cursor

🛠 What it does:

Thanks to Shuffle CLI, you can:
✅ Design visually in Shuffle (Try demo: https://shuffle.dev/new)
✅ Sync everything locally – projects, components, styles

✅ Take full control in Cursor, Windsurf, and Claude Code.

You get the speed of visual design and control of code & AI in local IDEs.

💡 How to test shuffle-cli in your workflow:

❶ Demo without an account

npx @shuffle-dev/cli get example-project .shuffle --rules=cursor

❷ With a Shuffle account

npx @shuffle-dev/cli help (use to learn about all commands available)
npx @shuffle-dev/cli auth
npx @shuffle-dev/cli sync <project_id> .shuffle --rules=cursor

🎯 When your project is synced locally, you can ask your AI Code Editor for updates, for example:
> Create a next.js app from the .shuffle directory
> Add new pages to my next.js app from .shuffle

Cursor understands the changes in the .shuffle (synchronised directory) and acts accordingly.

We'd love to hear your thoughts, feedback, or ideas on how we can improve this for your workflow.

Thanks for checking it out!

One of the best updates to come to Shuffle recently. Great work 🎉