AI skips the alignment stage
Most AI site builders leap from a vague prompt straight to layouts, skipping style refinement and alignment. The result? Misaligned, generic designs that need heavy rework.
VisionPeak
An AI-powered web builder that starts where great design begins, with moodboards, ensuring every generated interface is aligned and high-fidelity.
RoleUX · Visual Design · Business Strategy · Prototyping · User Testing
ClientVisionPeak
Duration8 weeks
Year2025
An AI-powered web builder that starts where great design begins “with moodboards” ensuring every generated interface is aligned, high-fidelity, and ready to ship.
AI builders are fast, but they skip the most critical part of design. They leap from vague prompts to rigid layouts, producing generic looking results. VisionPeak flips the process, starting with a collaborative moodboard.
When VisionPeak was brought to me, it came wrapped in frustration. The founder was tired of relying on developers and designers to fix AI-generated outputs that lacked design depth, doubling dev time and draining budgets with wasted credits. Hence the journey of creating a moodboard-first, alignment-driven workflow that produces near-final interfaces from the start, cutting rework and delivering production-ready results faster began.
Insights & Problems
Creative control comes too late
Users can’t meaningfully guide AI before generation. That means more failed attempts, wasted credits, and slower launches.
Inspiration is scattered
Style references live in screenshots, dribbble saves, and design systems, but there’s no central, editable space to bring them together before building.
All-or-nothing regeneration
Change a single section? Most tools force you to rebuild the whole layout, causing a significant number of credits to be wasted and can cause edits on unintended parts.
User Persona
How Might We
In this phase all the ideas from research, to the CEO, PM, CTO and the marketing team are brought to the table in an in-house brainstorming session to get the best ideas out through some How Might We questions
Design in Action
We knew from the start that VisionPeak wasn’t just another AI site builder, it had to feel like a creative partner that understood your style before writing a single line of code. Every project needed to start with alignment, not guesswork, so we designed the journey to guide users from their very first prompt into a fully aligned, production-ready interface.
Moodboard-to-Spec Workflow
From a simple prompt like “minimalist dashboard for a healthcare startup”, VisionPeak instantly curates themed moodboards, layouts, components, fonts, and color palettes, organized by style and use case. Users can explore stylistic variations (dark mode, brutalism, minimalism) and assemble a “Frankenstein” canvas by identifying the best elements into a cohesive visual spec.
Highlight & Influence
Users can select specific parts of any design, a header, a font, a color scheme and rate how much they like it. VisionPeak uses these ratings and highlights to learn the user’s tastes, influencing future moodboards and final designs so each generation feels more personal and aligned.
From Spec to Editable UI
Once the visual spec is ready, the AI generates a complete interface that reflects the curated moodboard, not just the prompt, resulting in a first draft much closer to the final product. With a lightweight, Figma-like editor, users can tweak sections, regenerate only what needs changing, and save multiple design versions for side-by-side comparison.
Figma-to-Code Integration
Designers can upload their Figma files directly into VisionPeak, which converts the design into a clean, code-exportable format. From there, they can tweak the build using the design tool or AI-assisted edits, making the jump from concept to live, production-ready product faster and easier than ever.
Learnings & Impact
1
Clarity before complexity wins
Working on VisionPeak reinforced that the earliest design decisions, style alignment, tone, and visual direction, have the biggest downstream effect. By placing these up front, I saw firsthand how it reduced user frustration and technical rework.
2
Designing for both novices and experts is possible
I had to balance the needs of non-designers, who needed guidance and guardrails, with professional designers, who wanted flexibility and control. This required carefully designing features that could scale in complexity without overwhelming first-time users.
3
AI isn’t a magic button, it’s a collaborator
This project deepened my understanding of how to design AI-assisted experiences. It’s not about replacing creativity, but giving users tools to shape AI’s output in ways that feel intentional and personal.
AI that designs the moodboard first and the page second.
Most AI page builders generate generic interfaces because they start from prompts. Anchoring generation to a moodboard the user already approves keeps the output coherent and on-brand. The bet was that taste, not text, is the right input.
If it shipped, the things to watch:
- Share of generated pages exported unchanged versus heavily edited.
- Designer NPS after a thirty-minute session.
- Returning users in week two. Does the output stay good when the brand evolves.
Five designer-led tests said the interfaces felt distinct enough to use as a real starting point. The product did not reach launch. The thinking is documented here.
