From f8d8eeace1ba6cf862e7a284802f8822b2fb5c50 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Mon, 1 Sep 2025 18:45:23 +0300
Subject: [PATCH] docs: added a section on figma mcp + workflows diagram fix
 (#13367)

---
 www/apps/book/public/llms-full.txt                          | 6 ++++++
 www/apps/ui/app/page.mdx                                    | 6 ++++++
 www/apps/ui/generated/edit-dates.mjs                        | 2 +-
 .../src/components/WorkflowDiagram/Common/Node/index.tsx    | 2 +-
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/www/apps/book/public/llms-full.txt b/www/apps/book/public/llms-full.txt
index 333caa67ad..b9baacfa17 100644
--- a/www/apps/book/public/llms-full.txt
+++ b/www/apps/book/public/llms-full.txt
@@ -103218,6 +103218,12 @@ Welcome to Medusa UI, a React implementation of the Medusa design system.
 Medusa UI is a collection of components, hooks, utility functions, icons, and [Tailwind CSS](https://tailwindcss.com/) classes that can be used to build
 a consistent user interface across the Medusa Admin and client applications.
 
+## Figma Design System
+
+The Medusa UI design system is also available on [Figma](https://www.figma.com/community/file/1278648465968635936/medusa-ui). You can explore the components, icons, and design tokens used in Medusa UI.
+
+This is especially useful if you have the [Figma Dev MCP](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server) set up, allowing you to easily copy designs from the Figma Medusa UI file to your projects.
+
 ***
 
 ## Packages
diff --git a/www/apps/ui/app/page.mdx b/www/apps/ui/app/page.mdx
index 4a1e7b041a..6439ed11ba 100644
--- a/www/apps/ui/app/page.mdx
+++ b/www/apps/ui/app/page.mdx
@@ -11,6 +11,12 @@ Welcome to Medusa UI, a React implementation of the Medusa design system.
 Medusa UI is a collection of components, hooks, utility functions, icons, and [Tailwind CSS](https://tailwindcss.com/) classes that can be used to build
 a consistent user interface across the Medusa Admin and client applications.
 
+## Figma Design System
+
+The Medusa UI design system is also available on [Figma](https://www.figma.com/community/file/1278648465968635936/medusa-ui). You can explore the components, icons, and design tokens used in Medusa UI.
+
+This is especially useful if you have the [Figma Dev MCP](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server) set up, allowing you to easily copy designs from the Figma Medusa UI file to your projects.
+
 <FigmaCard />
 
 ---
diff --git a/www/apps/ui/generated/edit-dates.mjs b/www/apps/ui/generated/edit-dates.mjs
index e934ff1419..2d4f1bbe9a 100644
--- a/www/apps/ui/generated/edit-dates.mjs
+++ b/www/apps/ui/generated/edit-dates.mjs
@@ -1,5 +1,5 @@
 export const generatedEditDates = {
-  "app/page.mdx": "2025-08-18T11:47:21.886Z",
+  "app/page.mdx": "2025-09-01T14:49:02.465Z",
   "app/colors/overview/page.mdx": "2025-08-18T11:40:32.013Z",
   "app/components/alert/page.mdx": "2025-08-18T11:37:35.544Z",
   "app/components/avatar/page.mdx": "2025-08-18T11:37:36.799Z",
diff --git a/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Node/index.tsx b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Node/index.tsx
index 6edd676826..dfe216bfd3 100644
--- a/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Node/index.tsx
+++ b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Node/index.tsx
@@ -108,7 +108,7 @@ export const WorkflowDiagramStepNode = ({ step }: WorkflowDiagramNodeProps) => {
       ref={ref}
     >
       <Link
-        href={step.link || `#${step.name}`}
+        href={step.link || `#${step.name.toLowerCase()}`}
         className="focus-visible:shadow-borders-focus transition-fg rounded-docs_sm outline-none"
       >
         <div