diff --git a/blog/publications/Can_AI_Build_Front_End_Apps_from_Designs_and_Requirements.mdx b/blog/publications/Can_AI_Build_Front_End_Apps_from_Designs_and_Requirements.mdx
new file mode 100644
index 0000000..ea982d0
--- /dev/null
+++ b/blog/publications/Can_AI_Build_Front_End_Apps_from_Designs_and_Requirements.mdx
@@ -0,0 +1,78 @@
+---
+title: Can AI Build Front-End Apps from Designs and Requirements?
+authors:
+ name: Caren Rizk
+ title: Master's Student
+url: /members/caren-rizk
+
+---
+import ViewCounter from "@site/src/components/ViewCounter";
+
+Can AI Build Front-End Apps from Designs and Requirements?
+
+
+**Front-end development is inherently collaborative and often messy.** Product managers define features through user stories; designers create interfaces in tools like Figma, and developers translate both into code. This translation step is where inconsistencies often appear: the final implementation may drift from the original requirements, the visual design, or both.
+
+**Our work asks a simple question:** Can AI generate front-end applications that are both functionally correct and visually aligned with design intent?
+
+### Our Approach: A Multi-Agent Pipeline
+
+Instead of relying on a single model, we designed a system that mirrors how real development works: generate, evaluate, and fix. The pipeline combines two complementary inputs:
+
+• User stories, which describe what the application should do
+
+• Figma designs, which describe what the application should look like
+
+ 
+
+Figure 1. Multi-agent pipeline for generating React applications from user stories and Figma designs.
+
+### How the Pipeline Works
+
+The system is organized around three specialized agents:
+
+**• Builder:** Generates the initial React application by combining information from user stories and Figma-derived representations.
+
+**• Validator:** Evaluates the generated output along two dimensions: functional correctness and visual fidelity.
+
+**• Fixer:** Repairs the issues detected during validation and improves the generated application.
+
+### Why Architectures Matter
+
+A key part of our study is not only whether the system works, but also how different multi-agent coordination strategies affect quality and efficiency. We compare three architectures:
+
+**• Supervisor (tool-calling):** A single controller decides which agent tool to invoke at each step. This keeps control centralized and adaptive.
+
+**• Hierarchical:** A top-level controller delegates work to specialized sub-controllers, helping localize reasoning and reduce context overload.
+
+**• Custom:** A deterministic workflow explicitly defines the execution order of the stages. This improves reproducibility and makes cost easier to track.
+
+One of the main findings of the paper is that architecture has only a modest impact on quality, but a much larger impact on efficiency. In particular, the Custom architecture reduces generator token usage substantially while preserving similar output quality.
+
+   
+
+### What We Found
+
+We evaluated the framework on four real-world open-source projects containing 75 user stories paired with Figma frames.
+
+• On average, 54.1% of outputs achieved full functional coverage
+
+• 57.9% achieved full visual fidelity
+
+• When partial matches are included, these rates rise to 76.9% and 84.9%, respectively
+
+These results suggest that multimodal multi-agent systems can often produce applications that are close to correct, and that many remaining issues are localized and fixable rather than complete failures.
+
+### Why This Matters
+
+Most prior systems generate code from only text or only designs. In contrast, real front-end development depends on both. By combining requirements and design artifacts in a single pipeline, our framework moves closer to automating realistic end-to-end front-end workflows.
+
+### Takeaways
+
+• AI can generate usable front-end applications from requirements and design inputs
+
+• Full correctness remains challenging, especially in realistic multimodal settings
+
+• Most failures are incremental and can be improved through lightweight repair steps
+
+• The structure of a multi-agent system matters as much as the underlying model
diff --git a/blog/publications/Hierarichal.png b/blog/publications/Hierarichal.png
new file mode 100644
index 0000000..f703728
Binary files /dev/null and b/blog/publications/Hierarichal.png differ
diff --git a/blog/publications/MultiAgentPipelineForGeneratingReactApplications.png b/blog/publications/MultiAgentPipelineForGeneratingReactApplications.png
new file mode 100644
index 0000000..e0f17e2
Binary files /dev/null and b/blog/publications/MultiAgentPipelineForGeneratingReactApplications.png differ
diff --git a/blog/publications/Supervisor.png b/blog/publications/Supervisor.png
new file mode 100644
index 0000000..ac98faa
Binary files /dev/null and b/blog/publications/Supervisor.png differ
diff --git a/blog/publications/custom.png b/blog/publications/custom.png
new file mode 100644
index 0000000..899d459
Binary files /dev/null and b/blog/publications/custom.png differ
diff --git a/src/components/BlogPage.tsx b/src/components/BlogPage.tsx
index b4b8758..cc75fc5 100644
--- a/src/components/BlogPage.tsx
+++ b/src/components/BlogPage.tsx
@@ -26,8 +26,7 @@ const TheNPMecosystemImage= require("../images/Blog/TheNPMecosystem.jpg").defaul
const AIChatbotImage =require("../images/Blog/AIChatbotforthePharmaceuticalIndustry.jpeg").default;
const ArtifactSyncImage =require("../images/Blog/ArtifactSync_Modern_software.jpeg").default;
-
-
+ const CreateAIBuildFrontEndAppsImage =require("../images/Blog/CreateAIBuildFrontEndApps.jpeg").default;
// interface BlogPost {
// title: string;
@@ -40,6 +39,17 @@ const ArtifactSyncImage =require("../images/Blog/ArtifactSync_Modern_software.jp
// }
const blogPosts = [
+ {
+
+ title: " Can AI Build Front-End Apps from Designs and Requirements? ",
+ authorName: "Caren Rizk",
+ image: CreateAIBuildFrontEndAppsImage,
+ authorUrl: "/members/caren-rizk",
+ authorRole: "Master's Student",
+ description:
+ "Front-end development is inherently collaborative and often messy. Product managers define features through user stories; designers create interfaces in tools like Figma, and developers translate both into code. This translation step is where inconsistencies often appear: the final implementation may drift from the original requirements, the visual design, or both. ",
+ postUrl: "/blog/publications/Can_AI_Build_Front_End_Apps_from_Designs_and_Requirements"
+ },
{
title: "Keeping Software Artifacts Synchronized with ArtifactSync",
diff --git a/src/images/Blog/CreateAIBuildFrontEndApps.jpeg b/src/images/Blog/CreateAIBuildFrontEndApps.jpeg
new file mode 100644
index 0000000..cb0191f
Binary files /dev/null and b/src/images/Blog/CreateAIBuildFrontEndApps.jpeg differ