How I Build Apps That Don’t Look Vibecoded

Reference: Article by Frederik (@froessell), Senior Product Designer with 3 apps in App Store. 5,076 likes, 13,119 bookmarks, 526K impressions.

The 7-Step AI App Design Workflow

1. Idea → PRD

Use Claude to narrow scope and cut features to shippable MVP
Focus on ruthless feature prioritization early

2. First Prototype

Build fast with Claude Code, Vibecodeapp, or Rork
Validate functionality, not aesthetics

3. Screen Inventory

List all screens as a design checklist
Creates a bounded scope for visual work

4. Design Exploration

Feed screen list to Variant AI, Aura.build, v0, Superdesign
Iterate on visual styles until one resonates
This is where taste and iteration matter most

5. Into Figma

Export using html.to.design plugin
Refine spacing, consistency, and polish

6. Back to Code

Feed design back to app builder or Cursor
Implementation follows established design direction

7. Before Downloading

Integrate RevenueCat, onboarding, paywall
Build backend infrastructure first
Don’t ship half-baked monetization

Core Insight

“AI builds fast. That’s the easy part. The hard part is making it look like someone cared. That still takes taste, iteration, and knowing when to stop experimenting and just ship.”

TL;DR

“Just use Claude Code. It’ll get you 90% of the way there.”

The founder’s note on image generation + Figma workflow: “Image generation then text and sizing and masks get added in Figma” — aligns with using Grok Imagine as a starting point for visual concepts.

Connections to Ray Data Co

Skill Alignment

Our build-project skill covers steps 1–2 (PRD → implementation)
We go straight from PRD to code without the design exploration phase (step 4)
Gap: no formal design iteration loop for AI-built features

Applied to Current Projects

Squarely App

Wooden aesthetic is strong but not systematic
GameView could benefit from design system extraction
Could apply step 4 exploration to polish UI consistency

Data Dots Product

Visual design pipeline opportunity: could prototype exploration step
Validates Variant AI / v0 integration points

Anthropic Growth Marketing

Figma integration patterns here match the design-to-code handoff
html.to.design plugin workflow relevant to marketing assets

Actionable Items

Evaluate design exploration tools (v0, Aura.build, Variant AI) for build-project workflow
Squarely UI polish: Extract game UI components into light design system before next round
Pipeline documentation: Formalize Grok Imagine → Figma → Code workflow for visual-first features
Skill enhancement: Add optional design iteration loop to build-project for high-stakes UI work