GenHN

English	日本語

Generative UI Hacker News Client. An experimental project that dynamically generates visual DNA to reconstruct the Hacker News interface. Comes with preset themes inspired by distinctive product design systems. Add a Gemini API key to generate any theme on the fly, or paste CSS generated by an external AI (ChatGPT, Claude, Gemini, etc.) using the built-in template prompt to instantly switch the visual style.

Live Demo

Features

• 12 Design Presets: Instantly switch between design systems inspired by iconic brand aesthetics.
• AI Theme Generation: Enter a Gemini API key to generate entirely new design themes from any free-text prompt.
• Paste CSS: Paste any CSS theme generated by an external AI tool and apply it instantly. Applied themes can be saved as custom presets.
• AI Prompt Template: A built-in, ready-to-copy prompt for generating themes with ChatGPT, Claude, or Gemini without an API key.
• Feed Navigation: Switch between Hacker News feeds — Top, New, Ask, Show, and Jobs.
• Live HN Data: Fetches real stories from the Hacker News Firebase API (30 stories per page, with infinite scroll via "More").
• No Build Step: Pure vanilla JS + CSS. Open index.html directly in a browser.
• View Transitions: Smooth page transitions using the View Transition API (with graceful fallback).

Usage

1. Open index.html in your browser.
2. Click a preset button in the bottom-right panel to apply a built-in theme.
3. Use the header navigation links to switch between HN feeds (Top / New / Ask / Show / Jobs).

Available Design Essences

Each preset is a tribute to a real product's design language — see how many you can identify.

Theme	Description
Minimalist	Soft white base with glassmorphism header, clean typography, and subtle card shadows.
Intelligence	Near-black background with emerald green accents, monospace logo, and a blinking cursor — AI chat interface inspired.
Search	Pure white, functional layout, and blue hyperlink-style titles evoking classic search engine aesthetics.
Universal	Bold card grid with rounded corners and strong blue accents — friendly and highly legible.
Glitch	Black background with electric yellow text, cyan subtext, CRT scanline overlay, and polygon-clipped cards.
Playful	Light gray background with a red header, thick black borders, and a card grid reminiscent of game console UI.
Glow	Deep navy with a radial blue gradient, glowing neon logo, and translucent cards — next-gen console aesthetic.
Academic	Warm cream background, serif typography, and a terracotta accent for a calm, thoughtful reading experience.
Washi	Soft paper-like cream tones, deep forest green, and Japanese serif fonts — a hand-crafted, watercolor-inspired feel.
8-Bit	Pure black, phosphor-green terminal text, cyan accents, monospace font, and pixelated rendering — retro PC / game aesthetic.
Circuit	Deep green background with PCB grid overlay, gold connector tabs on cards, and LED blink on the logo — hardware maker aesthetic.
Aubergine	Deep aubergine background with warm orange accents, bold card grid, and desktop OS-inspired typography.

Minimalism	Intelligence	Search

Universal	Glitch	Playful

Glow	Academic	Washi

8-bit	Circuit	Aubergine

Architecture

The application is split across three files:

• index.html — Static DOM structure (header, story list, control panel).
• presets.js (~800 lines) — Theme definitions only (STYLE_PRESETS). Edit this file to add or modify themes.
• gardener.js (~1,500 lines) — All application logic:
  • SYSTEM_STYLE — Base CSS (layout, glassmorphism, responsive design).
  • HNData — Hacker News API integration (feed fetching, pagination).
  • App — Main controller (theming, rendering, event handling, localStorage persistence).

AI Theme Generation (Gemini API)

GenHN can generate new themes on-the-fly using the Gemini API.

1. Obtain a free API key from Google AI Studio.
2. Open the control panel (bottom-right) and expand the Generate (Gemini API) section.
3. Paste your key and click Save Key — it is stored only in your browser's localStorage and never sent anywhere other than the Gemini API. The key persists across page reloads for convenience. Please manage your API key responsibly.
4. Type any design description in the prompt field (e.g. "brutalist newspaper", "cozy dark cafe") and click Apply.

The app calls gemini-2.5-flash to produce a complete CSS theme from your prompt, which is then applied immediately without a page reload.

Note: The Gemini API generation currently tends to produce less varied results. For richer and more creative themes, the Paste CSS workflow with an external AI is recommended for now.

Paste CSS (External AI Workflow)

No API key? Use any AI tool to generate a theme and paste the CSS directly:

1. Open the AI Prompt Template section in the control panel and click Copy Prompt.
2. Paste the prompt into ChatGPT, Claude, Gemini, or any other AI tool, replacing the bracketed line with your theme idea.
3. Copy the CSS the AI returns.
4. Open the Paste CSS section in the control panel, paste the CSS, and click Apply.
5. Optionally, click Save as Preset to store the theme as a custom preset button for quick reuse.

Adding Themes (Clone the Repo)

Add an entry to STYLE_PRESETS in presets.js following the existing pattern. Each theme overrides CSS custom properties (and optionally adds component-specific rules).

Contributing

Pull requests are welcome! Feel free to open an issue or submit a PR for new themes, bug fixes, or feature ideas.

Disclaimer

This project is for design experimentation purposes only and has no direct affiliation with any existing brands. All trademarks and direct brand representations have been excluded.

License

MIT