# Dark ranking page for Chinese X creators

> A black, high-contrast landing page that ranks Chinese-language X accounts, with a huge two-line headline over a scrolling leaderboard. The two-sentence Chinese prompt asks Gemini 3.0 for a page with maximum design, Tailwind, and motion, as one HTML file.

- Kind: Website
- Page: https://meetreference.com/v/dark-ranking-page-chinese-x-creators/
- Ready-to-use agent handoff: https://meetreference.com/v/dark-ranking-page-chinese-x-creators/agent.txt
- Exact prompt as plain text: https://meetreference.com/v/dark-ranking-page-chinese-x-creators/prompt.txt
- Authorship: Not stated
- Made with: Not stated
- Model: Gemini 3.0
- Built with: Tailwind CSS, HTML and CSS
- Style: Landing pages; dark mode, high contrast, minimal, leaderboard, big type, chinese, tailwind
- Shared by @hellokaton in X, Nov 19, 2025: https://x.com/hellokaton/status/1991044658638840304
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Before you start

Guidance from Reference, separate from the creator's instructions.

1. Read the reference and inspect the project, installed libraries, and available agent skills before writing code. Reuse suitable tools already present.
2. Prefer the creator-reported libraries and skills when they fit the task. Explain what useful additions help with, and install missing project dependencies or relevant skills from official sources when the environment and the user's existing permissions allow it. Respect the project's package manager and setup rules; do not ask again for routine setup already authorized.
3. Distinguish tools used by the creator from your own recommendations. A listed tool is not automatically required, and an empty tools or requirements list means the setup is unknown, not that nothing is needed.
4. Ask concise questions when missing inputs or choices materially affect the result: paid services, credentials, the user's assets, or a different production approach. Use existing answers and permissions; continue independent work while waiting.
5. If a useful library, skill, or service cannot be installed or used, explain an available alternative and its expected effect on quality, features, or effort. Get the user's choice before a material compromise; otherwise state the fallback and continue. Never silently simplify the result or claim to have used a tool you did not use.

Requirements reported by the source: Web access for the model, since the prompt asks it to fetch the ranking data (数据源通过网络获取).

## Recreating this website

These are the creator's published instructions, unedited.

To adapt it: Swap 「中文推特 KOL 榜单」 (a ranking of Chinese Twitter KOLs) for your own list, and the style words 极简配色，深色模式，高对比度 (minimal palette, dark mode, high contrast) for another look.

## Prompt

```text
作为一名极具审美的前端工程师，创建一个「中文推特 KOL 榜单」网站落地页，设计感拉满，极简配色，深色模式，高对比度。数据源通过网络获取。
使用 tailwindcss + html5 ，加入动效，直接输出 HTML 代码。
```

## What it looks like

Written by Reference from the video frames, not by the creator.

A black leaderboard page titled THE CHINESE INFLUENCE., with a search field over a ranked list of accounts, each with an avatar, category tag, and score.

- Color: Black with white and grey type and a lime-green accent on the live badge, top rank numbers, and the highlighted row; the recording sits on a blue-violet desktop backdrop.
- Type: A bold two-line grotesque headline that fades from white to grey, with a faint outlined TOP 100 behind it; small sans-serif for the table.
- Framing: 16:9 screen recording with a visible cursor. Headline top left, then a full-width table: rank, name and handle, category, impact score, and trend arrow.
- Structure: Hero with the headline and search field, then the list scrolls from rank 01 to 16, highlighting the row under the cursor, and ends at a Load more button.

Storyboard, nine frames spread across the video: https://meetreference.com/media/dark-ranking-page-chinese-x-creators/storyboard.webp

- Frame 1 at 0.3s: https://meetreference.com/media/dark-ranking-page-chinese-x-creators/f1.webp
- Frame 2 at 1.0s: https://meetreference.com/media/dark-ranking-page-chinese-x-creators/f2.webp
- Frame 3 at 1.7s: https://meetreference.com/media/dark-ranking-page-chinese-x-creators/f3.webp
- Frame 4 at 2.4s: https://meetreference.com/media/dark-ranking-page-chinese-x-creators/f4.webp
- Frame 5 at 3.1s: https://meetreference.com/media/dark-ranking-page-chinese-x-creators/f5.webp
- Frame 6 at 3.8s: https://meetreference.com/media/dark-ranking-page-chinese-x-creators/f6.webp
- Frame 7 at 4.4s: https://meetreference.com/media/dark-ranking-page-chinese-x-creators/f7.webp
- Frame 8 at 5.1s: https://meetreference.com/media/dark-ranking-page-chinese-x-creators/f8.webp
- Frame 9 at 5.8s: https://meetreference.com/media/dark-ranking-page-chinese-x-creators/f9.webp

## How it was made, per the creator

- Notes: The creator didn't say where Gemini 3.0 ran. In a reply they called it a simple build with no larger stack in an AI IDE, just a demo (只是演示一下), and said the data was correct. The prompt asks for the data to be fetched from the web, so the result depends on the model having web access.

## Links

- Watch: https://x.com/hellokaton/status/1991044658638840304
- Original post: https://x.com/hellokaton/status/1991044658638840304