import { BlogFAQ } from "../BlogFAQ";
import { BlogInlineCTA } from "../BlogInlineCTA";
import type { TOCItem } from "../BlogTOC";

export const figmaAIFAQ = [
  {
    q: "Can AI agents really design in Figma now?",
    a: "Yes, via MCP integration and write-to-canvas skills, agents can create and modify live files using your components and variables. A human still directs and refines the output.",
  },
  {
    q: "Will AI replace product designers?",
    a: "No, it replaces blank-canvas production work. Senior designers who direct AI ship dramatically faster; the demand shifts from hands to judgment.",
  },
  {
    q: "What is vibe designing?",
    a: "AI-assisted workflows that compress research, wireframe, and clickable prototype from weeks into hours, letting teams test flows before committing to high-fidelity design.",
  },
  {
    q: "What is Config 2026?",
    a: "Figma's annual conference, June 24 and 25, 2026, expected to center on agentic design workflows across the Figma stack.",
  },
];

export const figmaAITOC: TOCItem[] = [
  { id: "shipped", label: "What Figma shipped" },
  { id: "founders", label: "What it means for founders" },
  { id: "before-config", label: "Before Config 2026" },
  { id: "how-we-use", label: "How we use this" },
  { id: "faq", label: "FAQ" },
];

export function ArticleFigmaAI() {
  return (
    <div className="b-prose">
      <p className="b-lead">
        Figma&rsquo;s May 2026 release quietly crossed a line: AI agents can now
        create and modify <strong>live Figma files</strong>, using your real
        components, variables, and styles through deeper MCP (Model Context
        Protocol) integration and &ldquo;write to canvas&rdquo; skills.
      </p>
      <p>
        With Config 2026 set for June 24 and 25, design is about to have its
        agentic moment. Here&rsquo;s what actually changed, and what it means if
        you run a startup.
      </p>

      <h2 id="shipped">What Figma shipped (and why it matters)</h2>
      <p>Three things stand out from the recent releases:</p>
      <ol>
        <li>
          <strong>Custom skills in Figma Make</strong>—teams encode their
          conventions and repeated workflows as markdown instructions an AI can
          follow. Your design system stops being a PDF and becomes executable
          knowledge.
        </li>
        <li>
          <strong>Deeper MCP integration</strong>—agents can translate code into
          Figma designs and back. The design-to-code wall is dissolving in both
          directions.
        </li>
        <li>
          <strong>Write-to-canvas agents</strong>—AI that drafts real screens in
          your file with your components, not throwaway mockups in a separate
          tool.
        </li>
      </ol>
      <p>
        Figma has partnered with both OpenAI and Anthropic, and the whole
        stack—Make, Sites, Dev Mode, and Weave—is converging on one idea:{" "}
        <strong>the gap between idea and shipped product is collapsing.</strong>
      </p>

      <h2 id="founders">What this means for founders</h2>
      <h3>Speed is now table stakes</h3>
      <p>
        &ldquo;Vibe designing&rdquo; means AI-assisted research, wireframing,
        and prototyping compressed into hours, so you can have clickable
        prototypes in an afternoon. If your design partner still quotes two
        weeks for a landing page, they are working like it&rsquo;s 2023.
      </p>
      <h3>AI doesn&rsquo;t replace senior judgment; it amplifies it</h3>
      <p>
        Agents generate volume; they don&rsquo;t know your user, your funnel, or
        why option B converts. The leverage goes to{" "}
        <strong>senior designers using agents</strong>, while junior-heavy teams
        lose their cost advantage. AI does junior work for free now.
      </p>
      <h3>Your brand needs to be machine-readable</h3>
      <p>
        The same shift is happening in search: AI assistants now answer buying
        questions directly. Think of your design system as token files and
        structured data on your site. &ldquo;Machine Experience&rdquo; is
        becoming the new cost of visibility.
      </p>

      <h2 id="before-config">What to do before Config 2026</h2>
      <ol>
        <li>
          <strong>Audit your design ops.</strong> If every screen still starts
          from a blank canvas, you are paying a speed tax.
        </li>
        <li>
          <strong>Move brand guidelines into a structured form:</strong> tokens,
          components, and written conventions that an agent can execute.
        </li>
        <li>
          <strong>Ask your design partner how they use AI.</strong> The honest
          answer should include specific tools and a faster turnaround, not
          &ldquo;we&rsquo;re exploring it.&rdquo;
        </li>
        <li>
          <strong>Watch Config (June 24 and 25)</strong> for the agent
          announcements, then expect every design vendor&rsquo;s pricing to be
          repriced against AI-augmented speed.
        </li>
      </ol>

      <h2 id="how-we-use">How we use this at DesignShare</h2>
      <p>
        Our team runs AI-assisted research, wireframing, and iteration
        internally—it&rsquo;s how we hold a ~48-hour average turnaround with
        senior-only designers. The model we bet on:{" "}
        <strong>flat fee + senior judgment + agentic speed.</strong> The
        hourly-billing agency model is the one this wave breaks.
      </p>
      <p>
        The studio behind DesignShare,{" "}
        <a
          href="https://eleganttechbd.com/"
          target="_blank"
          rel="noopener noreferrer"
        >
          Elegant IT Limited
        </a>
        , has been shipping product design for startups since 2017. We adopted
        AI-first workflows across the board so every client gets the speed
        benefit without paying more.
      </p>

      <BlogInlineCTA
        heading="Want a team that already works at"
        accent="AI speed?"
        text="DesignShare ships senior product design in ~48 hours, flat $3,495/mo. Pause anytime."
        cta="See how it works"
        href="https://designshare.net/#how"
      />

      <h2 id="faq">Frequently asked questions</h2>
      <BlogFAQ items={figmaAIFAQ} />
    </div>
  );
}