How to make accurate UI Tweak in Cursor with Stagewise

Key Concepts

• Granular UI Updates: Making precise and specific changes to user interface elements.
• Cursor Integration: Using Cursor, an AI-powered code editor, to implement UI changes.
• Stage Wise Plugin: A Cursor plugin that facilitates granular UI updates by allowing direct selection of UI elements in the browser and communicating them to Cursor.
• UI Element Selection: The process of choosing specific components or parts of a UI for modification.
• Prompt Engineering: Crafting effective prompts to instruct Cursor on the desired UI changes.
• Global Changes: Modifications that affect all similar UI elements across the application.

Stage Wise Plugin for Granular UI Updates in Cursor

Problem Statement

Cursor can often generate 80% of a desired UI, but the remaining 20% requires fine-tuning. Making these granular changes can be difficult without a precise way to specify the UI elements to modify.

Stage Wise Solution

Stage Wise addresses this problem by enabling users to:

1. Select UI Elements Directly: Choose specific UI elements within the browser.
2. Communicate Selections to Cursor: Send information about the selected elements to Cursor.
3. Apply Granular Changes: Use Cursor to make precise modifications to the selected elements.

Setup Process

1. Install the Stage Wise Extension: Search for "Stage Wise" in the Cursor extension marketplace and install it.
2. Open a Web Project in Cursor: Load an existing web project into Cursor.
3. Run the Auto Setup: Use Command+Shift+P to open the command palette, search for "Stage Wise," and select "Auto Setup Stage Wise Toolbar." This triggers a setup process in the Cursor chat.
4. Package Detection: Stage Wise automatically analyzes the project's package.json to determine the framework (e.g., Next.js, React) and installs the appropriate packages.
5. Run the Web Project: After setup, a floating toolbar appears at the bottom of the browser window when the web project is running.

Usage Example: Button Styling

1. Select Buttons: Click the Stage Wise toolbar button and select one or more buttons on the screen.
2. Provide a Prompt: Enter a prompt like "make all buttons border radio larger" and send it.
3. Cursor Integration: Stage Wise sends a message to Cursor containing the prompt and detailed information about the selected UI elements (div elements and relevant classes).
4. Apply Changes: Accept the changes suggested by Cursor. The buttons will now have larger border radiuses.
5. Global Impact: Because Stage Wise communicates specific div elements and relevant classes, the changes are applied globally to all similar buttons, not just the selected ones.

Usage Example: Aligning Text and a Button

1. Select Elements: Select the text label and the "Show More" button.
2. Initial Alignment Prompt: Enter a prompt like "making sure text and show more button are in line on same row where text on the left and show more button on the right".
3. Fine-Tuning Prompt: After the initial alignment, select the elements again and enter a prompt like "this weights should be 100% so show more button is like right side floating" to right-align the "Show More" button.

Additional Examples (from Stage Wise Website)

• Converting UI elements into accordions.
• Changing the color of table labels.

Key Benefits

• Accuracy: Stage Wise allows for very accurate UI modifications.
• Efficiency: It simplifies the process of making granular UI changes.
• Global Consistency: Changes are applied consistently across similar UI elements.

Notable Quote

• "Cool part of using stage wise is because it is communicate very clearly specific div element as well as relevant class then when make change it will actually make global change across all the similar elements instead of just changing one specific elements."

UX Innovation

The direct communication between the browser and Cursor via messages represents an innovative UX pattern.

Future Potential

The Stage Wise plugin is likely to expand with more functionalities in the future.

AI Builder Club

The speaker promotes the AI Builder Club, which offers:

• Advanced tips and tricks about AI coding.
• Guidance on building production-ready large model applications.
• Tools like SAS launch kit and tax coder for generating PRDs and Cursor rules.

Conclusion

Stage Wise is a valuable tool for developers using Cursor to build UIs, enabling them to make precise and consistent changes with ease. Its innovative approach to UI element selection and Cursor integration streamlines the fine-tuning process, leading to more polished and professional-looking applications.