Crypto Trading Dashboard Builder

What this prompt does

This prompt generates a complete, professional-grade cryptocurrency trading dashboard by encoding the actual design conventions that experienced traders expect — not what a general-purpose UI designer might assume. The template bakes in TradingView's proven spatial hierarchy: chart area dominant, order book as sidebar, trade panel docked. That layout decision alone eliminates the most common mistake AI makes when generating trading UIs (putting the chart below the fold or treating it as decorative).

The color semantics are explicitly locked: green means buy/up, red means sell/down, nothing else. This sounds obvious until you see an AI use green for "success" toast notifications next to a red-trending price — which breaks trader intuition instantly. The monospace-for-numbers rule is equally load-bearing. Tabular figures prevent order book columns from jittering as digits change, which is a real usability issue under live data.

The framework code output is scoped specifically to the order book with WebSocket simulation — the hardest component to wire correctly because it requires diffing bid/ask levels in real time without full re-renders. That specificity makes the generated code actually runnable, not a scaffold you have to rewrite.

When to use it

• Building a white-label exchange interface for a DeFi protocol or CEX MVP
• Prototyping a paper-trading tool for a crypto education platform
• Designing an internal dashboard for a trading desk or market-making team
• Shipping a mobile-first trading app component library where each panel needs to be individually auditable
• Generating reference UI for a developer integrating a third-party exchange API (Binance, Kraken, Coinbase Advanced) who needs visual scaffolding fast
• Wireframing a hackathon project where speed to a professional-looking demo matters

Example output

For platform_type: "retail spot exchange", features: "limit orders, market orders, stop-limit", data_sources: "Binance WebSocket API", framework: "React + Recharts":

// OrderBook.tsx — WebSocket simulation with bid/ask diffing
const useOrderBook = (pair: string) => {
  const [book, setBook] = useState<OrderBook>({ bids: [], asks: [] });

  useEffect(() => {
    const ws = new WebSocket(`wss://stream.binance.com/ws/${pair}@depth20`);
    ws.onmessage = (e) => {
      const { bids, asks } = JSON.parse(e.data);
      setBook({ bids: bids.slice(0, 15), asks: asks.slice(0, 15) });
    };
    return () => ws.close();
  }, [pair]);

  const spread = (parseFloat(book.asks[0]?.[0]) - parseFloat(book.bids[0]?.[0])).toFixed(2);
  return { ...book, spread };
};

The prompt also produces candlestick chart config, a market ticker strip, and a portfolio P&L table as separate generated sections you can import individually.

Pro tips

• Set platform_type as specifically as possible ("institutional OTC desk" vs. "retail futures exchange") — it shifts the generated leverage UI, order size defaults, and risk warning placement significantly.
• If your data_sources variable includes a real exchange WebSocket URL (Binance, OKX), the AI will generate accurate stream endpoint paths and correct message parsing logic — much more useful than leaving it generic.
• Add leverage: up to 20x inside features only if your platform actually supports it. The template has a leverage selector gated on this, so omitting it cleanly removes that component rather than leaving a broken stub.
• The anti-pattern list in the template ("no cartoon aesthetics even for meme coins") is there because AI models default to playful styling when they detect words like DOGE or PEPE in your features. Keeping that rule in the prompt overrides that bias.
• Pair this prompt with your design system variables (background hex, font stack) appended after the template. The AI will substitute them consistently across all six generated components rather than using the defaults.