- MARCH 2026 TO APRIL 2026 -
ADAPTIVE-SECURITY
ADAPTIVE SECURITY OFFERS NEXT-GENERATION SECURITY AWARENESS TRAINING FOR AI-POWERED ATTACKS.
At Adaptive Security, I identified a workflow gap in the internal content production pipeline: writing blogs and generating accompanying visuals were two disconnected processes that required manual experimentation or repeated collaboration between writers and designers. Existing AI image generation tools also assumed users understood how to structure prompts effectively, creating friction for non-design-oriented teams. To address this, I designed and engineered The Blog Image Generation Portal, a comprehensive content-to-image system that analyzes copy, generates structured prompts, allows users to refine them, and produces production-ready imagery through an integrated AI pipeline.
TOOLS USED
Figma
Node.js
Claude API
fal.ai
Figma
Node.js
Claude API
fal.ai
CATEGORY
Product Design & Engineering Case Study
Product Design & Engineering Case Study
DELIVERABLES
UX Design
System Arch
Full-Stack Dev
Deployment
UX Design
System Arch
Full-Stack Dev
Deployment
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
THE PROBLEM
BLOG COPY GENERATION AND IMAGE CREATION EXIST AS DISCONNECTED WORKFLOWS...
Generating visuals for The Adaptive Blog was treated as a separate process from writing, with teams relying on designers to manually create imagery or independently experimenting with AI generation tools. This required significant experimentation, and prompt quality varied heavily depending on a user’s familiarity with AI tools. Existing generation platforms also lacked contextual awareness of blog articles, forcing users to manually determine how many visuals are needed, where they should appear in the article, and how prompts should be structured to ensure consistent image outputs.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
USER PERSONA
REBECCA WANG - CONTENT MARKETING WRITER
PAIN POINTS:
• Writing content and generating images happen across disconnected tools.
• AI prompting requires trial-and-error, producing inconsistent outputs.
• Relying on designers for blog visuals slows down publishing timelines.
NEEDS:
• A single, concise workflow for writing, prompting, and image generation.
• Editable, structured prompts that are easy to refine and control for consistent output.
• Faster iteration when generating and revising blog visuals.
PAIN POINTS:
• Writing content and generating images happen across disconnected tools.
• AI prompting requires trial-and-error, producing inconsistent outputs.
• Relying on designers for blog visuals slows down publishing timelines.
NEEDS:
• A single, concise workflow for writing, prompting, and image generation.
• Editable, structured prompts that are easy to refine and control for consistent output.
• Faster iteration when generating and revising blog visuals.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
SOLUTION-IDEATION
THROUGH UNDERSTANDING BLOG WRITER PAIN POINTS AND NEEDS, I BRAINSTORMED SOLUTIONS THE BLOG IMAGE GENERATION PORTAL NEEDED TO IMPLEMENT TO IMPROVE A USER’S EXPERIENCE FOR GENERATING VISUALS FOR BLOGS.
1. EFFICIENT ITERATION AND FEEDBACK LOOPS
To iterate rapidly without switching tools or workflows, prompt editing and image generation should be accessible in the same tool.
2. GENERATED PROMPT OUTPUTS SHOULD REMAIN EDITABLE
Users should be able to refine generated prompts before image generation occurs, reinforcing user authorship throughout the workflow.
3. STRUCTURED PROMPT TAXONOMY OVER FREEFORM GENERATION
Rather than generating prompts from scratch, the product should utilize predefined visual families with structured templates and parameters.
4. CONTENT-AWARE IMAGE PLACEMENT
The system should determine how many visuals a blog post likely requires, and where they should appear contextually in the writing.
5. ROLE-BASED AUTHENTICATION
Google OAuth supports authenticated Adaptive Security users, while a shared access code allows for access to the tool for contractors.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
TECHNICAL-IMPL.
THE FINAL APPLICATION WAS DEVELOPED AS A FULL-STACK SYSTEM WITH MINIMAL ABSTRACTION LAYERS.
** ENTIRE BACKEND ARCHITECTURE BUILT USING NATIVE NODE.JS MODULES ONLY. **
FRONTEND
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
a. Blog Copy Input
b. Prompt Refinement
c. Image Generation Preview
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
a. Blog Copy Input
b. Prompt Refinement
c. Image Generation Preview
BACKEND (NODE.JS NATIVE)
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
a. API Orchestration
b. OAuth Authentication
c. Session Management
d. Generation Workflows
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
a. API Orchestration
b. OAuth Authentication
c. Session Management
d. Generation Workflows
CLAUDE
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
a. Semantic Reasoning
b. Prompt Family Assignment
c. Contextual Image Placement
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
a. Semantic Reasoning
b. Prompt Family Assignment
c. Contextual Image Placement
FAL.AI
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
a. Image Synthesis
b. Generation Rendering
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
a. Image Synthesis
b. Generation Rendering
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
USER-TESTING
8 ADAPTIVE SECURITY CONTENT WRITERS WERE OBSERVED USING THE INITIAL VERSION OF THE BLOG IMAGE GENERATION PORTAL AND THEN GUIDED THROUGH A STRUCTURED INTERVIEW SESSION:
• 87.5% of testers stated editable prompts would make the image outputs feel significantly more controllable and trustworthy.
• Writers gave the speed of iterating on prompts and regenerating visuals an average rating of 9.1/10.
• 100% of testers preferred the structured prompt outputs over new prompts being generated from scratch every time.
KEY TAKEAWAYS TO IMPLEMENT IN THE FINAL PRODUCT:
• Preserve human oversight by making the generated prompts editable before generating imagery.
• Expand the structured prompt taxonomy to improve consistency across different imagery depending on blog copy context.
• Prioritize faster iteration loops over maximizing individual image generation quality.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
FINAL SCREENS
BELOW ARE THE FINAL SCREEN MOCKUPS FROM THE MOST IMPORTANT PAGES IN THE FINALIZED APPLICATION:
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
FINAL SOLUTIONS
AFTER FINALIZING THE INTERFACE SCREENS, I BEGAN DEVELOPING THE FUNCTIONS OF THE BLOG IMAGE GENERATION PORTAL TO CREATE ONE OVERALL, COHESIVE EXPERIENCE THAT ENTIRELY COVERS THE WORKFLOW FOR GENERATING BLOG IMAGERY. THE FINALIZED APP CONSISTS OF 4 CORE SOLUTIONS, ALL CONNECTED IN REGARDS TO A USER’S WORKFLOW FOR GENERATING VISUALS:
1. GOOGLE OAUTH OR GUEST ACCESS
To access the internal tool, Adaptive Security employees can simply log in with Google to create prompts for generating imagery for blog posts. To allow contractors without an Adaptive Security email to access the tool, they can utilize the Guest Access Code input. This limits the usage of tokens in case someone outside the organization has access to the application.
To access the internal tool, Adaptive Security employees can simply log in with Google to create prompts for generating imagery for blog posts. To allow contractors without an Adaptive Security email to access the tool, they can utilize the Guest Access Code input. This limits the usage of tokens in case someone outside the organization has access to the application.
2. PASTE OR UPLOAD INPUT OF BLOG POST COPY
Once logged into the Blog Image Generation Portal, users can either paste blog post copy or upload a PDF file. The tool parses through the uploaded file, and users can easily replace it with another before previewing and generating prompts. Claude analyzes the parsed or pasted text to select the correct template(s) that will generate appropriate imagery for sections of the blog copy.
Once logged into the Blog Image Generation Portal, users can either paste blog post copy or upload a PDF file. The tool parses through the uploaded file, and users can easily replace it with another before previewing and generating prompts. Claude analyzes the parsed or pasted text to select the correct template(s) that will generate appropriate imagery for sections of the blog copy.
3. ACCESS TO MANUALLY REFINE PROMPT TEMPLATES
Once Claude selects prompt template(s) based on the pasted or parsed blog copy text, users can further edit the prompts to make additional refinements, or choose brand new templates that they feel better fit the copy. Users also have access to choosing the sizing of the imagery (e.g., 1220px by 675px), and can also delete generated prompts if they don’t need as many images.
4. IMAGERY PREVIEW AND DOWNLOAD
After finalizing the prompts to generate blog post visuals, each prompt generates 4 images through fal.ai using 4 different models. Once all 4 images for each section are generated, users can regenerate that section's images or download each image individually as a .webp file. In case a user wants to further refine the outputs, they can go back to previous pages or restart the entire process.
After finalizing the prompts to generate blog post visuals, each prompt generates 4 images through fal.ai using 4 different models. Once all 4 images for each section are generated, users can regenerate that section's images or download each image individually as a .webp file. In case a user wants to further refine the outputs, they can go back to previous pages or restart the entire process.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
CLOSING
WORKING END-TO-END ON THIS PRODUCT, WORKING THROUGH DESIGN AND DEVELOPMENT TO DEPLOYMENT, FUNDAMENTALLY CHANGED HOW I THINK ABOUT PRODUCT DESIGN.
Traditional UX work often focuses on strictly interfaces and interaction patterns, but working on this system revealed how much the quality of a product is shaped by the architecture behind the scenes, rather than just the UI itself. Designing structured prompt taxonomies, orchestrating multiple AI systems, engineering a controllable workflow, and balancing automation with human oversight were all equally important as designing the interfaces and interactions that users can visually see.
Building the Adaptive Security Image Generation Portal from scratch helped me understand how technical architecture and product decisions continuously influence one another, whether it's through implementing authentication flows, API orchestration, or polishing server infrastructure. Most importantly, the project demonstrated that designing AI tools fundamentally comes down to designing for uncertainty. Since AI systems are probabilistic by nature, product experiences incorporating the technology need to prioritize complete transparency, iteration, and controllability for users. As a whole, this project shifted my perspective from designing isolated interfaces to designing a complete system end-to-end, which in this case was to fulfill a major need of the target user.