Learning Timeline
Key Insights
Hybrid Strategy (AI + Manual)
Use AI for 'heavy refactoring' or major changes like structural layout shifts. For micro-adjustments such as changing a logo or reordering buttons, manual point-and-click editing is often faster and more precise.
Block Deletion Warning
When you ask the AI to revamp an existing layout, it may need to delete old blocks. Make sure to double-check your data configurations before clicking 'Confirm' to avoid losing important manual settings.
Prompts
Layout & Action Transformation Prompt
Target:
Softr AI Co-Builder
Change the layout to a two column grid of cards to connect to the content ideas table where each card is going to show the title the description and a small tag pill for the update the record status to discarded and additionally we want an empty state with a short message and a CTA to ask AI.
Step by Step
Updating the Design System Using AI Prompts
- Open the Interface Builder in Softr.
- Click on the AI Co-Builder icon available within the interface.
- Enter a prompt containing design specifications such as color codes (hex codes), typography types, font sizes, and the 'roundness' level for UI elements.
- Press Enter and watch as the AI consistently updates the entire application according to the requested design system.
- For manual control, navigate to the 'Theme' section in the Interface Builder to manage 'Accent', 'Text', and 'Background' colors, as well as navigation styles via point-and-click.
Dynamically Revamping Layouts & Action Buttons
- Select the page you want to modify (e.g., Content Ideas page).
- Activate the AI Co-Builder and enter specific instructions to change the layout (e.g., switch to a 'two-column grid of cards').
- Specify the data source and the fields you want to display (e.g., Title, Description, and Tags) within the same prompt.
- Include instructions to create an 'Action' button that can update record statuses (e.g., a button to 'update record status to discarded').
- Add instructions for an 'Empty State' if no data is available, complete with a message and a CTA (Call to Action) button.
- Click the 'Confirm' button if the AI asks for permission to delete or replace existing blocks.
- Review the AI-generated results. If the number of buttons or the arrangement isn't quite right, enter a follow-up prompt (e.g., 'add two buttons instead of one').
- Perform final manual polishes by clicking on button elements to delete or reorder them via the visual editor if necessary.
