We designed and shipped this entire portfolio using AI-assisted coding — no traditional dev handoff, no Figma-to-code gap. Every component, animation, and interaction was built through conversational prompting with Claude Code.
Hero image — screenshot of the portfolio homepage or a terminal session with Claude Code
Most designer portfolios go one of two ways: a polished Framer or Webflow site with limited interactivity, or a developer-built site that takes weeks to ship. We wanted a third option — a production-grade Next.js site with custom animations and interactions, built at the speed of thought.
The constraint wasn't skill. We know how to use Figma, and we know how to write React. The constraint was time and iteration speed. We wanted to go from idea to deployed site in days, not weeks, and we wanted to be able to change anything — layout, animation, typography — by describing what we wanted, not by hunting through CSS files.
Built with
Claude Code + Next.js
Design tool
None — designed in code
Time to ship
Days, not weeks
Vibe coding isn't “tell the AI to build a website.” It's a design process where the medium is conversation instead of pixels. We described layout intent, interaction behaviour, and visual hierarchy in natural language, then refined the output through iterative feedback — the same loop as any design process, just faster.
The workflow looked like this: start with a structural description (“a sticky card stack that reveals each project as you scroll”), review what Claude Code produced, then refine (“the parallax feels too aggressive, reduce the scale transform”). Each cycle took seconds instead of the minutes it would take to adjust in Figma and rebuild.
Describe the intent
We started each component by describing what it should do and feel like, not how to implement it. "A section that shows selected work as stacked cards with a sticky scroll effect, each card sliding up and scaling in as you reach it." The specificity was in the interaction, not the code.
Review and steer
Claude Code produced working components on the first pass. We'd run the dev server, see the result, and course-correct: "The card gap is too tight on mobile," "Add a gradient border to the CTA button," "The fade-in triggers too late." Each fix was a sentence, not a diff.
Compose and polish
Once individual components worked, we composed them into pages and refined the overall rhythm. Spacing, scroll pacing, color token consistency — the same polish pass you'd do in any design tool, but applied to live code.
This isn't a template. Every component was prompted, reviewed, and refined to match a specific design vision. Here's what we built and why each piece required more than a generic prompt.
Sticky card stack
Scroll-driven layoutThe selected work section uses scroll-linked transforms — each card has its own parallax offset, scale, and opacity curve tied to its scroll position. Getting the stacking order, sticky positioning, and animation timing to feel natural required multiple rounds of tuning the transform ranges.
Responsive sidebar navigation
Desktop/mobile parityA fixed sidebar on desktop that collapses into a drawer on mobile, with smooth section highlighting as you scroll. The scroll-spy logic, intersection observers, and drawer animation all needed to work together without layout shifts.
Case study template system
Consistent but flexibleEach case study follows the same visual rhythm (section labels, headings, body text, media, callouts) but the content varies. We built reusable patterns — SectionLabel, MediaGrid, Callout — that keep the layout consistent while allowing each story to have its own structure.
Animated gradient text and borders
Subtle motion designThe CTA buttons use an animated gradient border with mask compositing. The hero text uses a gradient fill. These are small details, but they required precise CSS — mask-composite, background-size animation, and careful color token integration.
Canvas reveal and background effects
Performance-sensitive decorationBackground ripple effects, aurora gradients, and canvas-based reveal animations run continuously without impacting scroll performance. Balancing visual richness with 60fps required careful use of GPU-accelerated properties and lazy initialisation.
Sticky card stack — scroll interaction
Sidebar navigation — desktop and mobile
Case study layout — section rhythm
Animated gradient borders — detail shot
Where AI excelled
Scaffolding components from interaction descriptions
Translating design intent into responsive layouts
Generating animation configs (spring tension, scroll offsets)
Consistent use of design tokens across components
Building reusable patterns from a single example
Where we steered
Visual rhythm and spacing — AI defaults are functional, not beautiful
Animation pacing — technically correct but emotionally flat until tuned
Typography hierarchy — needed manual eye to get the weight/size ratios right
Color and contrast decisions — AI followed tokens but we set the palette
Content voice and copywriting — every word was written or edited by us
The biggest misconception about vibe coding: people think you're handing off creative decisions to AI. In practice, AI handles the translation from intent to code. The design decisions — what to build, how it should feel, what to prioritise — those are still entirely ours. Vibe coding doesn't replace design thinking. It removes the bottleneck between having an idea and seeing it live.
Next.js 16
Framework
React 19
UI
Framer Motion
Animations
Tailwind 4
Styling
TypeScript
Type safety
Claude Code
AI coding
Vercel
Deployment
Geist
Typography
Designers who can vibe code ship faster. Not because AI writes perfect code, but because the feedback loop between idea and implementation collapses from hours to seconds. We could try ten layout variations in the time it would take to mock up one in Figma.
The handoff problem disappears. There was no handoff. The design artifact and the production artifact are the same thing. No redlines, no “it looks different in the browser,” no interpretation gap. What we designed is exactly what shipped.
Taste becomes the differentiator. When anyone can generate functional code from a prompt, the competitive advantage shifts to knowing what to build and how it should feel. Design judgment — spacing, rhythm, hierarchy, interaction quality — is what separates a vibe-coded site that feels generic from one that feels crafted.
I collaborate closely with founders and teams to ship products that truly matter.
“Mahnoor is one of the most thoughtful designers I've worked with. She doesn't just make things look good. She digs into the problem, talks to users, and designs solutions that actually move metrics. Her work on our AI platform was exceptional.”
Team Lead
Beam.ai