Parchment Hearth
奶油纸页上盖一枚赤陶灯笼印的静谧AI对话工作台
整个界面像灯下摊开的米色信纸:九成是偏黄褐的暖中性色,唯一的颜色是问候语旁那枚赤陶色三椭圆“灯笼”标记。36px 的 Newsreader 细体问候语与 12–14px 的小字界面形成强烈的尺度对比,纯白输入框以 24px 圆角和几乎看不见的阴影浮在纸面上。没有渐变、玻璃和噪点,动效克制而缓慢。适合做日常生活向的 AI 助手、写作与笔记类产品的空状态与对话壳层。
Pro 会员可用 · 单独购买 ¥19 · 更新于 · Live demo
签名细节
- 唯一的颜色:三椭圆赤陶灯笼标记
- 36px 细体衬线问候语对比小字界面
- 纯白 24px 圆角输入框浮于米色纸面
- 全部灰色偏暖,无渐变玻璃噪点
页面区块
- 侧栏头部与分段控件
- 主导航
- 最近会话
- 账号页脚
- 顶部栏
- 问候语与灯笼标记
- 输入框
- 起始提示胶囊
- 对话线程
色板
- Cream Folio
#FAF9F6— background - Pure Page
#FFFFFF— surface (composer only) - Rail Linen
#F4F2ED— surface-2 / rail - Pressed Parchment
#EBE8E2— active / selected fill - Lamp Ink
#1F1E1D— text - Dusty Umber
#6F6D68— text-muted - Terracotta Seal
#D26A4B— accent (lantern mark only) - Baked Clay
#B4512F— accent-text (in-reply links)
字体
- Newsreader — display (greeting, wordmark)
- Hanken Grotesk — body / UI
- JetBrains Mono — mono
提示词目录
- Design Intent
- Design Tokens
- Typography
- Color & Material
- Layout & Grid
- Page Blueprint
- Components
- Motion & Interaction
- Responsive Behavior
- Accessibility
- Do / Don't
- Output Requirements
如何使用这套风格
复制提示词全文粘贴给任意 AI;或下载 Agent 技能 / Cursor 规则 / AGENTS.md;或在接入 MCP 的工具里说:“用 ui-atlas 的 parchment-hearth-chat 风格做这个页面”。
免费预览
# Parchment Hearth — AI Chat Workspace Shell You are a senior product designer and front-end engineer with an obsessive eye for typography, spacing and motion. Build the logged-in, new-conversation empty state of an AI chat workspace for a fictional assistant called **"Wren"**, in the **Parchment Hearth** style described below. Treat every value in this brief as a spec, not a suggestion. ## 1. Design Intent Mood: warm, hushed, unhurried. Think of a cream laid-paper folio on a lamplit desk, stamped once with a terracotta seal. The product is for people who use an assistant for everyday thinking, such as cooking, trips, letters and small repairs. The first viewport must feel like a quiet reading room, not a control panel. Almost everything is warm neutral, and a single coral mark carries all the brand energy.