Skip to main content
</>Vibecode Bible

Customizing Your App

The /buidl pipeline gives you a working app. Now make it yours.

#Frontend quality matters

The difference between an app that gets used and an app that gets ignored is often how it looks and feels. Users judge apps in seconds. If it looks like a tutorial project, it feels like a tutorial project.

Your competition is real DeFi apps. Your users have Uniswap and MotoSwap open in other tabs. Build something that looks like it belongs next to them.

The good news: Claude can build beautiful interfaces. You just have to ask for it.

#The dark crypto aesthetic

OPNet apps have a visual language. Dark backgrounds. Orange accents (OPNet orange: #F7931A). Clean typography. Glassmorphism cards. Smooth transitions.

When you're prompting for the frontend, say what you want:

text
The UI should look like a premium DeFi app. Dark background (#0a0a0a or similar),
OPNet orange (#F7931A) as the primary accent color, glassmorphism cards with subtle
borders, smooth transitions on all interactive elements. Make it look production-ready.

Or more specifically:

text
Style the dashboard like a real DeFi app:
- Very dark background, almost black
- Glass cards with a subtle glow on hover
- Orange gradient on the primary action buttons
- Numbers and stats should look important — large, clear, with proper formatting
- Smooth fade transitions between states

#Modern CSS techniques to ask for

These are the patterns that separate professional-looking apps from tutorial demos:

Glassmorphism:

text
Cards should use glassmorphism — semi-transparent background with backdrop blur,
subtle light border, slight glow

Gradients:

text
Use an orange gradient (from #F7931A to #E8820C) on primary buttons and key stats

Animations and transitions:

text
All state changes should animate smoothly — 200ms ease transitions on hover states,
fade-in for loaded content, subtle scale on button press

Loading states:

text
Every async operation needs a proper loading state — skeleton screens for initial
data load, spinner on buttons while transactions are pending, disable inputs during
processing

Micro-interactions:

text
Add satisfying micro-interactions: button press feedback, success animations when
transactions confirm, smooth number counting when stats update

#Mobile-first

More than half of your users will be on mobile. Build for mobile first, then scale up to desktop.

text
Design mobile-first. The app should be fully usable on a phone screen (375px wide).
Tablet and desktop should be comfortable but mobile is the primary target.

Specific mobile things to ask for:

  • Touch targets at least 44px tall
  • No hover-only interactions (mobile has no hover)
  • Navigation that works with thumbs
  • Text that's readable without zooming

#Colors, logo, and branding

Your colors:

text
Use these colors throughout the app:
- Background: #0d0d0d
- Surface: #1a1a1a
- Primary: #F7931A (OPNet orange)
- Text: #ffffff
- Muted text: #888888
- Border: rgba(255,255,255,0.1)

Your logo: If you have a logo file, add it to the project and tell Claude:

text
Replace the placeholder logo with the image at /public/logo.png

Your token:

text
Style the dashboard like a real DeFi app:
- Very dark background, almost black
- Glass cards with a subtle glow on hover
- Orange gradient on the primary action buttons
- Numbers and stats should look important — large, clear, with proper formatting
- Smooth fade transitions between states
0

#Wallet connection

The wallet connection flow is the first impression. Make it good.

text
The connect wallet button should be prominent but not aggressive. When clicked, it
opens a clean modal with OPWallet as the primary option. After connecting, show the
wallet address (shortened) and BTC balance in the header.

Add disconnect and network switching:

text
Add a wallet menu when the user clicks their address — show full address with copy
button, current network, and disconnect option

#Pages and navigation

Add pages by describing what they should contain:

text
Add a "Portfolio" page showing:
- Total value of user's staked tokens
- Claimable rewards with a claim button
- Transaction history for this wallet
text
Add an "Info" page with:
- Total tokens staked across all users
- Current APY
- Contract address with link to OPNet explorer
- Token contract address

#Fun stuff that makes apps feel alive

Real-time updates:

text
All balance and stats displays should update automatically every 30 seconds.
Show a subtle pulse animation when data refreshes.

Transaction feedback:

text
When a transaction is submitted, show a toast notification with "Transaction submitted"
and a link to the OPNet explorer. When it confirms, show "Transaction confirmed" in green.

Empty states:

text
When a user hasn't staked anything yet, show an encouraging empty state with a call to
action button instead of just blank space.

Number formatting:

text
Format all numbers properly: 1,234,567.89 for large numbers, abbreviate to 1.2M or 4.5K
where space is tight. Show token amounts with the right decimal places.

#The one-liner test

Before you ship, ask yourself: "If someone saw a screenshot of this, would they think it's a real app or a demo?"

If the answer isn't immediately "real app" — ask Claude to make it more polished. Be specific about what feels unfinished.

That's the bar.

Ready to test your knowledge?

20 questions covering everything from vibecoding basics to shipping a complete dApp.

Take the Quiz