INTERFACE DESIGN SERIES
Mingg UI Design Challenge: A 6-week UI design competition where participants created one landing page per week based on a given brief.
What I gained:
- Learned from industry pros
- Built my own Framer library
- Made it to the Top 6 finalists
WEEK 4 CHALLENGE BRIEF
Prompt:
“Dear contestants, aka the people I get to ‘hire’ without paying a dime.
I don’t have the budget to hire a branding designer, and the product doesn’t have an MVP yet.
I’m looking to build a website that I can show off, use for fundraising, and start drawing attention from the community.
I already have a logo — could you suggest some fonts and color palettes that will make the site feel friendly and give off that ‘wow’ factor at first glance?
I’m not sure if this content works well. Could you suggest some improvements or alternatives for me?”
Design faster, think smarter — with your AI design partner
From wireframes to UI copy, your ideas become interfaces in seconds.
No more staring at a blank canvas. Just prompt, tweak, and go.
Optional: Illustration or looping demo showing prompt → layout → final UI
Key Features
Prompt to UI
Just describe what you need. Our AI instantly generates clean, editable UI layouts tailored to your idea.
Smart copy, built-in
Get on-brand headings, CTAs, and microcopy — no need to switch tabs or call your copywriter.
Export to Figma
Match your brand’s voice, color, or layout system without lifting a finger.
Export to Code
Need code? We’ve got that too. Generate clean HTML/CSS/React code, ready for developers.
Real-time iteration
Tweak your prompt. Add a new section. Edit content. All in seconds — with instant visual updates.
How it works
Go from an idea in your head… to a working UI in minutes.
We combine smart prompts, structured layout systems, and flexible exports to help you design — and deliver — at lightning speed.
-
Write your prompt
Tweak your prompt. Add a new section. Edit content. All in seconds — with instant visual updates. -
Generate layout, structure & content
- Auto-generate a responsive layout based on common UI patterns
- Fill in with AI-written copy: titles, descriptions, CTAs
- Instantly editable before you export
-
Customize your design
- Tweak layout directly
- Replace images, reorder sections
- Adjust tone, design intent, or use design tokens (if available)
-
Export to Figma or Code
Send to Figma with one click — fully layered, auto-layout ready
Export as production-ready code (HTML/CSS/React)
My Design Process during Chande
Brief Analysis
I start by carefully analyzing the challenge prompt to understand the expected output, constraints, and user needs.
Direction Setting
Next, I define the overall art direction — including layout structure, font pairing, color palette, and shape language that best fit the concept.
Drafting Hero Section & Layout
I sketch out the layout and begin designing the hero section to establish the tone and hierarchy for the rest of the page.
Final Design & Prototyping using Figma and Framer
Once the layout is locked in, I polish the visuals and bring everything to life with interactive prototyping in Framer and Figma.
Top Picks from the Challenge
(Please check screen size note — limited time for full responsiveness)
Week 1: Camera Landing Page
FRAMER LINK (1440PX): VIEW NOW
Week 3: Culture Theme – "Phỗng"
FRAMER LINK (1920PX): VIEW NOW
Week 6: Previous version of this portfolio
FRAMER LINK (1920PX): VIEW NOW