How to Refine Design Without Breaking Logic
In Div-idy, you can refine the look and feel of your app while keeping the logic intact. The AI should take care of preserving functionality—but if anything becomes broken, you can quickly use Undo or tell the AI there’s a glitch/error so it can fix it.
Quick Answer
When you want design changes (colors, spacing, layout, typography), tell the AI to keep all existing logic and functionality. Div-idy should preserve the code that makes your app work. If something does break, use the Undo button (or Redo) or tell the AI: “There’s a glitch/error” and describe what happened.
Change design in small steps: navbar → buttons → spacing → typography. Smaller changes are easier to keep stable.
Use this phrase in your prompt
This is the simplest way to keep your logic safe:
Only update the design and styling.
Do NOT change or remove any existing functionality, event listeners, database logic, or API calls.Example prompts (safe design changes)
Modernize the design to a clean, modern style with better spacing and typography.
Only update the design and styling. Do NOT change any existing functionality.Improve the mobile layout: make buttons full-width on small screens,
increase tap targets, and fix spacing issues.
Keep all existing logic and functionality exactly the same.Redesign only the header + hero section to look more professional.
Do not change anything else. Keep all current functionality working.If something breaks
Most of the time the AI will keep your logic intact. If you notice a problem:
- Use Undo to revert to the last working version.
- Or tell the AI what broke (copy the error text if you have it).
- Then ask it to fix the bug while keeping your design improvements.
Example fix prompt:
"There is a glitch after the design update.
The Save button no longer works and the console shows: 'Cannot read properties of null'.
Fix the bug, keep the new design, and do not remove any features."Tips for best results
- Ask for CSS-only changes when possible (colors, fonts, spacing).
- Change one thing at a time (ex: “just buttons” or “just the navbar”).
- Call out protected parts: “Don’t change the database code” or “Don’t modify the submit handler.”
- Test right away after each update (forms, buttons, navigation, save actions).
Troubleshooting
- Buttons stopped working: Undo, then ask for styling changes only and protect event listeners.
- Data no longer loads: Tell the AI “database reads broke” and ask it to restore the original data logic.
- Layout looks good but it’s slow: Ask it to simplify heavy animations and remove unnecessary effects.