I've been using AI for vibe coding but struggle with getting it to maintain a consistent UI style. Currently, I send screenshots of the existing UI along with the requirements for new features, but I'm finding that sometimes the AI doesn't quite grasp how to replicate the current style. Has anyone faced this challenge, and what tips do you have for prompting AI to ensure a uniform UI design? By the way, I usually work with GitHub Copilot as well.
2 Answers
To make the AI keep styles consistent, try creating reusable components first and test them in a tool like Storybook. You can set up a CSS file with design tokens for your styles, which the AI can reference as you build. Just know this approach does add complexity, but it could help the AI stay on track with your design.
AI struggles to understand style from images alone. It likely converts screenshots into simple text descriptions, which may lack detail. Instead of just sending images, consider including specific CSS styles or parameters in your prompts. This way, the AI can generate styles that better match your existing design.
That sounds comprehensive! A style guideline doc is a great idea to give the AI context. That way, you can specify your design principles upfront.