First of all, thank you for building such an amazing tool. Cursor has genuinely transformed the way I write code, especially on the logic side. However, as a frontend developer, I have a specific pain point that I hope you can help with: CSS and styling.
To be honest, I’m not great at adjusting styles. When clients ask for “pixel-perfect” designs—those, unconventional layouts, or subtle visual tweaks—I often find myself spending hours just to get the margin, padding, or flex alignment right. Sometimes, the design requires a very specific shadow, gradient, or responsive behavior that is easy to see but hard to describe and implement. High-Fidelity Restoration
When I have a screenshot or a design file (like Figma), I need to convert it into code with near-perfect accuracy. It would be a game-changer if Cursor could analyze an image or design and generate the corresponding CSS/HTML that closely matches the original, including complex positioning and color schemes.
I believe many frontend developers share this struggle. While AI is great at generating logic and boilerplate, the visual aspect of frontend development still requires a lot of manual tweaking. With Cursor’s deep integration into the IDE, you are in a unique position to build a “visual design copilot” that understands both code and the designer’s intent.
Thank you for considering this feedback. Keep up the great work!
Best regards,
A frontend developer who just wants to style CSS faster so I can go home on time.
I am a UX/UI designer and full-stack developer researching this exact gap. If Cursor generated a screen that worked functionally but had visual/UX drift, would a PR-style reviewer that points to likely classes/components, explains the UX issue, and gives an agent-ready fix prompt be useful? Or do you mainly want better generation in the editor itself?
Hey, thanks for the feedback. Good news: a big part of what you’re describing already works in Cursor through the agent’s Browser tool.
What it can do for your use cases:
Design to code: you can share a screenshot or mockup and ask it to generate HTML and CSS, matching colors and typography. Example request: @browser Analyze this design mockup, extract colors and typography, and generate pixel-perfect HTML and CSS
Match to design: the agent compares your current UI to a design screenshot and fixes spacing, colors, and typography to match: @browser Compare current UI against this design screenshot and adjust spacing, colors, and typography to match
Design sidebar: visual editing right in Cursor for position and layout, padding and margin in pixels, colors, shadows, opacity, border radius, and light and dark themes. You tweak sliders, hit Apply, and the agent writes the changes into code.
It’s not a 1:1 Figma import, but for “I see a design, I want the same CSS” and fast visual tweaks, it’s exactly what removes the manual margin and flex and shadow work. Give it a try and tell me how close it is to your workflow. I’ll leave your request for deeper design-to-code support here as a feature request.