prom-design

Prom 设计

这种风格曾用于真实的客户项目。本技能中的示例使用两个虚构的代称品牌：AURA Heights（海滨公寓）和 The Assembly（会员活动 Web 应用），因此可以完整展示规则，同时不暴露任何客户信息。真正可迁移的是这些规则。

文中提到了两个可选的配套公开技能：impeccable（设计审查）和 design-dna（将截图转换为设计令牌）。没有它们也能使用本文中的所有内容。文中提到的 Blender 360° 全景导览属于另一套工具链，不包含在本技能中。

每项工作都从一分钟需求了解开始

不要先动手，之后再请求原谅。调用本技能时，如果用户还没有回答以下问题，请务必在编写任何代码之前，用一条简短消息询问，使用通俗语言，不要用设计术语：

1. 这个页面的用途是什么，谁会访问它？（一句话就够）
2. 它应该促成购买，还是帮助用户办事？ 用简单的选项询问：“做一个让人心动的页面（电影感），还是一个帮助用户完成任务的页面（工具感）？”如果用户犹豫，就推荐一种，并用一句话说明原因。
3. 有什么必须保留的内容吗？ 品牌颜色、徽标、现有文案。

接着，花三十秒思考主题的世界，再给出回答（这个行业里的材料、天气、房间和物品是什么样的），然后提供 两到三个有名称的设计方向，每个方向用一行说明：名称、实际十六进制值的底色和强调色、字体组合，以及它为何适合该主题。推荐其中一种，并用一句话说明原因。示例格式：

1. 雨中花瓶（推荐）：清凉的绿灰底色 #EDF1EC，苔绿色墨色， 陶土烧制色强调色 #A65A33，Fraunces + Archivo。适合雨水充沛的山城花店：这套配色就像店铺在雨天清晨的窗景。
2. 夜市：炭灰底色，纸灯笼琥珀色强调色， Newsreader + Archivo。氛围更浓郁，适合以夜间活动为主的业务。

最后以“选一个、混搭，或者直接说‘开始构建’。”结束。最多进行一轮提问。需求了解的目的是让新手感到有人引导，而不是被盘问；提供选项则是为了让他们凭直觉选择，而不用描述自己尚未学会表达的品味。

移动端是默认选择，不是事后补救

假设大多数用户都使用手机。除非用户另有要求，否则每次构建都应采用以下默认设置。这些设置来自 Web 应用手册（references/webapp.md），但并非只适用于 Web 应用：

• 滚动预算。 页面应在大约 3.5 个手机屏幕内讲清核心主张（内容密度预算）。如果内容太多，就用筛选项、标签页或带阴影的横向图库来精简，而不是再堆叠一个版块。
• 横向滚动图库要提供操作提示。 所有横向滚动区域都应露出下一张卡片的一角，边缘处带有淡淡的渐隐效果，并在首次查看时短暂显示滑动提示。绝不能让内容直接溢出，让人误以为内容被截断了。
• 触控目标要够大。 按钮和卡片要适合拇指操作（最小 44px），主要操作要能在屏幕下半部分触及；产品有三个或更多目标位置时，就要使用底部标签栏。
• 操作提示只出现一次。 如果界面中有用户无法自行猜到的手势（滑动、长按、拖动），就用一次性浮层进行说明，之后不再出现。
• viewport 元标签不可省略，并且每个页面都必须在 390px 宽度下满足 scrollWidth == viewport width。内部滚动区域自行滚动，页面绝不能横向滚动。

手机上的电影感模式应像一部更精简的电影：版块更少、字号更大，核心主张不变。手机上的工具感模式应让人感觉像原生应用，而不是缩小版的网站。

这项技能存在的意义

大多数设计技能，包括 impeccable 和 high-end-visual-design，都是为了给每份设计需求构想一个全新的视角。对于代理公司项目来说，这样做没错，而 impeccable 甚至会提醒自己不要趋同：如果上一个页面采用了克制的奶油色调，下一个就不能再用同样的风格。

这项技能刻意反其道而行之。它沿用已经验证过的一套美学风格，让新手即使还没有审美判断力，也能按这种风格创作。审美需要慢慢培养，而经过验证的系统是捷径。

两者都要用。impeccable 负责通用原则（OKLCH 色彩处理、动效曲线、六项绝对禁令、AI 味测试）。这项技能负责特定的品牌风格答案及其周边的客户端工作流。如果两者意见不一，要明确指出，而不是默默择一；对于两者真正冲突的地方（衬线字体的选择），请参阅 references/taste.md。

第一个决定：采用哪种风格

后续的一切都取决于这个决定。两种构建风格截然不同，因为它们要回答的问题不同。

	电影感（AURA Heights）	工具型（The Assembly）
用户正在	判断是否要关注	试图完成某件事
成功意味着	先产生感受，再发起咨询	快速完成任务
布局	全幅区块、滚动叙事	密集卡片、筛选项、列表
字体	展示型衬线字体 + 字距加宽的无衬线字体	一款无衬线字体，多种字号
动效	大胆，可在首次加载时播放	仅限功能性动效
移动端	更小的影院	带标签栏、原生体验的应用
适用场景	营销网站、发布活动、品牌展示	预订、仪表盘、目录、账户

如果确实两者兼有（营销首页加上登录后的应用），就用同一套令牌系统构建两种风格，而不是妥协成不伦不类的混合体。The Assembly 正是如此：在工具型界面之上搭建电影感的首页。

开始动手编辑文件前，先写明采用哪种风格。它决定字体搭配、信息密度，以及之后如何判断缺陷。

第二个决定：品牌自己的令牌

风格决定架构。主题决定配色和字体，而大多数单一风格技能都会在这里出错：它们只提供一套配色，结果每个客户的设计都变成米色。真正的准则是令牌的结构，绝不是一成不变的取值：

• 带色调的底色，色温不限。 绝不用纯 #FFFFFF 或 #000000。色调来自主题所处的物质世界：雨中的花店适合冷调灰绿，金融科技账本适合冷调纸蓝色，晚宴俱乐部适合亚麻与烟熏色，海滨高楼适合暖象牙色。要根据主题推导，不要照搬默认值。
• 用墨色，不用黑色。 深色要承载底色的色温。
• 只用一种点缀色，取自品牌真正拥有的物件。 烤炉的炭火红、陶罐的陶土色、钱款的账本绿、黄铜的金色。介绍设计方向时，要说清楚它来自什么物件。
• 字体体现品牌语气，因此要有所变化。 从经过审核的精简字体列表中选择，均可在 Google Fonts 获取，每款都有自己的语气：Cormorant Garamond（烛光下的古典风格）、Fraunces（温暖、现代、略带柔和感）、Newsreader（编辑风、冷静克制）、Spectral（精准、带有技术感的温度）、Libre Caslon Text（书卷气）。搭配一款实用的无衬线字体：Archivo、Public Sans 或 IBM Plex Sans。泰语则用 Trirong（衬线）和 Sarabun（无衬线），让两种文字都能得到恰当呈现。
• 无论设计需求如何，以下搭配都禁止使用： 带有 AI 味的组合（Playfair Display 搭配 Montserrat、所有内容都用 Inter）、紫蓝渐变，以及因为上一个客户用着不错就沿用其配色。本仓库中的每个演示品牌都按此方法采用了不同的设计方向；这些差异正是方法有效的证明。

五项准则

这些是承重原则，其他一切都是细节。每项原则都源自实际交付的成果，也各有其缘由，因为理解规则，才能在新情境中灵活应用；死记硬背则不然。

1. 具体信息是奢华感的标志

真实的数字、真实的名称、真实的距离。AURA Heights 写明“217.40 sqm”“高出海湾 38m”“距码头九十秒”。The Assembly 写明“12 个名额中剩余 3 个”“09:20 至 14:05”“距 Harbor Station 北出口 8 min”。

含糊其辞会让人觉得是在隐瞒什么，或者根本不了解情况。伪造精准信息的成本很高，因此精准会传递真实感。这也是任何页面上成本最低的升级方式：把每个“宽敞住宅”都换成具体平方米数，不用改一行 CSS，页面就会显得更高端。

推论：**占位内容是设计缺陷，不是待办的内容任务。**Lorem ipsum 和“Feature One”恰恰掩盖了这种风格所依赖的品质。

2. 用证据取代承诺

每项主张旁边都要附上证据。AURA Heights 不会只说景色很美；它派出无人机，飞到几乎每套住宅的准确位置，并写道：“不是效果图。你的景色，已存档。”它不会只说材料很好；它会告诉你，效果图里的每种材料如今都能在销售展厅看到，欢迎亲自触摸。它把效果图和照片并排展示，邀请你比较。

The Assembly 把同样的做法用于新用户引导：“日期和剩余名额都是页面生成时从数据库读取的，不是手工填写的。名额满了，这个数字就会减少。”

写下主张时，先问问什么能让怀疑者相信它，再把那样东西放进版面。这正是这种风格与普通奢华风仿作的区别：后者只管断言，然后寄希望于别人相信。

3. 底色绝不纯白，墨色绝不纯黑

AURA Heights 以 #F7F2E9 暖象牙色为底，搭配 #40301D 棕色文字。The Assembly 使用白色纸面，但文字采用带绿色调的 #141A18，次要表面则使用 #F3EEE3。

纯 #FFF 搭配纯 #000，是未经思考的默认选择；即使眼睛说不出原因，也能感知到色调里蕴含的意图。让每种中性色都稍稍偏向品牌色调。impeccable 用 OKLCH 的说法表达了同样的观点，值得一读。

4. 任何交互都必须明确提示

这是整个项目历史中被反复提出最多的修正，因此要把它视为品牌最在意的问题。AURA Heights 在轮播图上标注“滑动、拖动或使用箭头”，在对比滑块上标注“拖动线条来移动太阳”。360 查看器还专门加上了侧边箭头滚动提示，因为用户看不出它可以拖动查看。

只在悬停时才显现的控件，在手机上等于不存在。如果某个元素可以拖动、滑动、来回拖动或展开，就要用文字说明、显示可操作提示，或在首次查看时播放提示动画。让用户发现交互功能，不是装饰。

5. 在移动端，信息密度就是尊重

仪表盘式布局之所以存在，是因为针对一个具体问题做了修正：留白太多、滚动太多，而大多数人都在用手机，不该让他们一路滚过许多版块。为拇指操作来设计：底部标签栏、首屏内显示内容、用筛选项取代无尽滚动，并确保每张卡片都包含真实信息。

铺满整个视口的通透版块，是电影感布局才享有的特权。把这种设计用在仪表盘上，就是缺陷。

反套路条款

这个品牌最严厉的批评，就是页面读起来像泛泛的 AI 垃圾，字体也不例外。之后的指示同样重要：看看 classpass.com、airbnb、agoda，然后创造我们自己的风格。

因此，方法是先对标，再拉开差异：

1. 列出三个能出色解决类似交互问题的真实产品。
2. 分别用一句话说明它们在机制上究竟做对了什么。
3. 借鉴机制，绝不照搬外观。
4. 说明这个项目会做出哪些不同，以及品牌为何要求这样做。

如果仅凭品类名称就能猜出配色和字体，那就是训练数据里的条件反射，必须返工。impeccable 的品类反射检查对此很有帮助。

工作流程

这是出色作品实际遵循的流程。关卡才是重点；跳过它们，项目就容易出问题。

1. 先口头说明需求，再接触任何文件

说明设计风格、用户是谁、唯一要执行的操作是什么，以及品牌已有的素材（标志、摄影作品、一份文档或现有网站）。客户素材通常以 .docx 文件或照片文件夹的形式提供，因此要从中提取真实的品牌信息，而不是凭空创造品牌。输入是截图或参考图像时，design-dna 就是合适的工具。

关卡：先说出计划，再开始构建。 本团队的常规要求是先解释你将如何完成工作。这不是走过场，而是在最初阶段发现方向错误、以最低成本纠正的办法。

2. 设计契约

在组件出现之前敲定各项决策，因为事后把类型比例系统移植到四十个文件里，一周就会这样消失。把设计令牌写下来，并将它们视为唯一事实来源：组件中不能直接写十六进制颜色值或 px 值。

两套经过验证的令牌系统都在 references/tokens.md 中，其中包括值得整体借用的语义模式（按角色设置圆角、按状态设置颜色、命名 z-index、应用界面高度）。设计自己的比例系统前，请先阅读。

3. 构建

references/patterns.md 中包含带有真实标记的组件模式：三段式分区标题、统计计数器行、带有操作提示的轮播、对比滑块、证明内容组合、活动卡片、底部标签栏，以及首次运行引导覆盖层。

如果设计风格是仪表盘，请在构建任何内容前阅读 references/webapp.md。 其中介绍了密度预算（一个需要实际测量的数值）、页脚标签栏规范、十一种精简方式，以及值得采用的精致组件：阴影引导覆盖层、聚光灯镂空、阴影图库、滚动消息条、骨架屏和粘性提交栏。还介绍了如何借用 21st.dev 组件而不照搬它们的视觉风格。

摄影不是可选项。 一张图片都没有是个 bug，不是克制；而常见的问题是图片很漂亮，却不符合语境（比如清迈页面上放着热带海滩）。references/imagery.md 介绍了如何结合语境选图、免费的图片来源及其许可、Unsplash URL 格式、图片的数量和选择方式，以及让图库图片符合诚实原则的标注规则。

文案是设计的一部分，不是后期才处理的内容。references/copy.md 介绍了品牌语气，而这正是整项工作中最难照搬、也最有价值的部分。

如果项目使用团队的工程基础架构（Cloudflare Workers、Drizzle、Wrangler、Vitest、生成的资源清单），references/stack.md 会介绍相关内容和照片衍生处理流程。

4. 本地回环审查关卡

绝不要为了展示成果而推送。 团队的常规要求是先在 localhost 上运行，再提供链接。然后先自行验证，再声称作品可用：分别检查 375px、768px 和 1280px，因为当主视觉视频在移动端悄无声息地失效时，别人就会说“我还以为你检查过所有内容”。

scripts/shots.mjs 可以用一条命令截取这三种宽度的画面，让审查只需一瞥，而不是一项苦差事。

5. 用团队的词汇进行评审

评审作品时会使用一组精简且统一的词汇。将每个词都视为一种命名缺陷类别，并在展示前逐项检查，因为自己发现问题，远比别人指出问题代价低：

杂乱 · 被截断 · 格格不入 · 奇怪 · 过于复杂 · 太过普通 · AI 垃圾 · 负向留白 · 滚动过多 · 不相关 · 不流畅

references/taste.md 将每一项都转化为可检查的标准。

6. 在客户查看前进行多视角审核

在客户预览前，总会有人提出类似“检查并验证，不要留下任何疏漏”的要求。一位审核者会漏掉一些问题，而评审组能发现这些问题，因此要从多个独立视角进行检查，然后根据源文件逐一验证每项发现再保留，因为未经验证的发现比它们节省的时间更耗时。

references/audit.md 介绍了五种视角，scripts/design-audit.mjs 则是一个可直接运行的工具脚本。

7. 发布后检查线上网址

部署完成不代表工作结束。请在真实手机视口中加载实际域名，并确认你修复的问题在生产环境中确实已解决。

付费生成成本关卡

如果某个步骤会产生费用（图像或视频生成、付费 API），请先打印计划和预估费用，并征得同意后再进行。经过长时间规划后，昂贵的渲染结果却不对，这是本团队一个具体且令人难忘的失败案例。generate 技能会强制执行预算上限，是正确的起点。

团队硬性规则

• 任何地方都不得使用 em dash 或 en dash，包括代码、文案、注释或提交消息。请使用逗号、冒号、句号或括号。
• 每个页面的移动端导航都要保持一致，并删除过时页面，不要任其荒废。
• 将字体以 woff2 格式自行托管，并预加载最重要的两个字体。这两个线上网站都这样做，因此加载起来才会如此迅速。
• 泰语和拉丁字母应尽可能使用同一字体。The Assembly 使用 LINE Seed Sans TH，这款字体同时支持两者，省去了处理整套回退字体的问题。
• 无障碍不是可有可无的润色：要有真实的对比度、明确的焦点状态和准确的替代文本。请抽取渲染后的像素进行检查，不要只相信令牌值。

此技能包含的内容

# The review gate: every route, three widths, with the numbers that matter.
node ~/.claude/skills/prom-design/scripts/shots.mjs \
  --base http://127.0.0.1:8788 --routes / /gallery /contact --out ./shots
# reports HTTP status, scroll height in screens, horizontal overflow, broken
# images, rendered em/en dashes, console errors. Then LOOK at the PNGs.

# Generate the six-agent audit, with your paths and priors filled in.
node ~/.claude/skills/prom-design/scripts/design-audit.mjs \
  --repo /path/to/source --base http://127.0.0.1:8788 \
  --routes / /events --tests 271 --out ./audit-workflow.js
# then run it with your agent's workflow orchestrator if it has one, or hand
# each generated prompt to a subagent in sequence; both work.

# A copyable design contract to start from.
cp ~/.claude/skills/prom-design/assets/tokens-starter.css ./src/tokens.css

# Installed as a plugin instead of a plain skill? The files live in the plugin
# cache; locate them once with:
#   find ~/.claude/plugins -path '*prom-design*' -name shots.mjs

shots.mjs 会自行在 npx 缓存中查找 playwright-core，因此通常无需安装。如果找不到，它会告诉你要运行哪条命令。

接下来该做什么

阅读与你当前步骤对应的参考文档。这些文档适合逐篇阅读，而不是一次读完。

文件	阅读时机
references/taste.md	判断这里所说的“好”是什么，或在评审前进行自检
references/tokens.md	编写设计约定或启动新项目
references/webapp.md	**将登记界面作为核心工具。**密度预算、页脚导航、内容压缩、提升体验的组件、21st.dev
references/patterns.md	构建特定组件
references/imagery.md	**任何包含照片的页面。**选择符合场景的图片、免费来源、标注、性能
references/copy.md	编写任何面向用户的文案
references/stack.md	搭建应用骨架或资源流水线
references/audit.md	准备客户预览

Blender 360 虚拟导览使用完全不同的工具链，不属于此技能。