← 一覧へ戻る ・ GitHubで開く ・ 元ポスト

How I Build Apps That Don't Look Vibecoded

2026-02-16 ・ ✌︎ frederik ✌︎ (@froessell) ・ 🎨 デザイン

How I Build Apps That Don't Look Vibecoded

**投稿者:** ✌︎ frederik ✌︎ (@froessell)

**投稿日時:** 2026-02-16 19:09 JST

**URL:** https://x.com/froessell/status/2023339023381467556

**エンゲージメント:** 40返信 / 157リポスト / 2,967いいね / 8,009ブックマーク / 249,809表示

**カテゴリ:** 🎨 デザイン

**有益度:** ⭐⭐⭐ HIGH

---

概要

https://t.co/sDfRGS2KFe

X Article形式の長文投稿。Vibe Codingで作ったアプリのデザインを改善するワークフローを解説。

---

まとめ

デザイナーのfrederikが、AI（主にClaude Code）で高速にアプリを作りつつ、「Vibe Coded感」を消して本格的なプロダクトに仕上げるための7ステップワークフローを公開。

**核心メッセージ:** 「AIは速く作れる。それは簡単な部分。難しいのは"誰かが気を配った"ように見せること。それにはtaste（審美眼）、反復、そしていつ実験をやめてshipするかを知ることが必要。」

**7ステップ:**

1. **Idea to PRD** — Claudeと対話してMVPスコープを絞り込む

2. **First Prototype** — Claude Code / Vibecodeapp / Rorkでプロトタイプ生成。機能とフローだけ確認

3. **Screen Inventory** — 全画面とユーザーフローのチェックリスト作成

4. **Design Exploration** — Variant AI、Aura.build、v0、Superdesignなどで複数スタイルを試す

5. **Into Figma** — html.to.designプラグインでFigmaにエクスポートし、スペーシング・一貫性を手動調整

6. **Back to Code** — デザインをアプリビルダーまたはCursorに戻す

7. **Before Downloading** — RevenueCat、オンボーディング、ペイウォール、バックエンドを統合

**活用ポイント:**

---

X Article 本文

You can spot a vibecoded app from a mile away.

I've made a few of those myself. Only launched a few because I keep getting sidetracked by tweaking the design and branding. It's probably the designer in me, but if I publish something I'd like it to look nice otherwise I won't use it myself.

Taste is subjective and AI tools can build anything in no time, but spend 10 minutes browsing popular apps in the app store and I bet you won't find an app that looks like a MySpace page from the early 00's. Who wants to use a calorie tracking app in a brutalist design style? It's a fun idea, but I doubt it's useable for more than 5 minutes.

AI can make beautiful designs, but it needs help and proper guidance. I do too. Give me a blank Figma file and tell me to make something awesome and I'd create generic designs too.

There are many factors to a successful app besides good design, but I'm a designer, so let's focus on that.

Every time I start a new app project I slowly fine tune my design process and have landed on a workflow that works for me.

Get your wallets out and pay attention because it involves a few (too many) subscriptions. Just a note: I'm switching between tools all the time, buying and cancelling subscriptions and taking advantage of free tiers whenever possible because I'm still tweaking and testing my process and I sadly don't have an unlimited budget (wife keeps saying no to more subscriptions).

But TL;DR: Just use Claude Code. It'll get you 90% of the way there.

**Step 1: Idea to PRD**

Get an idea, talk to an LLM to narrow the scope to a quick MVP. I use Claude for this. Describe what I want, let it poke holes, cut features until it's something I can actually ship.

The output is a simple PRD. Nothing fancy. Just enough to keep me focused.

**Step 2: First Prototype**

Feed the PRD to Claude Code, Vibecodeapp, or Rork. Depends on the project and my mood.

After generation, I check functionality and flows. Does it work? Does the navigation make sense? I'm not looking at design yet. Just: does this thing do what it's supposed to do?

**Step 3: Screen Inventory**

Once a rough MVP is working, I have the app generate a list of all screens and functionality. This becomes my checklist for the design phase.

**Step 4: Design Exploration**

This is where it gets fun. I feed that screen list to Variant AI, Aura.build, v0, Superdesign, and try random styles until something clicks.

Sometimes that thing that clicks is just a random pin or post on Dribbble that made me go "could be fun to make my app in this style." and I ask one of these design tools to try out a style.

When I design for myself I default to simple and minimalistic with a focus on typography. I have a background in editorial design. But I sometimes try to venture into other styles. Mascot-heavy apps with a playful aesthetic. Something bold and experimental.

These experiments more often than not fail and I pivot back to my default style just to get the project moving again or create something I know works. That's fine. The point is to try.

**Step 5: Into Figma**

Export the design to Figma using the html.to.design chrome plugin or native import if available.

This is where I fiddle. Adjust spacing, fix inconsistencies, make it feel like mine. It's also a lot quicker and cheaper than keep telling AI to "please try another font and make the spacing better" over and over again.

**Step 6: Back to Code**

Feed the design back to the app builder, or download the code and open it in Cursor. Cursor is cheaper for experimentation when I'm not 100% sure what I'm looking for.

**Step 7: Before Downloading**

Before I pull the code out, I make sure to have the app builder integrate RevenueCat, onboarding flow, paywall, and backend. I don't want to mess with that myself later.

**The Point**

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.

I'm still figuring it out. But at least my apps don't look vibecoded anymore.

---

関連リンク