Claude Design changed me, I might not even go back to Figma anymore…
I think Claude Design is finally the best version of web design vibe coding out there. The best of both worlds because the dev handoff is so easy…
For context, I’m the only UI/UX designer in our team. So imagine my frustration that my 4 developers are all waiting on me to finish my task before handing it off to them because they have Claude code empowering their productivity while i literally have none. Figma make is trash and the Claude Code writing to Figma is still ugly. I tried soooo many stuff - Google Stitch, using Claude Code to generate HTML (generic still) and then putting it to Figma for more grand edits…
Then comes Claude Design which I haven’t taken seriously because of how much it eats up usage until I got better at using it… right now I just finished the massive redesign of one of our business websites and also was able to create a really nice and fun prototypes of our AI apps. IT WAS SO FUN… being able to implement all my “nice to haves” straight off the bat. All the animations and transitions that I’ve always wanted but the devs won’t do it because they don’t have a reference or prototype.
Here’s how I use Claude Design, happy to share tips and also learn from the others as well…
- For reference I have a Claude Max (premium seat) in an organization. I also borrow my teammate’s acc to use their Claude Design usage in case I reached full on my account…
- The master prompts, all the planning, all the strategizing are done on Claude Code. I have a harness that only caters to vibe coding designs. I share my plans there and it also has access to our team’s codebase and the design tokens.
- Yes to Opus on first initial build. Sonnet on the rest. I go back to opus when doing big changes though.
- From time to time, I download the html so Claude Code can scan and can help me with the names of the containers. It really helps Claude Design to do surgical edits if you use the proper naming.
- The comment feature is also nice but must only be done one at a time because batch comments are buggy asf as validated by Claude Code’s only research.
- Claude Code doing the prompts are very important. Because on top of my intent, it mixes in the orchestration plus its findings from the community via online research.
- You don’t have to fully polish on Claude Design (esp the component consistency, the colors on some texts, the spacing…) once you have the full intent laid out working nicely, you can download already then claude code can polish the components and consistency then handoff to the devs which will be integrated to our codebase.