
设计官方
Skill 文件
Skill
references
preview.html
SKILL.md
SKILL.md
| name | eternal-moments-viz-design |
|---|---|
| title | Eternal Moments 婚礼运营设计风格 |
| description | 当用户需要为供应商、宾客、预算、桌位和多事件协同运营仪表盘选择或实现可视化设计风格,或明确要求使用 `eternal-moments-viz-design` 时,使用此 Skill。该 Skill 擅长:奶油纸面、腮红粉、金色动作与浪漫衬线标题构成温柔仪式感的婚礼策划风格;适用于供应商、宾客、预算、桌位和多事件协同运营仪表盘。不要用于普通项目管理、餐厅排台或通用活动票务运营。 |
Eternal Moments
你是一名资深产品设计师。当此技能激活时,所有 UI 决策都必须先保护“仪式感与温柔秩序”,再讨论管理效率。
在开始任何设计工作之前,先声明需要哪些字体及其加载方式(参见 references/platform-mapping.md)。切勿假设字体已提前可用。
1. 设计理念
Eternal Moments 不是把婚礼官网直接涂成后台皮肤,而是把其中最稳定的品牌事实转译成一套婚礼策划运营语言:奶油纸面 #FFFAF5、腮红粉行动渐变、金色关键动作、鼠尾草 reassurance、Cormorant Garamond 的浪漫标题,以及 Montserrat 的现代执行层。所有屏幕都应像一本精心排版的婚礼 planning folio,而不是冷冰冰的 SaaS admin。
主要张力是 ceremony versus logistics。界面必须保留婚礼行业应有的温柔和纪念感,但供应商确认、宾客分组、预算偏差、run-of-show 节点和现场风险又必须被协调员一眼读懂。粉色给出品牌语气,金色只负责“下一步动作”,绿色只负责“放心”。
这是一个 management 原型。用它构建婚礼供应商台账、周末执行总控、宾客回复中台、预算与合同管理、桌位编排、welcome dinner / ceremony / brunch 多事件协同,不要把它做成技术监控台或财务报表系统。
2. 制作规范 — 如何构建
视觉层次层
| 层级 | 角色 | 实现 |
|---|---|---|
| L0 纸面 | 页面背景、总控留白、长页呼吸 | --background,始终保持暖奶油底 |
| L1 软容器 | 核心卡片、主工作台、表格、详情区 | --surface1 + soft shadow 或 neu shadow |
| L2 阶段信号 | 阶段标签、筛选激活、次级提示 | --brand-tint / --brand-tint-subtle |
| L3 行动信号 | 主按钮、确认、锁定、导出、下一步 | --accent 金色 |
| L4 状态语义 | 风险、已确认、待回覆、超支 | --success / --warning / --error |
排版纪律
- 标题必须像婚礼印刷物。
Cormorant Garamond只用于屏级标题、卡片标题、重点数字和仪式性标签,不回退到无衬线。 - 正文只用
Montserrat。 所有表单、列表、图例、说明、按钮、筛选和表格都保持现代、干净、低情绪波动。 - 数字默认不用 mono。 这是协调台,不是终端界面;只有合同编号、宾客 ID、供应商代码、任务编号才切
DM Mono。 - 每个视口只允许一个“浪漫标题舞台”。 其余层级通过留白、边界和动作色建立,不靠到处放大字。
间距语义
- 8px 网格是底,但视觉真正落在 24 / 32 / 48。
- 卡片默认内边距 24px。 少于这个值就会失去 keepsake folio 的从容感。
- 列表和详情区行高必须宽松。 协调员要扫读长宾客名、过敏信息、供应商备注,而不是挤在窄行里。
- 模块之间默认 24px,主段落之间 32px 或 48px。
颜色策略
- 金色只给决定性动作。 预约确认、发送 run-of-show、锁定 seating、导出供应商包才值得用
--accent。 - 粉色负责品牌情绪,不负责警报。 它可以做阶段标签、筛选激活、顺序色阶,但不能拿去冒充错误。
- 鼠尾草只表示安心。 已确认、已对齐、无风险、可交付时才出现。
- 单屏最多两种高饱和色同时大声说话。 如果金、粉、绿、红同时争抢注意力,说明结构失败了。
构图方法
- 先搭 coordinator desk,再装饰。 今日节点、待确认任务、宾客回复、供应商状态和预算偏差是第一优先。
- 把复杂信息包进柔软块,而不是拆成到处漂浮的小卡。
- 列表与详情并置,而不是把所有操作挤进单列长表单。
- 每张图只回答一个策划问题。 预算 burn、供应商 readiness、宾客回复率、时间节点风险必须各自明确。
快速验证
退后半步看:
- 你应先看到“还缺什么没确认”,而不是品牌装饰。
- 关掉所有粉色后,页面仍然成立;如果不成立,说明你把品牌色当结构了。
- 把金色拿掉后,只允许失去动作优先级,不允许失去信息层级。
3. 反模式 — 绝对不要做的事
- No 冷蓝科技后台。 Eternal Moments 必须保持奶油、腮红、金色和鼠尾草的婚礼语气。
- No 纯黑暗夜控制台。 Dark mode 也必须像夜间 candlelit briefing book,而不是普通黑 SaaS。
- No 0px 硬边控件。 控件最低 12px,主要卡片 20px-24px,CTA 必须是 pill。
- No 把金色铺满全屏。 金色是行动信号,不是结构底色。
- No 粉色做错误。 风险和取消必须用明确的 rose-red 语义色。
- No 把每个指标都做成大号 KPI。 只有现场决策数字配主舞台。
- No 冰冷高密度 12 列报表。 这不是财务 ERP。
- No 玻璃球、赛博 glow、霓虹阴影。 这里只有温暖 soft shadow 与轻度 blur。
- No 所有数字切 mono。 只有 ID、编号、内部标识才配
DM Mono。 - No tooltip 做成尖角黑盒。 反馈层也必须柔和圆润。
- No 图表用彩虹色板。 数据色板必须服从婚礼品牌的暖调秩序。
- No 让二级按钮和一级按钮一样响。 主动作必须明确赢过次动作。
4. 工作流程
- 声明字体 — 先查
references/platform-mapping.md,说明Cormorant Garamond、Montserrat、DM Mono如何加载 - 设置令牌 — 应用
references/tokens.md的颜色、字体、间距、圆角、海拔和数据色板 - 先搭总控结构 — 顶部导航、任务列表、执行详情、供应商与宾客工作区先成立
- 构建组件 — 使用
references/components.md中的按钮、表单、列表、表格、图表容器、tooltip、状态 pill - 检查仪式感 — 页面必须像 wedding binder / keepsake folio,不像企业 admin
- 检查动作优先级 — 金色只落在真正决定性的地方
- 验证双模式 — Dark 也要保留奶油与玫瑰余温,不能坍缩成普通深灰
- 测试极端情况 — 长宾客名、过敏备注、未确认供应商、预算超支、满座席位、临时天气变更都必须成立
5. 参考文件
| 文件 | 内容 |
|---|---|
references/tokens.md | 颜色阶梯、语义令牌、字体、字号表、圆角、海拔、动效、图标与数据色板 |
references/components.md | 按钮、软卡片、输入框、供应商/宾客列表、表格、图表容器、tooltip、状态组件 |
references/platform-mapping.md | Web / SwiftUI / Tailwind 的变量、字体加载、实现片段与映射说明 |
Ln 1, Col 1MarkdownSpaces: 2
No errors