What this prompt does
This prompt generates a complete NFT marketplace interface specification across seven distinct screens — from discovery through minting — with framework-specific code for the most complex view: the NFT detail page with wired wallet connection and buy flow. What makes it work is the explicit anti-pattern list baked into the template. By naming the failure modes (raw transaction hash exposure, unexplained gas fees, the generic PFP aesthetic), it forces the model away from crypto-kitsch output and toward component specs and code that would actually pass a design review.
The blockchain and wallet variables aren't cosmetic. Specifying blockchain: Solana versus blockchain: Ethereum changes the fee explanation copy, the wallet options rendered in the connection modal, and the transaction confirmation UX — because finality times differ. The prompt's Industry Design Rules lock in dark-mode-dominant styling with restrained accent gradients, so the output doesn't default to neon overload, while monospace type for addresses and hashes reflects actual industry convention, not decoration.
The flow sequence — browse → collection → detail → connect → transact — mirrors how real marketplace users move, which means generated component specs and code are immediately usable, not theoretical.
When to use it
- You're building a whitelabel NFT platform and need a rapid UI spec before dev kickoff.
- You're a designer pitching a Web3 client and want a detailed, credible reference to show what "good" looks like.
- You're integrating WalletConnect or Coinbase Wallet into an existing app and need the modal and pending-state patterns generated in your specific framework.
- You're launching a drop-specific marketplace (music NFTs, sports collectibles) and need the collection and minting pages scoped to that focus.
- You're auditing a live marketplace for UX gaps and want a benchmark component spec to compare against.
Example output
For marketplace_focus: digital art, blockchain: Ethereum, wallets: MetaMask + WalletConnect, target_users: collectors aged 25-45, framework: React + wagmi:
NFT Detail — "Neon Drift #042"
--------------------------------
[Full-bleed artwork, 1:1 aspect ratio, zoom on hover]
Floor: 0.38 ETH (~$1,204) Last sale: 0.31 ETH 3d ago
Rarity rank: #188 / 10,000
Traits
Background Deep Space 4.2% of collection ●●●○○
Eyes Prism Lens 1.8% ●●●●○
[Buy Now — 0.38 ETH] [Make Offer]
Gas estimate: ~$8.40 (why?) [?] ← tooltip: "Network fee, not to seller"
On click → wagmi useContractWrite hook fires → pending modal with
animated spinner + "Waiting for MetaMask confirmation" copy →
success screen with Etherscan link labeled "View transaction" (not the raw hash).
Pro tips
- Tune
marketplace_focustightly. "Digital art" gives generic output. "1/1 generative audio-visual NFTs for independent musicians" gives copy, filter labels, and minting metadata fields that are actually scoped correctly. - Gas fee UX is the biggest trust signal. The template already flags it, but explicitly add
explain gas fees as percentage of sale priceto your prompt fill if your target users are non-crypto-native. - Request the wallet modal as a standalone component. Ask for it separately in your framework of choice — it's reusable across projects and the generated accessibility handling (focus trap, escape-key close, ARIA roles) is often better when isolated.
- Pair with a real design system. Specify
framework: React + Tailwind + shadcn/uior similar — vague "React" output drifts toward inline styles. The more constrained the stack, the more usable the generated code. - Rarity indicator glow is a spec, not a decoration. The template includes it deliberately. Ask the model to implement it as a CSS custom property tied to rarity percentile, not a hardcoded color — that way it scales across any collection.
