Skip to content

Instantly share code, notes, and snippets.

@jeshuaborges

jeshuaborges/ui-multi-prototype.md

Created December 8, 2025 20:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jeshuaborges/86eb6d990efa037feb4a67f670f35bfd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jeshuaborges/86eb6d990efa037feb4a67f670f35bfd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ui-multi-prototype.md

UI Multi Variant Prototype

Goal

Generate a set of prototypes into a single interface with a set of controls making enabling preview options.

Inputs

  • Related data sources
  • Number of variants to generate (default 5)

Primary Flow

Setup:

  • Gather Context: as much context about the task at hand.
    • Extract as much detail as possible from the source component/ui (features, interface, actions, buttons, badges)
    • What is the business goal?
    • What tools, UI libraries, css strategy are we using?
    • What are the UX patterns for the project?
    • What is entities are being used? are there common type definitions?
    • Collect project reference types, data patterns, and relevant entities for the task.
  • Enrich Context: trusted internet sources for: UX best practices, common solutions applicable to this task.
  • Generate Data:
    • Common json data set to be used by all prototypes for presentation.
    • Should be in .ts file with any helper functions required to assist presentation such as filter or format functions.
    • Note fields already available and separate fields that are additions or proposed
  • Align for excelence: Consider prompting UI or UI agents to help build prompts or explore the web for UI prompting strategies for improving our outcome. Make the results impressive.

Build:

  • Find a place to put the prototype close to existing work but not overriding any existing work
  • Create a new route page:
    • With controls for various data states
    • Ability to show or hide each prototype component
    • Placeholders for and each resulting component
  • Generate Variants: num variants, each with different prompot focusing in a different strategy or angle while addressing core requirements
    • Separate sub agents with different prompts with guidance for how to improve the UI.
    • Each agent should produce its own component.
  • When all agents complete combine all prototype components into a page so that they can all be seen togeather and evaluated.

Review:

  • Ensure pototypes pass type checks
  • Have specialized subagent review UI in browser via MCP and confirm that presentation meets expectations (retry as many times as neeted until UI agent is satisfied)

Return:

  • Url for preview
  • Relevant data sources (web sites, images, project source or docs...)
  • Key features
  • Variant list with approach and prescribed use case

Reminders

IMPORTANT:

  • Only accept the highst teir of quality, anything less is unacceptable
  • Perform all work using sub agents, concurrently where possible
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment