跳到正文
UIGrammer
EN 中文

主题 · 产品 · 入门

Notion 风文档工作台

Notion 风文档 = 工作区树、页面属性与勾选清单、蓝色 callout 构成的单页工作台。

直达修改 Prompt

提示

页面就是主角:标题要大、属性要轻。勾选清单用真实的复选状态,别用装饰。

Build a Notion-style docs workspace called "Quill" for a product team's internal wiki. STYLE - Warm white canvas (#fbfbfa), near-black type (#37352f) — the classic Notion paper feel - One muted accent (blue #2383e2) for links and active states - System sans for everything; generous line-height; no shadows, hairline dividers LAYOUT - Left sidebar (#f7f6f3): workspace "Q Quill"; WORKSPACE tree - Product, Q3 planning (on), Engineering wiki, Hiring loop, Meeting notes - Page: breadcrumb "Product / Q3 planning"; title "Q3 planning"; properties row (Status "In review" blue tag, Owner Priya, Due Sep 30) - "Milestones" checklist: checked "Ship design tokens v2" (struck through), open "Migrate docs to the new editor"; tall adds open "Audit component coverage" - Blue callout: "Note - Freeze scope after Sep 20 so QA gets a full regression week." COMPONENTS - Sidebar: workspace identity, page tree with active page - Page: breadcrumb, large title, properties row with status tag, owner, due date - Milestone checklist with real checked states; blue callout INTERACTION - Checkboxes toggle real states; done items strike through; the callout carries the accent. TECHNICAL - React, Tailwind CSS, shadcn/ui for sidebar and callout