Introduction
The way we design digital products is undergoing a fundamental shift. For years, tools like Figma have dominated the design workflow—separating ideation, prototyping, and engineering into distinct phases. But AI is collapsing those boundaries.
Tools like Pencil and Claude Code are introducing a new paradigm: designing and building simultaneously, with AI as the connective layer.
For product leaders, designers, and engineers working on AI-powered interfaces, this isn’t just a tooling upgrade—it’s a workflow transformation.
In this article, we’ll explore how Pencil and Claude Code work together, what this means for UX design in AI, and where this workflow creates real competitive advantage.
The Problem: Traditional UX Workflows Don’t Fit AI Products
Most UX processes were designed for deterministic systems:
Fixed user flows
Predictable outputs
Clear interaction patterns
AI breaks all three.
When you’re designing AI-powered features—especially those driven by large language models, you’re dealing with:
Probabilistic outputs
Dynamic interaction loops
Evolving system behaviour
This creates a gap:
- Designers prototype static screens
- Engineers implement dynamic AI behaviour
- Alignment breaks down quickly
This results in interfaces that look polished but fail in real-world usage.
Pencil: Designing with AI in the Loop
Pencil positions itself as more than a design tool—it’s an AI-native prototyping environment.
Instead of drawing screens manually, you:
Describe your interface in natural language
Generate UI layouts instantly
Iterate on flows with AI assistance
Key Capabilities
1. Prompt-driven UI generation
You can describe a product feature (e.g., “AI assistant for e-commerce product comparison”) and generate structured UI screens.
2. Rapid iteration loops
Instead of redrawing components, you refine prompts and regenerate variations.
3. AI-aware design patterns
Pencil is particularly strong at generating interfaces suited for:
Chat-based interactions
Agent workflows
- Multi-step AI processes
Claude Code: From Prototype to Working System
While Pencil helps you design, Claude Code bridges the gap to implementation.
Claude Code is an AI-powered development environment that allows you to:
Generate production-ready code
Refactor and test logic
Build AI-powered features directly from prompts
Why This Matters for UX
Traditionally:
Designers → Figma
Engineers → Code
Handoff → Painful
With Claude Code:
- The interface logic and UI can be co-developed
- The behaviour of the AI can be tested in context
- UX becomes a live system, not a static artefact
The Combined Workflow: Design, Build, Iterate (Continuously)
When you combine Pencil and Claude Code, a new workflow emerges:
1. Prompt the Experience (Pencil)
Start with intent, not wireframes:
“Design an AI assistant that helps users compare financial products with transparent reasoning.”
Pencil generates:
UI structure
Interaction patterns
Suggested flows
2. Validate Interaction Logic (Pencil)
You iterate on:
Prompt flows
Error states
Edge cases
This is crucial for AI UX, where failure modes matter as much as success paths.
3. Translate to Code (Claude Code)
Move into Claude Code:
Generate UI components
Implement LLM calls
Structure prompts and responses
4. Test Real Behaviour
Now the key difference:
- You’re not testing mockups
- You’re testing actual AI outputs in the interface
This allows you to:
Tune prompts
Adjust UI feedback
Improve system trust
5. Continuous Iteration
The loop becomes:
Prompt – Generate – Test – Refine – Deploy
This is far closer to product thinking than traditional UX workflows.
Why This Matters for AI UX Design
This workflow unlocks three major shifts:
1. From Static Design to Behavioural Design
In AI products, the UI is only half the experience.
The real UX comes from:
How the AI responds
How it explains itself
How it recovers from errors
Pencil + Claude Code allow you to design both:
Interface + Behaviour
The traditional “design → dev handoff” becomes obsolete.
Instead:
Designers can explore logic
Engineers can shape UX
Product managers can test flows early
This creates tighter feedback loops and better outcomes.
3. From Prototypes to Production-Ready Experiments
Instead of static prototypes: You get working systems earlier
This means:
Faster validation
Better stakeholder alignment
Reduced risk in AI features
Where This Workflow Works Best
This approach is particularly powerful in:
AI Assistants & Copilots
Customer support bots
Internal productivity tools
Knowledge assistants
Agent-Based Workflows
Multi-step automation flows
Decision-making systems
AI-driven commerce journeys
Intelligent Interfaces
Recommendation systems
Personalised dashboards
Conversational UX
Limitations and Considerations
While promising, this workflow isn’t perfect.
1. Design Quality Still Depends on Prompts
Poor prompts → poor UI outputs.
Teams need prompt literacy, not just design skills.
2. Risk of Over-Generated Interfaces
AI-generated UI can feel:
Generic
Overly complex
Misaligned with brand
Strong design principles still matter.
3. Governance and Control
When using tools like Claude Code:
How is code validated?
How are prompts versioned?
How do you test outputs systematically?
This is where AI engineering practices and governance frameworks become critical.
Strategic Takeaway: UX Becomes a System, Not a Layer
The biggest shift here isn’t the tools—it’s the mindset.
With Pencil and Claude Code:
UX is no longer a phase
It’s a continuous system
It evolves with the product
For product leaders, this means:
- You’re not just designing interfaces
- You’re designing adaptive, intelligent systems
Conclusion
The combination of Pencil and Claude Code signals a broader transformation in how AI products are built.
We are moving toward:
Faster design-to-development cycles
Behaviour-driven UX
Integrated product workflows
For organisations investing in AI, this isn’t just a productivity gain—it’s a strategic advantage.
The teams that learn to design and build AI interfaces simultaneously will outpace those still relying on traditional, siloed workflows.
FAQs
1. What is Pencil and how is it different from Figma?
Pencil is an AI-native design tool that generates UI from prompts, whereas traditional tools like Figma rely on manual design. Pencil is optimised for designing AI-powered experiences and dynamic workflows.
2. What is Claude Code used for?
Claude Code is an AI-powered development environment that helps developers generate, test, and refine code—particularly useful for building AI-driven features and integrating LLMs into products.
3. Can designers use Pencil without coding knowledge?
Yes. Pencil is designed to be accessible to non-technical users. However, understanding AI interaction patterns and prompt design significantly improves outcomes.
4. Is this workflow suitable for production systems?
Yes, but with caution. While Claude Code can generate production-ready code, teams should still implement proper testing, validation, and governance practices.
5. What are the risks of using AI in UX design workflows?
Key risks include:
Over-reliance on generated designs
Lack of consistency with design systems
Poor handling of AI edge cases
Strong design leadership and governance are essential.
6. How does this impact product managers?
Product managers gain the ability to:
Prototype ideas faster
Test AI interactions early
Align design and engineering more effectivel
