Show HN: Visual Editor for Cursor

4 months ago 4

Create stunning UIs in Shuffle, then take full control with Cursor. Sync projects locally and accelerate your workflow — all powered by the Shuffle CLI.

Shuffle CLI: Create a bridge between Shuffle and Cursor.

user@host:~/demo$ npx @shuffle-dev/cli --help

user@host:~/demo$ npx @shuffle-dev/cli get example-project .shuffle --rules=cursor

Example Cursor queries: * Create a next.js app from .shuffle directory (to start) * Add new pages to my next.js app from .shuffle (to update)

The best of both worlds: visual creativity meets AI coding

Step 1 of 3

Build visually in Shuffle

Shuffle gives you 13,200+ responsive UI components to kickstart your projects — and with intuitive drag and drop, assembling beautiful layouts is faster than ever.

Try Demo

Step 2 of 3

Synchronize with your local machine

Download your project instantly using the Shuffle CLI. It connects your visual designs to your development environment, keeping everything in sync — no copy-paste required.

~$ npx @shuffle-dev/cli --help ~$ npx @shuffle-dev/cli get <project_id> .shuffle --rules=cursor ~$ npx @shuffle-dev/cli sync <project_id>

You can find your project ID in the URL of the opened project, for example:

shuffle.dev/editor?project=cd0f7e984aed20beb2406e59502e7d26c44bc15f

Learn about all available commands in the README.

Step 3 of 3

Ask Cursor for changes

Once your code is synced, use Cursor’s AI to make edits instantly. Refactor components, tweak styles, or generate new sections — just describe what you want, and let Cursor handle the rest.

Example Cursor query:

Create a Vue project based on the .shuffle directory. Update text content and images to reflect a purpose of the website: selling invisible umbrellas.