Product designer. Editor-in-chief of @uxplanet
Joined May 2011
- Tweets2.5K
- Following92
- Followers24.4K
- Likes17.8K
🔥 5 NEW GitHub repos for Claude Code worth trying as a product designer!
If you use Claude Code for UI/UX design, these 5 repositories are worth exploring:
1️⃣ oil-ui → Generates UI designs and refines them using real screenshots.
2️⃣ dimensional-drawing → Creates visual specifications for UI components, including spacing, dimensions, and layout.
3️⃣ Awwwards-mcp → Gives Claude access to design inspiration from award-winning websites.
4️⃣ design[.]how → Helps build, maintain, and apply design systems across your product.
5️⃣ Brand Identity Skill → Generates brand identities, including logos, typography, color palettes, and brand guidelines.
🖼️ Visual spec generated by dimensional-drawing 👇
💡Good Designers Are Proactive. Now AI Can Be Proactive Too.
Proactive designers define and shape their work rather than simply waiting for instructions.
For a long time, proactivity was an attribute of human designers. But now we have proactive AI designers.
Arti from @lovart_ai is an excellent example.
Arti learns your creative preferences and delivers complete designs.
I found 3 great examples of how Arti streamlines the product design process.
Scenario 1️⃣: Design Research
Suppose you're working on a visual refresh for an existing brand and looking for a new color palette that aligns with its identity. Instead of creating a mood board manually, you can ask Arti to conduct research for you. The cool thing is that you can ask Arti to perform detailed design research completely autonomously, and it will get back to you with actual results once the task is complete.
Scenario 2️⃣: Object Mockup
What if you need to generate merchandise designs featuring your brand's logo? The good news is that Arti has a dedicated skill for that. Simply choose the Object Mockup skill, provide the logo you want to use, and answer a few questions the AI agent asks about your design. Arti will then generate a set of assets for you.
Scenario 3️⃣: Design Refinement
Received feedback from your client and need to update your design? No problem. Simply copy the client's feedback into Arti and ask it to refine the design based on that feedback.
👉Try Arti: lovart.ai/?attr_tracker_id=r…
#AI #aidesign #BuiltWithLovart
🤝 Paid partnership
Video editing is one of the most tedious parts of video production for me, so it’s always great to try tools like Riverside that make the process easier. I especially like that Riverside helps with cutting videos, creating captions, optimizing layouts, and preparing thumbnails 🔥
🤝 Paid partnership
Meet Riverside Agents, the first AI production team built only for video.
Producer preps the session, Editor creates the full edit, Clipper cuts the best moments, and Marketer gets it live.
They’re experts at video and know how to take your content to the next level. You call the shots.
Watch the demo:
🥞 The Context Stack for Claude Code: 4 Files That Make AI Better at Product Design
Better context = more consistent design output
One of the most effective ways to provide Claude Code with better context is to organize project instructions into dedicated Markdown files.
Here's a structure I use for my product design projects along with best practices for each layer:
📁 CLAUDE[.]md
Core project context and Claude-specific instructions
uxplanet.org/comprehensive-g…
📁 AGENTS[.]md
Shared rules and conventions for AI coding agents
uxplanet.org/agents-md-in-cl…
📁 DESIGN[.]md
Visual design principles, design system rules, and UX guidelines
uxplanet.org/design-md-best-…
📁 SKILL[.]md
Task-specific instructions and reusable workflows
uxplanet.org/building-your-o…
💡 Claude Design for UX Design
Claude Design is a very nice tool for quick prototyping. It helps you turn your idea into an interactive prototype in no time. But you can do much more with this tool by taking a different approach: focus on user experience.
Here is a 3-step UX-first workflow for Claude Design:
1️⃣ Generate a complete UX flow, not just UI screens
By asking Claude to design an experience, you will make AI invest more effort in building a solid user experience, not just nice-looking screens. As a result, the output AI generates won’t be a generic prototype; it will be a prototype aligned with your user’s needs and wants.
2️⃣ Ask it to explain design decisions
Once you've generated a design with Claude, you might notice unclear areas (where it's not clear why the AI designed the UI this way). Instead of guessing, you can ask Claude to dig into a particular area and provide a more detailed explanation of the design decision.
3️⃣ Turn an existing UI into a design artifact
You can ask Claude Design to reverse-engineer a design it generated for you (i.e., match the generated design to your design system’s styles and components).
👇 more about Claude Code for UX
ALT Claude Design for UX Design
📕 Complete guide for UX Design with Claude Code
babich.gumroad.com/l/claude-…
💡 Design critique with Claude Design
Most AI design critiques fail for one simple reason: We ask AI to critique everything at once.
Prompt “Review this design and tell me what’s wrong” sounds reasonable, but it usually produces a generic mix of accessibility, visual, content, and interaction feedback.
I get much better results with Claude Design by splitting critique into 4 focused passes:
1⃣ Accessibility audit
Check contrast, touch targets, focus order, semantic hierarchy, and reliance on color.
2⃣ Visual hierarchy critique
Ignore whether the UI looks attractive. Evaluate whether the layout reflects the real importance of information and actions.
3⃣ Content critique
Review labels and UX copy for ambiguity, unnecessary complexity, length, and unclear consequences.
4⃣ Interaction design critique
Look for missing states: loading, empty, error, success, disabled, focus, hover/pressed, etc.
The important part: fix issues after each phase before moving to the next one.
Structured critique → better feedback → better design
👇 Complete guide for AI-powered design critique
ALT Design critique with Claude Design
Claude Design Critique: A Better Way to Improve AI-Generated UI
uxplanet.org/claude-design-c…
⚠️ You’re using Claude Design wrong
Every time I publish a new piece about Claude Design, I receive the same type of comments over and over again: “Heh, it generates pretty average design” or “It's not pixel-perfect! AI slop!”
Such comments make me realize that a lot of people misunderstand what Claude Design is and what functional role it plays in the design process.
The truth is:
👉 Claude Design is an ideation tool: it should be used for rapid prototyping, not final polishing.
And it works pretty well at the early stage of the product design process when you want to explore various design directions without investing a lot of time in building mocks in tools like Figma or waste paper on creating paper sketches.
Instead of spending hours polishing one direction in Figma, you can use Claude Design to explore multiple ideas quickly and get prototypes that are:
✅ Based on your design system
✅ Interactive
✅ Coded and exportable to dev environments (like Claude Code or VS Code)
And yes, the first output will rarely be perfect. But I think that’s absolutely fine.
I recommend treating it as a proposal, not a final design.
My workflow: Context for Claude → Generate → Evaluate → Give feedback → Iterate → Polish in Figma
👇 More about Claude Design
ALT You’re using Claude Design wrong
Why Figma vs Claude Design are two fundamentally different design workflows
uxplanet.org/figma-vs-claude…
💡4 Types of Loops You Can Create in Claude Code
When we interact with Claude Code, we typically go through repeated cycles when completing a task (also known as loops). The cycles can be managed by us (in that case, it’s a typical turn-based loop) or Claude itself (in that case, it’s an automated loop).
Claude Code supports four types of loops, and each gives you a different level of control over how work continues.
1️⃣ Turn-based loop
You prompt → Claude acts → you review → you prompt again.
Best for design work, evolving requirements, and changes that need human judgment.
2️⃣ Goal-based loop
Claude keeps working until a measurable completion condition is met ([/]goal).
Best for fixing bugs, passing tests, migrations, and refactoring.
3️⃣ Time-based loop
Claude repeats a task at a set interval using [/]loop.
Best for monitoring deployments, CI status, and pull-request comments.
4️⃣ Proactive loop
Work starts on a schedule or external trigger and continues until a goal is reached. It can combine [/]schedule and [/]goal.
👇
ALT 4 Types of Loops You Can Create in Claude Code
💡 The 4 Layers of AI Engineering
Most people still think AI engineering is mainly about writing better prompts.
It’s not.
A reliable AI system has four connected layers:
1️⃣ Prompt Engineering
How well you can articulate the task, rules, examples, and expected output in a prompt you submit to AI.
2️⃣ Context Engineering
What the model knows about the problem and your task before it responds to your prompt: system instructions, documents, memory, user history, and retrieved data. In Claude Code, we have a stack of contextual layers with this data medium.com/ux-planet/context…
3️⃣ Harness Engineering
The application layer around the model that manages tools, validation, logging, permissions, retries, and fallback logic. In Claude Code, for example, Skills, Subagents and Plugins (medium.com/ux-planet/claude-…) are used for harness engineering.
4️⃣ Loop Engineering
The feedback cycle that evaluates the result, identifies what needs improvement, and repeats the process until the required quality is reached. Check a complete guide for loop engineering in Claude Code: medium.com/ux-planet/loop-en…
ALT The 4 Layers of AI Engineering
Animation design using Claude Design
You can create some really interesting motion effects in Claude Design on top of your own design system.
For example, I created this running man loading animation in Claude Design using the IBM Carbon Design System. You can easily spot Carbon's colors, shapes, and typography.
Quite often, Claude Design also suggests a set of tweaks that lets you tailor the animation to your specific needs.
👇
I also wrote a complete guide for creating stunning animations and motion graphics using Claude Design
medium.com/ux-planet/claude-…
AI tools have a bad reputation for creating ultra-generic design.
We even have a special term for low-quality AI-generated content: “AI slop.”
But AI-assisted design doesn’t have to look that way.
I’ve seen a few cool examples with an actual visual direction, and this page is one of them. Created using Readdy (bit.ly/Readdy6_NickBabich06)
🤝 Paid partnership