98.css Brings Windows 98 UI to AI Demos

Joaquin Rao — Fri, 24 Jul 2026 06:25:40 +0000

98.css delivers the full Windows 98 visual language—title bars, buttons, scrollbars, and status bars—through a single CSS file. A Hacker News thread on the project reached 404 points and 91 comments, with developers noting its utility for quick retro interfaces.

What It Is and How It Works

The library applies classes that mirror 1990s Windows controls. Add the stylesheet, then wrap elements in containers such as .window, .title-bar, and .status-bar. No JavaScript is required for the base styles.

It targets modern browsers while reproducing exact pixel details from the original OS, including the Chicago font and 3D button bevels.

Key Specs from the Project

Single CSS file under 20 KB gzipped
Zero dependencies
Works with any framework or plain HTML
Status bar component documented at the linked section of the demo site

How to Try It

Install via CDN or npm:

<link rel="stylesheet" href="https://unpkg.com/98.css">

Basic window example:

<div class="window">
  <div class="title-bar">
    <div class="title-bar-text">Model Output</div>
  </div>
  <div class="window-body">
    <p>Generated text appears here.</p>
  </div>
</div>

The official demo at jdan.github.io/98.css shows every component live.

Pros and Cons

Pros
- Instant nostalgic styling for demos
- Extremely lightweight
- No build step needed
Cons
- Limited to one visual theme
- Accessibility requires extra work
- Not suitable for production SaaS interfaces

Alternatives and Comparisons

Library	Size	Theme Flexibility	JS Required	Best For
98.css	<20 KB	Fixed	No	Quick retro AI demos
XP.css	~25 KB	Fixed	No	Windows XP look
Tailwind	Variable	High	Optional	Modern responsive UIs
Bootstrap 5	~60 KB	High	Yes	Standard admin panels

Early HN comments noted that 98.css wins when the goal is a self-contained local tool rather than a polished product UI.

Who Should Use This

AI developers building local inference demos, ComfyUI-style nodes, or offline playgrounds benefit most. Skip it for customer-facing products or teams that need WCAG compliance without extra effort.

Bottom Line / Verdict

98.css gives AI practitioners a fast way to ship recognizable retro interfaces for local tools without custom design work.

The library remains a niche but effective option for anyone shipping side projects or internal prototypes that reference 1990s computing aesthetics.

Nano Banana: A Guide to Its Name, Origins, and Image Model

Joaquin Rao — Thu, 02 Apr 2026 22:25:47 +0000

Nano Banana got its name when Google product manager Naina Raisinghani combined two personal nicknames for an anonymous LMArena evaluation. The original model is Google DeepMind's Gemini 2.5 Flash Image, which generates and edits images through hosted services including Gemini API and AI Studio. Google's origin story, launch announcement

What are the key facts about the original Nano Banana?

Fact	Verified detail
Developer	Google DeepMind. Announcement
Released	August 26, 2025, initial public launch. Announcement
Type	Image generation and editing with image and text inputs and outputs. Model documentation
Size or parameters	Not published in the official model documentation. Model documentation
License and access	Hosted Gemini service under Google's terms; no open weights are provided. Access announcement, service terms
Where it runs	Google's infrastructure, accessed through Gemini API, AI Studio, or Vertex AI. Announcement

Keep the model identifier beside the nickname whenever you record a workflow.

Where did the Nano Banana name come from?

Google's own origin account credits product manager Naina Raisinghani with combining personal nicknames into Nano Banana.

The team needed an anonymous public name for evaluation on LMArena before revealing the developer. Google's origin story

Google describes the technical name as already established when the nickname was chosen. The memorable public label subsequently became part of its product presentation.

That distinction explains why an article and an API request can use different names for the same model. Origin story

For a reader, the useful takeaway is practical: search for the technical model name when checking capabilities.

A nickname can help you find examples, while the model documentation tells you which input types and access routes those examples actually require.

Treat screenshots and filenames as supporting context in your own notes. Record the provider, model identifier, prompt, reference images, and date of the attempt together.

This gives a future collaborator enough information to understand what you used.

What can the original Nano Banana do?

Google documents targeted photo edits and combining reference images for the original Nano Banana.

These are useful starting points for a workflow in which an existing subject matters more than generating an unrelated scene. Developer announcement

The current model page also describes conversational image editing as a supported use case.

A practical exercise is to begin with a clear product photo and request one visible change, then inspect the result before requesting another. Model documentation

Make that exercise measurable. Write down the required change and the details you want preserved before generating. For a mug photograph, those details might include the handle shape, viewpoint, and visible label.

Compare each against the result separately.

This is a suggested review method, not a benchmark result. It helps you decide whether a particular output meets your brief without assuming that an attractive image necessarily preserved the reference correctly.

What are the limits of the original Nano Banana?

The original model's documentation marks search grounding and thinking as unsupported.

Do not transfer a capability from a later Nano Banana model to Gemini 2.5 Flash Image merely because both share the nickname. Model documentation

Google's image guide says the requested number of outputs is not always followed and generated images include SynthID. It recommends up to three input images for the original model. Image generation guide

No parameter count or local deployment recipe appears in its official model documentation.

Its hosted access does not give you model weights to load into a local image-generation pipeline. Model documentation, access announcement

For your own work, distinguish an editing instruction from an acceptance guarantee. Check the changed area and the surrounding details.

If a face, label, or object has drifted, keep the original reference available and revise the instruction.

How do you access the original Nano Banana model?

Open the model documentation and follow its AI Studio link to inspect the model. Use the documented identifier gemini-2.5-flash-image when you need this specific version. Model documentation
For a scripted request, create a Gemini API key in AI Studio and make it available as GEMINI_API_KEY. Review the account's access and billing requirements before generating. API key guide
Send a text prompt using the documented generateContent method. This example requests image and text output and saves the JSON response. API reference

curl --fail-with-body \
  "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image:generateContent" \
  -H "x-goog-api-key: $GEMINI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"contents":[{"parts":[{"text":"Create a still life of a yellow mug on a blue table."}]}],"generationConfig":{"responseModalities":["TEXT","IMAGE"]}}' \
  -o response.json

The response file is a JSON envelope, not a PNG. Inspect its candidates and parts; image parts contain encoded data and a MIME type. Handle an error or a response without an image before trying to display it. API reference

Save your prompt beside the decoded output. Then change a single aspect of the scene, such as the table color, and compare the versions.

That small exercise teaches the relationship between prompt, model, and result more clearly than collecting unlabelled screenshots.

For the billing details and a more focused integration walkthrough, see the sibling Nano Banana API access guide.

How does Nano Banana differ from Nano Banana Pro?

Model	Useful distinction
Nano Banana / Gemini 2.5 Flash Image	The original model; its model page lists image editing but no search grounding. Documentation
Nano Banana Pro / Gemini 3 Pro Image	A separate image model with documented thinking and search grounding. Documentation

For the sequence of model announcements, see PromptZone's AI model releases timeline.

What else should you know about the Nano Banana name?

Who made Nano Banana?

Google DeepMind developed the model. Google's launch identifies Nano Banana as Gemini 2.5 Flash Image, and the official model page retains that association. Announcement, model documentation

Why is it called Nano Banana?

Google attributes the Nano Banana nickname to Naina Raisinghani and the team's need for an anonymous evaluation name. It later became the public-facing name alongside Gemini 2.5 Flash Image. Origin story

Is Nano Banana an open-source model?

Google's original Nano Banana release supplies no open model weights. The API is access to a hosted Google service, governed by its service terms. Announcement, terms

Is Nano Banana Pro the same model?

Nano Banana and Nano Banana Pro are separate models: the original maps to Gemini 2.5 Flash Image, while Pro maps to Gemini 3 Pro Image; check the identifier when reproducing a workflow. Original documentation, Pro documentation

PromptZone - AI Prompts, Guides and Tools for Builders: Joaquin Rao

98.css Brings Windows 98 UI to AI Demos

What It Is and How It Works

Key Specs from the Project

How to Try It

Pros and Cons

Alternatives and Comparisons

Who Should Use This

Bottom Line / Verdict

Nano Banana: A Guide to Its Name, Origins, and Image Model

What are the key facts about the original Nano Banana?

Where did the Nano Banana name come from?

What can the original Nano Banana do?

What are the limits of the original Nano Banana?

How do you access the original Nano Banana model?

How does Nano Banana differ from Nano Banana Pro?

What else should you know about the Nano Banana name?

Who made Nano Banana?

Why is it called Nano Banana?

Is Nano Banana an open-source model?

Is Nano Banana Pro the same model?

Sources

PromptZone - AI Prompts, Guides and Tools for Builders: Joaquin Rao

98.css Brings Windows 98 UI to AI Demos

What It Is and How It Works

Key Specs from the Project

How to Try It

Pros and Cons

Alternatives and Comparisons

Who Should Use This

Bottom Line / Verdict

Nano Banana: A Guide to Its Name, Origins, and Image Model

What are the key facts about the original Nano Banana?

Where did the Nano Banana name come from?

What can the original Nano Banana do?

What are the limits of the original Nano Banana?

How do you access the original Nano Banana model?

How does Nano Banana differ from Nano Banana Pro?

What else should you know about the Nano Banana name?

Who made Nano Banana?

Why is it called Nano Banana?

Is Nano Banana an open-source model?

Is Nano Banana Pro the same model?

Sources

Related guides on PromptZone