What this prompt does
This prompt asks the AI to design a blockchain explorer and analytics interface across seven views: a network overview dashboard, transaction detail, block detail, address/account pages, token analytics, advanced analytics, and a framework-specific implementation section. It anchors the design to your product through [product_name], [blockchain_network], [target_users], and [data_depth], so the explorer fits Ethereum-plus-L2s and the people debugging it rather than a generic chain.
The [target_users] variable shapes which views get priority — developers debugging transactions need decoded input data and internal traces, while traders need whale tracking and token charts. And [framework] (defaulting to Next.js + Tailwind + Recharts + ethers.js) pushes the AI to reason about the genuinely hard parts: WebSocket block streaming, type-detecting search, safe BigInt and wei-to-ETH formatting, and virtualized tables for blocks with thousands of transactions.
When to use it
- You're building a block explorer for a web3 project and need every view mapped before coding.
- You want transaction decoding, internal traces, and event logs designed up front.
- You're targeting a specific audience via
[target_users]and need the views weighted accordingly. - You need search that auto-detects address vs. tx hash vs. block number specced clearly.
- You're handling large numbers and big tables and want BigInt formatting and virtualization addressed.
Example output
Expect a structured design document: each view broken into named components — a network dashboard with live block and transaction feeds and a gas tracker, a transaction page with status badges and decoded function calls, an address page with balance, token holdings, and a contract source viewer. The closing [framework] section reads as an implementation checklist covering WebSocket updates, instant typed search, BigInt formatting, hex toggles, table virtualization, and a default dark theme — a spec to build against, not finished code.
Pro tips
- Set
[blockchain_network]precisely — EVM chains, L2s, and non-EVM networks differ in fields like uncle blocks and EIP-1559 fees. - Use
[target_users]to prioritize: a debugging-developer audience justifies deep trace views a trader audience wouldn't read. - Match
[data_depth]to what your node actually exposes; promising internal traces you can't index sets a false spec. - Swap
[framework]if you're not on ethers.js or Recharts so the BigInt and charting guidance stays accurate. - The decoded-input and internal-transaction views depend on verified-contract data — confirm your data source before designing them.
- Re-prompt view by view ("expand the Address/Account page to wireframe detail") to go deeper where users spend the most time.
