Skip to content

Design a prompt playground (frontend)

Design a prompt playground: pick a model, set its parameters, write a prompt, run it, and save the setup as a preset to share and load later.

System designFrontend and full stackAI systemsSenior

What to work through

Work through a prompt playground as a spoken system design interview. Start by clarifying the scope, sketch a working design and explain the trade-offs behind your choices.

  • Pick a model and set its parameters
  • Write a system prompt and messages, run them and watch the output stream in
  • Save the setup as a preset, then load, update and share it
  • Stop a run while it is still streaming
  • Compare runs of different setups side by side

Constraints to discuss

  • A change to any control answers within 200 milliseconds
  • A run can be repeated: the exact setup it used is kept with it
  • Unsaved changes are never lost without a warning
  • Provider keys never reach the browser
Need a starting point?

Watch for these common gaps as you prepare:

  • Each control keeping its own value, so a preset load or a run misses some
  • A run that reads the controls while the person is still editing
  • Loading a preset without checking it against the chosen model's limits
  • Last save wins on a shared preset
  • Provider keys sent to the browser
  • Waiting to be asked about timeouts, partial outputs and retries
Read: Frontend system design interview questions, and who asks them

Why this question is in the collection

These sources connect the problem to company interview reports or preparation guides. They do not guarantee what a company will ask you.

Your next question

AI systemsDesign a ChatGPT-style chat (frontend)Search and autocompleteDesign an autocomplete search box (frontend)CollaborationDesign a calendar (frontend)Messaging and notificationsDesign a chat app (frontend)
Browse the collection
01

Pick a question

Read the brief and choose what you want to work on.

02

Talk it through

Explain your thinking. Respond to follow-ups. Draw when a design needs it.

03

Find your next improvement

Use the feedback from your interview to decide what to practice next.