1- Project Overview: The Real Opportunity
The Quran Journal is a responsive, bilingual web application supporting reflective study with Arabic RTL/English LTR support, personal journaling, API integration, and dark mode functionality.
But the case study's real value isn't the application—it's the process of creating its design system. This project demonstrates a critical capability for senior designers: how to systematically extract design systems from existing code using AI as an accelerant.
The opportunity: Most design systems are built bottom-up (design first, then implement), creating perpetual misalignment between what designers intend and what developers build. What if we could reverse-engineer a design system from working code, using AI to identify patterns and systematize them?
Key Product Characteristics:
Bilingual support (Arabic RTL and English LTR)
Fully responsive across desktop and mobile
Personal journaling with persistent local storage
Integration with Quran APIs for verse, translation, and tafsir
Light and Dark mode support
2- The Challenge: Extracting System from Complexity
The Quran Journal presented several design system challenges:
Bilingual complexity: Code had to handle both RTL (Arabic) and LTR (English) layout switching—most design tools treat these separately
Responsive at scale: Component behavior had to be consistent across mobile, tablet, and desktop without manual breakpoint management
Technical reality: The design system had to match the code's actual implementation (inline styles, CSS variables, component structure)
The systemic problem: A traditional design-first approach would create beautiful Figma components that didn't match the code's technical reality. We needed a process that validated design against working code, not against designer intent.
The application was built as a single-page React app using modern front-end practices, with inline styling, custom internationalization logic, and deployment-ready architecture.
What makes this project unique is not just the product—but the process used to systematize it.
3- Process: AI-Orchestrated Design System Extraction
Rather than hand-crafting a design system from scratch, I developed a reverse-engineering methodology:
1. AI-Orchestrated Development
Used ChatGPT to generate structured prompts for Claude to build the website.
Claude generated the initial React-based application.
Continued refining and fixing the code using Claude and DeepSeek.
This phase prioritized rapid iteration, responsiveness, and accurate RTL/LTR handling.
2. Preparing Claude for Figma
Before attempting to generate or interpret designs in Figma:
I uploaded a Figma skills reference file (from Figma documentation) to Claude.
This enabled Claude to better understand Figma structure, nodes, variables, and components.
This improved reasoning quality, though execution still required iteration and validation.
3. Early Attempt: AI → Figma Variables
Initially, I used Claude to:
Generate Figma local variables (colors, typography, tokens).
Attempt mapping them to design structures.
Challenges:
Weak connection between variables and actual design nodes.
Poor handling of text styles.
Inability to convert code into accurate visual layouts.
4. Converting Code into Design
To overcome this:
Used the HTML to Design Figma plugin
Converted the live website into Figma frames (Arabic + English)
Outcomes:
Pixel-accurate layouts.
Real content and spacing.
True responsive proportions.
This created a production-aligned starting point inside Figma.
5. Systematizing the Design with AI
With frames in place:
Claude analyzed 2000+ nodes across screens.
Identified colors, typography, and repeated patterns.
Generated and connected local variables programmatically.
Defined missing tokens, including dark mode values.
Identified common UI patterns and converted them into reusable local components (e.g., buttons, tags).
However, plugin-generated variables were not clean:
Inconsistent naming.
Redundant tokens.
Missing semantic structure.
Resolution:
Used Claude to clean and standardize variables.
Established proper naming conventions.
Mapped semantic tokens (surface, text, accent, tags).
Completed missing values.
Refined components to ensure consistency and scalability across screens.
6. Managing AI Limitations
A key observation:
Claude performs poorly in long chat sessions.
Solution:
Broke tasks into smaller, focused prompts.
Reset context frequently.
Treated AI as modular tools rather than a continuous assistant.
4- Conclusion & Lessons Learned
AI tools are powerful but specialized—each tool performed best in a specific role rather than end-to-end.
Designing in code first improved realism, responsiveness, and handling of bilingual layouts.
AI-generated systems require human refinement to achieve clarity, structure, and usability.
Providing structured context (like Figma skills documentation) improves AI reasoning but does not eliminate execution gaps.
Managing prompt size and context is essential for maintaining AI performance and output quality.
AI can accelerate system creation (tokens, components), but design quality still depends on human judgment and system thinking.
5- Next Steps
Refine journaling flows based on user feedback.
Improve accessibility (contrast, typography scaling, readability).
Position the product as an ongoing charity initiative with continuous value.
Optimize AI workflow into a repeatable, documented process.
