Contra Labs Network · Product Designer

Tools & Workflow — Elux Space

Reference sheet + 1-minute video script for the application
Buat mba Dewi: ini script + referensi buat video submission (max 1 menit) atas nama Elux Space. Bagian “1-Minute Video Script” tinggal dibaca pas record. Sisanya (tools, workflow, 3 poin) referensi kalau butuh improvisasi. Semua tools di sini sesuai yang kita pakai sehari-hari — jadi natural aja ceritainnya.

▶ 1-Minute Video Script

~55–60 seconds at a natural pace. Speak to camera. Optional: share your screen briefly to show a tool or two.

≈ 155 words · ~1 min

“Hi, I’m a product designer working under Elux Space. My process is AI-native — I use AI to speed up production and iteration, so I can spend more of my time on craft and judgment.

I start research, planning, and brainstorming in Claude, and use Perplexity to pull specific references and sites that back it up. Then I gather inspiration and study patterns across Mobbin, Land-book, Dribbble, and Awwwards, and actually use the apps myself before I build — that’s where I learn what makes an interface intuitive, from information architecture down to micro-interactions.

Once the plan is set in Claude, I build — generating with Opencode or straight in Claude Code, and using Figma with Figma Make for visual exploration and interaction detail. For assets and mockups I use Seedance, OpenArt, and GPT Image. I document everything in GitHub and Notion, controlled through Claude’s MCP.

I’m most comfortable in fast, experimental environments — that’s exactly how I work every day.”

1 The Tool Stack

Grouped by where each tool sits in the process. AI runs through the whole thing — its job is to accelerate production and iteration.

Research & Planning

  • Claude — research, planning, brainstorming; often executes UI/builds directly
  • Perplexity — reference hunting & specific sites to support Claude’s research

Inspiration, Pattern Study & UX Benchmarking

  • Mobbin — find the right app category, study real UI/UX, and use the apps first-hand before building
  • Land-book — landing-page & layout inspiration
  • Dribbble — visual direction & component ideas
  • Awwwards — high-craft interaction & motion benchmarks
  • Behance · Godly — broader visual references

Design & Build

  • Claude Code — direct UI/product build
  • Opencode — generate the product from the plan
  • Figma + Figma Make — manual visual exploration & interaction detail

Assets & Mockups

  • Seedance · OpenArt · GPT Image — generate assets and mockups

Documentation & Version Control

  • GitHub — save and version repos
  • Notion — project documentation, controlled via Claude’s MCP

2 The Workflow

Research first, then let AI accelerate the build — refining by hand where craft matters.

1

Research & brainstorm

Explore the problem, users, and direction in Claude; validate and enrich with specific references from Perplexity.

ClaudePerplexity
2

Gather inspiration & study real apps

Pull visual direction and interaction benchmarks from Mobbin, Land-book, Dribbble, and Awwwards — then find the matching app category, break down its UI/UX, and try the apps directly before designing anything.

MobbinLand-bookDribbbleAwwwards
3

Plan

Structure the plan and specs in Claude so the build has a clear blueprint.

Claude
4

Build & explore

Generate with Opencode or build straight in Claude Code; use Figma + Figma Make for visual exploration and interaction detail.

OpencodeClaude CodeFigma Make
5

Assets & mockups

Generate supporting visuals and mockups with Seedance, OpenArt, and GPT Image.

SeedanceOpenArtGPT Image
6

Document & version

Save repos in GitHub and document projects in Notion — managed through Claude’s MCP.

GitHubNotion

3 How This Proves Contra’s 3 Points

Use these if you want to reinforce any point on camera.

Deep understanding of what makes interfaces intuitive, polished, and well-crafted — from IA to micro-interactions
Benchmarking high-craft work on Mobbin, Dribbble, and Awwwards — and using real apps first-hand before building — trains judgment on IA, hierarchy, and micro-interactions. Figma + Figma Make is where those interaction details get refined by hand.
Ability to articulate design and UX feedback clearly and constructively
Research and planning in Claude, plus documenting decisions in Notion, means every design choice comes with a stated why — feedback and rationale are structured, not vague.
Comfort working in fast-paced, experimental environments (AI or design tools a plus)
The entire stack is AI-native — Claude, Opencode, Figma Make, generative asset tools — built for rapid iteration. Working fast and experimenting is the daily default.

✓ Recording Tips

  • Keep it under 60 seconds — trim the assets sentence first if you run long.
  • Talk naturally; the script is a guide, not a teleprompter to read word-for-word.
  • Optional: screen-share Mobbin or a Figma file for ~5 seconds to make it concrete.
  • Good light, camera at eye level, quiet room. One clean take beats a perfect script.