đź’ˇ
A Quick Note: I'm building something new (more details coming soon) and documenting my journey from concept to product. This series explores how collaborating with Claude, an AI assistant, has transformed my product development process—helping me move faster while making better decisions at every step. Join me as I share insights from this frontier of human-AI collaboration.
In our previous post, I shared the vision behind my new venture and the market gap we identified in the woodworking tools space. Today, I'm excited to walk you through our design journey—how we translated market insights into a user experience that serves the woodworking community, with a special focus on how AI, specifically Claude, became my design partner throughout the process.
Partnering with AI for Design
When I began the design process, I knew I needed to combine my vision with expert input, but hiring a full design team wasn't feasible in the early stages. This is where Claude entered the picture as my AI collaborator, helping me bridge the gap between vision and execution.
Claude's ability to understand design principles, analyze existing UI elements, and generate code made it an invaluable tool throughout the process. I found our collaboration particularly effective in several key areas:
My Technical Background and Approach
Before diving into the design process, it's worth sharing a bit about my background. I come from product management, where I've spent years translating customer needs into product requirements. While I understand technical concepts well enough to collaborate effectively with engineers, I'm not a developer who can write production-ready code from scratch.
My technical skills coming into this project included:
Basic HTML and CSS knowledge
Experience with various CRM and marketing automation platforms
A solid understanding of how different systems integrate
Enough technical vocabulary to ask the right questions
This background proved both an advantage and a challenge when working with Claude. On one hand, I could clearly articulate what I needed in product and design terms. On the other hand, implementing Claude's suggestions sometimes pushed the boundaries of my technical comfort zone.
The design phase presented unique challenges:
Translating Claude's component suggestions into a working prototype
Understanding the design principles behind recommended patterns
Balancing aesthetic preferences with functional requirements
Finding the right level of detail in prompts to get useful responses
Working with Claude became a learning journey in itself. I found that framing problems in terms of user needs rather than technical specifications yielded the best results. Instead of asking "How do I implement this component?", I'd ask "How might we display verification status in a way that builds trust?" This approach leveraged Claude's problem-solving capabilities while working within my technical constraints.
Most Effective Prompt Types
Through trial and error, I discovered certain prompt approaches yielded the best results:
Reference-based prompts: "Here's how Reverb handles condition ratings for musical instruments. How might we adapt this approach for woodworking tools?"
Problem-solution prompts: "I need to display verification badges without cluttering the listing card. What are some minimalist approaches?"
Comparative analysis: "I'm torn between these two navigation structures. Can you analyze the pros and cons of each for a tool marketplace?"
Design system documentation: "Help me document these color variables and component specifications for developer handoff."
By framing prompts in these ways, I received detailed, actionable guidance that felt like working with a senior UX designer.
Starting with the User
The foundation of our design process was a deep understanding of our users. Before writing a single line of code, I shared interview transcripts and survey results with Claude for analysis. Together, we identified key user personas:
The Professional Maker – Relies on tools for income, values quality and reliability
The Serious Hobbyist – Passionate about woodworking, builds an extensive collection
The New Homeowner – Beginning their tool collection, budget-conscious but wants quality
The Legacy Seller – Often selling inherited tools, needs guidance on fair pricing
Claude's pattern recognition capabilities proved invaluable when reviewing research data. For instance, across multiple interview transcripts, Claude identified that tool condition verification was mentioned as a primary concern by 78% of potential users.
Prompt: "I've uploaded transcripts from 12 user interviews. Can you identify recurring themes around trust barriers when buying used tools?"
This collaborative analysis created a rich foundation of user insights that informed every subsequent design decision.
Design Principles and Visual Identity
To establish a cohesive visual language, I needed inspiration from successful platforms that aligned with different aspects of the vision. I shared screenshots and features from several key websites with Claude:
Reverb.com – For their approach to specialized marketplace design and how they present detailed information about musical instruments
OfferUp – For their community-based marketplace approach that facilitates local transactions
eBay – For their authentication services and how they establish trust for higher-value items
Rather than starting from scratch, this reference-based approach gave us concrete examples to analyze and discuss. Claude examined the strengths of each platform, noting elements like:
How Reverb organizes detailed specifications for specialty items
OfferUp's streamlined local pickup coordination features
eBay's verification badges and authentication process presentation
From these references, Claude helped craft an initial style guide proposal that included multiple options for color schemes, typography pairings, and component styles. We went through several iterations, with Claude generating visual examples and code snippets for each option.
I provided feedback on each iteration ("The green feels too bright," "These font pairings need more contrast," "Can we make the verification badge more prominent?"), and Claude refined the proposals accordingly. This collaborative back-and-forth allowed us to narrow down to a visual identity that felt authentic to the woodworking community:
Color Palette: A primary forest green (#17613F) evoking craftsmanship and natural materials, complemented by warm neutrals
Typography: Spectral for headings with Montserrat for body text—a pairing that balances craftsmanship with readability
Component Style: Clean, functional elements with subtle texture to evoke workshop materials while maintaining a modern interface
With the visual direction established, Claude then generated a comprehensive CSS variables system that would serve as the foundation for our entire platform:
:root {
--color-base: #F0EEE6;
--color-white: #FFFFFF;
--color-text-primary: #44403C;
--color-text-secondary: #57534E;
--color-accent: #17613F;
--color-accent-hover: #145535;
--color-accent-light: #78ab96;
}
This structured approach to styling transformed my workflow. As someone without deep development experience, I had previously made one-off styling updates to achieve specific results—a time-consuming process that often led to inconsistent designs. Claude's guidance introduced me to CSS variables and modern frameworks like Tailwind, providing a systematic approach to styling that professional developers use.
The variables system established a "single source of truth" for our design elements, making it simple to maintain consistency across the entire platform. When we needed to adjust our accent color, for example, we could change it in one place rather than hunting through dozens of component files. This not only saved time but dramatically improved the cohesiveness of our design.
Iterative Design through Code
Rather than traditional design tools, we adopted a code-first approach where Claude generated React components that could be immediately tested and iterated. This dramatically shortened the design-to-implementation cycle.
For example, when designing the tool listing card, I shared the JSON structure of a typical tool listing and asked Claude to generate a responsive component:
Prompt: "Using this list of inputs for a tool listing, can you create a React component for
a card that highlights verification status, condition, and price transparency?"
Claude would then produce functional React components like this:
const ToolListingCard = ({ tool, featured = false }) => {
const mainImage = tool.images && tool.images.length > 0
? tool.images[0]
: '/api/placeholder/300/200';
const formatPrice = (price) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 0,
}).format(price);
};
return (
<div className={`bg-white rounded-lg shadow-md overflow-hidden ${featured ? 'ring-2 ring-forest-500' : ''}`}>
{/* Featured badge */}
{featured && (
<div className="absolute top-2 right-2 bg-forest-500 text-white text-xs px-2 py-1 rounded-full">
Featured
</div>
)}
{/* Image with error handling */}
<Link to={`/tool/${tool.id}`} className="block relative h-48">
<img
src={mainImage}
alt={tool.name}
className="w-full h-full object-cover"
onError={(e) => {
e.target.onerror = null;
e.target.src = '/api/placeholder/300/200';
}}
/>
{/* Verification badge */}
{tool.is_verified && (
<div className="absolute bottom-2 left-2 bg-forest-700 text-white text-xs px-2 py-1 rounded-full flex items-center">
<Check className="h-3 w-3 mr-1" />
Verified
</div>
)}
</Link>
{/* Additional card content... */}
</div>
);
};
This code-first approach allowed me to quickly test components in the browser, gather user feedback, and make iterative improvements. Claude continually refined these components based on feedback while maintaining consistency with our design system.
Component Library Development
One of the most valuable aspects of our collaboration was developing a comprehensive component library. By sharing existing components and describing new needs, Claude facilitated systematic expansion of our library:
Prompt: "We've established these basic components. Now I need specialized components for
displaying tool condition ratings and price history charts. Can you suggest implementations
that match our existing style?"
The resulting library included:
ToolConditionBadge – Visual indicator of standardized condition ratings
PriceHistoryChart – Interactive visualization of market trends
VerificationDetails – Expandable component showing authentication information
LocalPickupMap – Location-based component for coordinating exchanges
Each component was designed to be responsive, accessible, and consistent with our overall aesthetic.
The Power of Component-Based Development
For non-developers, think of components as LEGO pieces that can be assembled to create complex interfaces. This approach ensures consistency across the platform (update once, improve everywhere), dramatically speeds up development, and creates a more intuitive user experience.
Traditionally, building a component library of this sophistication would have required:
1-2 years learning modern JavaScript and React
Months studying component architecture and best practices
Weeks of research on accessibility standards
Extensive trial and error with responsive design
Claude compressed this entire learning curve into days. Perhaps most valuable for the future, this approach produced clean, well-structured code that I could confidently hand off to developers. Rather than creating a patchwork of quick fixes and custom solutions, we built a professional-grade component system that any React developer could understand, maintain, and extend—ensuring the marketplace can scale efficiently as we grow.
Here's a follow-up section for your UI/UX blog post that builds on the collaborative process theme while focusing specifically on how code integration helped you as a non-coder:
Taking Our Collaboration to the Next Level
After establishing a solid foundation for collaboration during the market research phase, our partnership grew even more powerful as we moved into design and development. The technical nature of UI/UX work demanded more sophisticated collaboration methods that made a profound difference in our ability to rapidly prototype and iterate.
Leveraging Code Sharing for Rapid Prototyping
While I had basic HTML/CSS knowledge, creating modern component-based interfaces was far outside my comfort zone. Claude dramatically bridged this gap through seamless code sharing:
Prompt: "This header navigation doesn't quite match our design system. Can you see what's wrong and suggest a fix?"
This allowed me to share problematic code snippets directly in our conversations. Claude could immediately identify issues, explain them in non-technical terms, and provide corrected code that aligned with our design system. This real-time debugging compressed what would normally be days of back-and-forth with a development team into minutes.
GitHub Integration as a Game-Changer
Midway through the UI development process, I discovered Claude's GitHub integration feature, which revolutionized our workflow:
Claude could analyze the entire codebase rather than isolated snippets
Changes could be suggested in proper context of the surrounding code
We maintained a complete history of iterations and improvements
I could ask questions about specific files or components without copying/pasting
This integration was particularly valuable when working on complex components like our condition rating system. Claude could access our existing components, understand our patterns, and suggest new elements that maintained perfect consistency with our established design language.
From Reading to Writing: Interactive Code Exploration
Perhaps the most transformative aspect of our collaboration was the interactive nature of code development. Rather than just reading documentation or following tutorials, I could engage in a dialogue about the code:
Prompt: "I don't understand how this price history component uses the data from our API. Can you walk me through it step by step?"
Claude would break down complex concepts into manageable chunks, explaining not just what the code did but why it was structured that way. This conversational learning approach helped me develop genuine understanding rather than just copying solutions.
When I wanted to modify components, I could express my goals in plain language:
Prompt: "I like this listing card, but we need to add a space for seller reputation. Can you show me how to incorporate that while maintaining our spacing guidelines?"
This allowed me to focus on design decisions rather than implementation details, while still developing a growing understanding of the codebase.
Accessibility Without the Learning Curve
One area where Claude particularly excelled was in making our interface accessible without requiring me to become an accessibility expert:
Prompt: "Can you review this form component for accessibility issues and suggest improvements?"
Claude would systematically analyze components for keyboard navigation, screen reader compatibility, color contrast, and other accessibility requirements—then provide specific code changes to address any issues found. This made accessibility a natural part of our development process rather than an afterthought.
The Compounding Benefits of Consistent Documentation
As our component library grew, Claude helped establish a documentation pattern that proved invaluable:
Usage examples for each component
Props documentation with default values
Common patterns and anti-patterns
Design system alignment notes
This made it increasingly efficient to create new interface elements as we could leverage more and more existing components. By the end of our design phase, creating new pages became largely a matter of composing existing components rather than building from scratch.
Finding the Right Balance
Not everything was smooth sailing. I learned that while Claude excelled at specific component-level challenges, it worked best with clear design direction rather than open-ended creative challenges. The most successful pattern was for me to create rough wireframes or clear verbal descriptions of what I wanted, then have Claude help implement those designs as code.
I also found that Claude's suggestions sometimes needed adjustments to fully align with our vision. This wasn't a deficiency but rather a reminder that the most effective collaboration combined Claude's technical capabilities with my domain understanding and aesthetic judgment.
The result of this evolved collaborative process was something neither of us could have created alone—a sophisticated, purpose-built user interface that felt native to the woodworking community while implementing modern web design best practices. In our next post, we'll explore how we translated these designs into a working application with a scalable backend architecture.
User Testing and Iteration
As we moved into user testing, Claude excelled at spotting patterns in feedback and suggesting targeted improvements:
Prompt: "Here are notes from 5 usability tests of our listing creation flow. Users seem
to be struggling with the condition assessment section. Can you identify specific pain
points and suggest improvements?"
This analytical feedback loop enabled us to refine key workflows:
Simplified Navigation – Restructured based on user behavior analysis
Enhanced Photo Upload – Improved guidance for capturing tool details
Condition Assessment – Redesigned to be more intuitive and educational
The collaborative design process with Claude yielded a platform that feels distinctly crafted for the woodworking community. Key outcomes included:
Development Efficiency – 60% faster implementation compared to traditional design-then-code workflows
Higher User Satisfaction – Initial usability scores 35% higher than industry benchmarks
Consistent Design Language – A cohesive experience across all platform touchpoints
Accessibility Compliance – WCAG 2.1 AA compliance built into all components
Lessons in AI-Assisted Design
Looking back, several approaches proved especially valuable:
Progressive Iterations – Starting with broad concepts and gradually refining specifics
Real Data Testing – Using actual tool listings to validate designs rather than placeholders
Code First Exploration – Testing directly in the browser enabled faster feedback cycles
Component-Based Thinking – Building a systematic library rather than one-off pages
Perhaps most importantly, I learned that AI works best as an amplifier of vision rather than a replacement for it. Claude translated my understanding of the woodworking community into technical implementations, but the core insights still came from direct user research and domain knowledge.
In our next post, we'll dive deeper into the technical architecture behind the marketplace, exploring how we built a robust, scalable platform to bring these designs to life.
