Windsurf: Devin Design Mode Adds Per-Property Editing and Annotated Screenshots
WindsurfWindsurf's Devin Design Mode now opens a compact prompt bar with per-property editing when an element is selected. Users can draw spotlight boxes or pencil annotations in five colors and send the annotated page image with a note. An eyedropper picks colors from the preview, and the page's CSS variables are searchable in property controls.
Key Takeaways
- Selecting an element in Design Mode now opens a compact prompt bar for per-property edits.
- Users can draw spotlight boxes or pencil annotations in five colors on the page.
- The annotated page image can be sent to Devin along with a note.
- An eyedropper picks colors directly from the preview.
- Property controls let users search and use the page's CSS variables.
- Together, the changes make visual feedback to Devin more precise than text alone.
Editing Elements Property by Property
Windsurf updated Design Mode in Devin so that selecting an element on the page opens a compact prompt bar. The bar supports per-property editing, so a user can adjust individual properties of the chosen element instead of describing every change in prose.
Annotating the Page
Design Mode now lets users draw spotlight boxes or pencil annotations in five colors directly on the page. The annotated page image can be sent to Devin together with a written note. This makes it easier to point at the exact area that needs to change and explain the intent in a sentence.
Colors and CSS Variables
An eyedropper lets users pick colors straight from the preview. Property controls also let users search and use the page's own CSS variables, which helps keep edits consistent with the existing design system of the page.