Skip to main content
Open HowWorks

Gemini 3.1 Pro

Use a diagram, sketch or creative brief to work out a clearer explanation.

Describe what you want to make, or drop a reference
Try a prompt:
Gemini 3.1 Pro · 2026-10-21 · same reply · Q1/3

How should I prevent duplicate animation loops and input listeners when restarting a small HTML canvas brick-breaker game? Give a minimal lifecycle pattern, list the game state that must reset, and provide four checks that expose restart bugs. Do not produce a complete game or claim the pattern has been run.

Minimal Lifecycle Pattern (Recommendation; untested): Attach DOM/canvas input listeners once during mount or initial setup, never inside the restart routine. For the game loop, track a single handle: let animId = null. On restart, immediately invoke cancelAnimationFrame(animId) before zeroing state and invoking animId = requestAnimationFrame(loop). On unmount, call cancelAnimationFrame(animId) and remove the listeners.

View source
Gemini 3.1 Pro · 2026-10-21 · same reply · Q2/3

How should a small React team choose between BlockNote and Tiptap for a Notion-style first version with paragraphs, headings, lists and reliable save-and-reload? Give a conditional initial choice, separate editor functionality from storage and permissions we must implement, and identify what must be verified before adding collaboration or comments.

Separation of Concerns: Editor Responsibility: Caret positioning, block manipulation, shortcut handling, document rendering, and JSON parsing/serialization. Application Responsibility: Database persistence, autosave debouncing, schema validation, user authentication, and document authorization (tenant/role access controls).

View source
Gemini 3.1 Pro · 2026-10-21 · same reply · Q3/3

For an online-first issue tracker with occasional disconnects and concurrent edits, when should a small team use server-first optimistic updates rather than local-first sync? Explain retry idempotency, conflict handling, reload recovery and server-side authorization. Identify which scaling problems in Linear's August 2026 delta-sync article do not, by themselves, justify copying its architecture.

When to Use Server-First Optimistic Updates: Use server-first optimistic updates when the tracker is online-first, mutations are discrete relational actions (updating status, priority, or assignee), and strict server-side business validation is required.

View source

How it works

Try it now
  1. 01

    Say what you want

    A sentence or two is enough.

  2. 02

    Work with HowWorks Agent

    Describe the result you want. The Agent works with the tools you choose.

  3. 03

    Make it

    Start creating, then keep working with HowWorks.

Gemini 3.1 Pro at a glance

Good at
Make complex ideas clear with visual explanations and creative prototypes.
Max output
65,536 tokens
Attachments
Images 14 MB · PDF 14 MB

About

Start with the idea that is hard to explain and who needs to understand it. Bring a sketch, screenshot or document, then ask Gemini 3.1 Pro to describe relationships, find confusing parts and propose a clearer visual structure. For a prototype, define the user goal and the smallest interaction that would demonstrate it. Review the explanation against the source and the prototype plan against an actual user task. Gemini 3.1 Pro is the Agent conversation model here; a new image or runnable artifact depends on a separate available tool.

Questions

Can I ask about a screenshot or diagram?

The catalog includes image inputs for Gemini 3.1 Pro. Attach the image and name the part you want explained. For small text or dense charts, add a clearer crop or underlying data and verify extracted values.

How do I brief a visual explanation?

Say who it is for and which relationship should become clear: a sequence, comparison, hierarchy or cause and effect. Provide facts that must appear and ask for a structure before decoration.

Will a prototype request produce a runnable app?

A written interaction plan or code suggestion is not a running app. Define the deliverable and use a suitable available tool when implementation is needed. Review the result through the intended user task.

Is Gemini 3.1 Pro the image-generation model?

No. It is the Agent conversation model. An image tool has a separate model and parameters, even when the Agent uses your visual brief to call it.