AI first design setup

AI first design setup (2026-04-20)

Summary

• saar-arbel convened ben + ayala with elad (lead of monday’s vibe design system) to set up the AI-first design + dev infrastructure for harmony.ai before the team starts building in earnest. Goal: design and engineering work fast together with the same toolchain and conventions.
• Tool stance: primary IDE/agent should be claude-code (most monday engineers already use it). cursor usable for prototypes but everything built in Claude Code also works in Cursor (not vice versa). Claude Code Visual is even better but ~$200/mo subscription is gated on cost/licensing — Anthropic conversations open.
• Design system stance: do NOT build components from scratch. Build on top of vibe (monday’s design system, recently rebuilt to support themable white-labeling). Use only the atoms/tokens layer; build molecules yourself with AI. The Vibe team can give a fully themable Figma library + Claude Code design-system in a kickoff session.
• Skills/commands: install established Claude Code skills (superpowers, skill-creator, front-end best-practices). The Notetaker / CRM team’s front-end rules (built by yuval-ezov when he worked there) are reportedly the best in the company — adopt as starting point.
• Context layer: harmony.ai already runs WhatsApp team agents and a shared context layer; Saar wants an in-Slack agent for design that can be a “middleman” for on-the-fly context. Other monday teams (with Tomer Friedman) run an auto-updating context-layer pattern over GitHub that’s worth studying.
• Open pain points surfaced: AI design/dev tools are single-player (no Google-Docs-style co-editing); icon generation via AI skills is painful and may need a fine-tuned model.

Decisions raised

(No formal team-wide DECs committed in this session — directions are emerging, tracked as action items below.)

Action items raised

• AI-027 — ben / ayala / elad — Run a 1-day experiment using vibe atoms + theming for a harmony.ai prototype. Validate the Figma-library + Claude Code design-system handoff.
• AI-026 — saar-arbel — Evaluate enabling Claude Code Visual access for the design team (resolve cost / licensing with Anthropic; ~$200/mosubscriptionvscurrent$1000 token allotment).
• AI-025 — ben / ayala — Install and adopt Claude Code skills: superpowers, skill-creator, plus the Notetaker/CRM front-end rules (via yuval-ezov). Run a kickoff session together to build the team’s own design skills.
• AI-024 — ben — Stand up an in-Slack design agent (analogue to the existing WhatsApp team agent) to serve as a middleman for on-the-fly context capture in the design channel.

Open questions raised

• OQ-017 — How to handle icon generation in AI workflows? Current skill-based attempts are painful; may require a fine-tuned model. Defer until iconography becomes a blocker.
• OQ-016 — How to enable multi-user co-editing across AI design/dev tools? All current tools (Cursor, Claude Code) are single-player. Workaround: shared playground envs (Intercom-style). Wishlist: “Google Docs”-style co-editing.

Entities

• saar-arbel, ben, ayala — harmony.ai attendees
• elad — lead of vibe design system at monday; primary advisor in this session
• yuval-ezov — referenced as author of the Notetaker/CRM front-end rules considered best in the company
• tomer-friedman — referenced as someone working on auto-updating context-layer patterns

Concepts

• vibe — monday’s design system, now themable; recommended foundation for harmony.ai
• claude-code — primary IDE/agent for harmony.ai going forward (over cursor)
• designer-as-developer — reinforced; this whole session is about wiring the design team to ship code via AI tools
• brain-layer — mentioned in the context-layer agent discussion