← Back to WorkDesignForge: LLM-Generated Homepage Variants for Rapid Design Exploration
DesignForge is an internal R&D tool that converts a structured creative brief into five distinct AI-generated homepage variants, each with JSX code and design tokens, so a team can compare, refine, and extract winning patterns before handing work to web development.
- Domain
- Design Tooling / Internal Platform Engineering
Capabilities
AI-assisted generation pipelinesStructured brief-to-output workflowsHuman-in-the-loop review toolingInternal platform engineeringAgentic Web and AEODigital PlatformsApplied AIWorkflow Modernization
The Problem
Homepage design exploration inside Gulfturn typically required a designer to manually produce multiple divergent concepts before a direction was chosen, a process that consumed disproportionate time relative to the number of variants a client or internal stakeholder could meaningfully review. Briefs captured aesthetic direction, UI pattern preferences, and reference sites, but translating that input into comparable, code-backed prototypes was manual and inconsistent between designers. There was no shared system for storing briefs, references, generated variants, and feedback in one place, which made it difficult to reuse patterns that had previously tested well or to track why a particular design was chosen or rejected.
Our Role
Gulfturn's internal team designed and built DesignForge end to end: the data model (Client, Brief, Design, Feedback, ExportLog, Reference, ChangeLog, User), the multi-step brief authoring flow, the generation and refinement pipeline, and the review surfaces (Design Library, Feedback Logs, Export History). The team also defined the guardrail fields in the brief schema that constrain what the model is allowed to vary, and built the retry and placeholder-fallback logic that keeps generation reliable when individual variant requests fail.
How It Works
A user creates a Brief through a multi-step wizard covering title, aesthetic direction, UI design patterns, reference URLs, stated intent, and explicit guardrails (constraints the generated designs must respect). Reference URLs are scraped for metadata and attached to the brief. Submitting a brief triggers generateDesigns, which requests five distinct homepage variants from an LLM and writes each to the database as it completes rather than waiting for the full batch, so partial results are visible immediately. From Brief Detail, a user can preview each variant, request a natural-language refinement of a single design, or regenerate the full set. Reviewers attach qualitative Feedback to any variant. Designs judged reusable can be flagged as global presets, making them available as starting points for future briefs across clients, and winning variants are exported with a record kept in ExportLog for handoff to web development.
AI and Human Roles
The LLM (claude-sonnet-5), via InvokeLLM, is responsible for producing the actual design output: given a brief's aesthetic direction, UI pattern preferences, references, intent, and guardrails, it generates five distinct homepage variants as JSX code with accompanying design tokens. It also handles single-design refinement, taking an existing variant's code and tokens plus a natural-language instruction and returning a modified version. GenerateImage is used by the same pipeline to produce AI-generated imagery for design assets when a variant calls for it. The model does not decide which variant is best, does not publish or export anything on its own, and does not have access to Feedback or ExportLog history when generating new variants unless that context is explicitly included in the brief.
Human Controls
A human author writes the brief, including the guardrails that constrain what the model may vary, and reviews all five generated variants before taking further action. Refinement requests are human-initiated and human-worded; the system does not auto-refine. Marking a design as a global preset is a manual action, as is attaching Feedback to a variant. Export to web development requires an explicit user action that writes an ExportLog record; no design is exported automatically. Failed or placeholder variants are visibly flagged so a reviewer knows generation was incomplete and can trigger a retry rather than mistaking a placeholder for a real option. Role-based User permissions govern who can create briefs, mark presets, or export designs.
System Architecture
DesignForge is organized around Client, Brief, Design, Feedback, Reference, ExportLog, ChangeLog, and role-based User entities. The generateDesigns backend function calls InvokeLLM (claude-sonnet-5) with the brief's structured fields as input and requests five distinct homepage variants; each variant is persisted to the database individually as it is returned, rather than in a single batch write, so failures in one variant do not block the others. Failed generation attempts are retried, and if a variant still fails, a placeholder record is saved in its place so the set stays complete and visibly marked as incomplete. Refinement of a single design is a separate InvokeLLM call scoped to that design's existing code and tokens plus a natural-language instruction. UploadFile handles asset uploads referenced by a brief or design; GenerateImage is used where a design calls for AI-generated imagery rather than uploaded assets. SendEmail notifies registered users of generation completion and related events. The Design Library, Reference Manager, Export History, and Feedback Logs surfaces read from these same records rather than maintaining separate state.
Security, Compliance and Accessibility
DesignForge is an internal-use tool with built-in role-based access control governing brief creation, preset designation, and export actions. Reference scraping is limited to metadata extraction from user-supplied URLs. No external client data is processed, and no compliance certifications are claimed for this tool since it is not client-delivered. Asset uploads via UploadFile are scoped to the brief or design record they are attached to.
DesignForge is in active internal use for homepage design exploration. It reliably produces five-variant sets per brief with automatic retry and placeholder fallback for failed generations, and supports single-design refinement from natural-language prompts. No production client metrics (e.g., time saved, adoption rate, or export-to-build conversion) have been measured or disclosed at this time; those would require a controlled comparison against the prior manual workflow that has not yet been conducted.
Why This Matters
DesignForge demonstrates Gulfturn's internal capability to build structured, database-backed AI generation pipelines with per-item persistence, retry/fallback logic, and human-in-the-loop review — patterns directly transferable to client engagements involving AI-assisted content or design generation at scale. It is offered as evidence of engineering approach rather than as a case study with disclosed client outcomes.
Capabilities Demonstrated
- —LLM-based structured generation with per-item persistence
- —Retry and placeholder fallback for unreliable generation steps
- —Natural-language refinement of generated artifacts
- —Reference scraping and metadata capture
- —Role-based access control for internal tools
Technologies
InvokeLLM (claude-sonnet-5)UploadFileGenerateImageSendEmailJSX-based design token system
Disclosure
DesignForge is an internal R&D tool, not a client-delivered engagement. No external client is associated with it and no production metrics have been measured or disclosed. AI (via InvokeLLM/claude-sonnet-5) generates homepage design variants and handles refinement requests; humans author briefs and guardrails, review all generated output, initiate refinements, mark presets, and control export. Placeholder variants from failed generations are visibly flagged, not presented as real design options.
Next Step
See how Gulfturn builds AI-assisted internal platforms with human review built in
Tell us about your mission or workflow and we'll show you how we'd approach it.
Discuss a Platform