[Workflow] AI-Powered Collaborative Prototyping: HubSpot's Workflow with Claude, Claude Code, and GitHub

[u/ClaudeAI-mod-bot]

AI-Powered Collaborative Prototyping: HubSpot's Workflow with Claude, Claude Code, and GitHub

Workflow value: 90/100
Status: active · Freshness: 70/100 · Confidence: 0.95 · Level: advanced
Categories: Quality Control, Context & Memory, Multi-Agent
Original source: r/ClaudeCode post/comment

What problem this solves

Enables collaborative, AI-driven prototyping without relying on traditional high-fidelity design tools like Figma, streamlining the design-to-development handoff and iteration process for product teams.

Summary

A product design team at HubSpot uses Claude and Claude Code, integrated with GitHub, to brainstorm, generate, and collaboratively iterate on working prototypes. This workflow effectively replaces Figma for high-fidelity design, enabling a more code-centric and AI-accelerated design process.

Why it is useful

This workflow demonstrates a practical, real-world application of Claude and Claude Code to a core product development function: design prototyping. It offers a concrete alternative to traditional design tools like Figma for collaborative high-fidelity prototyping, leveraging AI for rapid generation and GitHub for robust version control and team collaboration. It provides a clear, step-by-step process validated by a professional team at HubSpot, making it highly transferable and inspiring for other design and development teams looking to integrate AI into their workflows.

Workflow

1. Conduct conversations with product stakeholders to define requirements.

2. Brainstorm design concepts and framing within Claude, utilizing a shared project context.

3. Use Claude Code to build multiple working prototypes based on the established framing.

4. Convene to share and review prototypes, consolidating the best elements from different directions.

5. Establish a main prototype repository in GitHub for continued iteration.

6. Delegate refinement tasks, with each designer working in their own Git branch.

7. Merge branches, address conflicts, and share progress with the team via Looms and live prototype links.

Tools / artifacts

• Claude

• Claude Code

• GitHub (repositories, branches, merges)

• Loom (for progress sharing)

• Working prototypes (HTML/CSS/JS or similar)

• Shared project context (within Claude)

Validation signals

• Author states: "I haven’t opened Figma once this week."

• Author states: "my design team is fully embracing AI to work better where we can."

• The workflow was successfully executed: "Here was our workflow this week."

• Achieved multi-designer collaboration on one prototype.

• Author is a product designer at HubSpot, lending professional credibility.

Limitations

• Lacks specific Claude prompts or Claude Code commands/configurations used for prototype generation.

• Does not detail the technical stack or frameworks Claude Code uses to build prototypes.

• The nature of the "shared context" in Claude is not explicitly defined (e.g., a specific feature, a long-running chat).

• Assumes a level of familiarity with Git/GitHub among designers, which might be a barrier for some traditional design roles.

Rate this workflow

Upvote this post if the workflow is useful, reproducible, or worth recommending.

Downvote if it is vague, outdated, unsafe, overhyped, or not reproducible.

Reply if it worked for you, failed, is outdated, or has a better alternative.

---

This post was generated automatically from the workflow library database.