Screenshot to Figma to React Demo

Amir (Co-Founder at Humblytics) shares how he builds an “AI-native” company by focusing less on shiny tools and more on change management: assessing AI fluency across roles, setting the right success metrics, and creating shared context so AI can reliably ship work. The big theme is convergence—engineering, product, and design are collapsing into tighter loops thanks to tools like Cursor, MCP connectors, and Figma Make. Amir demos workflows like: AI-generated context files + auto-updated documentation, scraping customer domains to infer ICPs, turning screenshots into layered Figma designs, then converting Figma to working React code in minutes, and even running an “AI co-founder” Slack bot that files Linear tickets and can hand work to agents.Timestamps0:00 Introduction0:06 Amir’s stance: “no AI experts” — it’s constant learning in a fast-changing field.1:59 Cursor as the unlock: not just coding, but PM/strategy/design work via MCPs.4:17 The real problem: AI adoption is mostly change management + fluency assessment.5:18 The AI fluency rubric (helper → automator → augmentor → agentic) and why it matters.8:13 Cursor analytics: measuring AI-generated code and usage across the team.9:24 “New code is ~99% AI-generated” + how they keep quality via tight review + incremental changes.10:58 Docs workflow: GitBook connected to repo → AI edits docs and pushes live fast.14:02 ICP building: export Stripe customers → scrape domains with Firecrawl → cluster personas.17:45 Hallucination in the wild: AI misclassifies a company; human correction loop matters.34:43 Wild move: they often design in code and use an AI-generated style guide to stay consistent.38:10 Best demo: screenshot → Figma Make → layered design → Figma MCP → React code in minutes.45:29 “AI co-founder” Slack bot (Pixel): turns a bug report into a Linear ticket and can hand off to agents.48:46 Amir’s wish list: we “solved dev”; now we need Cursor for marketing/sales → path to $1M ARR.Tools & technologies mentionedCursor — AI-first IDE used for coding and product/design/strategy workflows; includes team analytics.MCP (Model Context Protocol) — “connector” layer (Anthropic-origin) that lets LLMs interface with external tools/services.ChatGPT — used as a common baseline tool; discussed in the context of prompting practices and workflows.Microsoft Copilot — referenced via the law firm incentive story; used as an example of “usage metrics” gone wrong.Anthropic (AI fluency framework) — inspiration source for the helper/automator/augmentor/agentic rubric.GitBook — documentation platform connected to the repo so docs can be updated and published quickly.Firecrawl (MCP) — agentic web scraper used to analyze customer domains and infer ICP/personas.Stripe — source of customer export data (domains) to build ICP clustering.Figma — design collaboration tool; used here with Make + MCP to move from design → code.Figma Make — feature to recreate UI from an image/screenshot into editable, layered designs.Figma MCP — connector that allows Cursor/LLMs to pull Figma components/designs and generate code.React — front-end framework used in the demo for generating functional UI components.Supabase — mentioned as part of a sample stack when generating a PRD.React Router — mentioned as part of the sample stack in PRD generation.Slack — where Amir runs internal agents (including the “AI co-founder” bot).Linear — project management tool used for creating tickets from Slack/agent workflows.CI/CD — their deployment/review pipeline; emphasized as the human accountability layer.Subscribe at⁠ thisnewway.com⁠ to get the step-by-step playbooks, tools, and workflows.