数据看板

Daylight Ledger

白纸发丝线里,数字随热度由灰转橙的社区索引页

整页像一张保养良好的图书馆索引卡:纯白底、1px 发丝分隔线、唯一的青蓝强调色。左侧是 283px 侧栏,右侧是紧凑的帖子账本,没有 hero、没有卡片。签名细节是“热度数字”——回复数与浏览数按量级从中性灰过渡到棕色再到焦橙,是全页唯一的装饰;再配上 24px 五连头像条、分类着色的侧栏图标、淡青色通知条与“新帖”浮动药丸。18.4px 标题与 13.9px 灰色元信息拉开层级,适合论坛、社区、知识库、文档索引等高密度扫读产品。

Pro 会员可用 · 单独购买 ¥19 · 更新于 · Live demo

签名细节

  • 回复与浏览数按热度由灰转棕再转焦橙
  • 五连头像条,24px 圆、28px 间距、青色细环
  • 侧栏图标按分类着色,充当页面图例
  • 淡青色横幅与浮动新帖药丸

页面区块

  1. 顶部栏
  2. 侧栏导航
  3. 通知条与筛选行
  4. 表头与新帖药丸
  5. 帖子列表
  6. 无限滚动加载

色板

  • Paper White #FFFFFF — background
  • Ledger Gray #F2F2F2 — surface
  • Hairline #E9E9E9 — border
  • Ink #222222 — text
  • Quiet Gray #646464 — text-muted
  • Porch Blue #0088CC — accent
  • Pale Cyan Wash #D1F0FF — accent-wash
  • Burnt Orange #B04400 — heat

字体

  • Inter — display / body
  • JetBrains Mono — mono

提示词目录

  1. Design Intent
  2. Design Tokens
  3. Typography
  4. Color & Material
  5. Layout & Grid
  6. Page Blueprint
  7. Components
  8. Motion & Interaction
  9. Responsive Behavior
  10. Accessibility
  11. Do / Don't
  12. Output Requirements

如何使用这套风格

复制提示词全文粘贴给任意 AI；或下载 Agent 技能 / Cursor 规则 / AGENTS.md；或在接入 MCP 的工具里说：“用 ui-atlas 的 daylight-ledger-forum 风格做这个页面”。

免费预览

# Daylight Ledger — Community Forum Index Page

You are a senior product designer and front-end engineer with an obsessive eye for typography, spacing and numeric alignment.
Build a logged-out "latest threads" home page for a fictional neighborhood-hobby forum called **"Porchlight"** in the **Daylight Ledger** style described below. Treat every value in this brief as a spec, not a suggestion.

## 1. Design Intent

Calm, dense, trustworthy. Picture a well-kept library index card, or a spreadsheet that learned to be friendly. White paper, hairline rules, one cyan-blue accent, and numbers that heat up as threads get busier. The audience is regulars who scan 25 threads in seconds. The first viewport should read as an app shell (sidebar plus ledger) with no hero, no cards and no imagery except tiny avatars.