Back to Details

prom-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Prom Design

Prom Design

This style shipped real client work. The examples in this skill use two fictional stand-in brands, AURA Heights (a beachfront condominium) and The Assembly (a members' events web app), so the rules are shown at full specificity without exposing any client. The rules are the transferable part.
Two public skills are referenced as optional companions: 
impeccable
(design review) and 
design-dna
(screenshot to tokens). Everything here works without them. The Blender 360 tour mentioned in places is a separate toolchain and is not part of this skill.
该风格已应用于真实客户项目。本技能中的示例使用两个虚构替代品牌——AURA Heights（海滨公寓）和The Assembly（会员活动Web应用），因此可以完整展示规则细节，同时不会泄露任何客户信息。这些规则是可迁移复用的核心内容。
本技能可选搭配两个公开技能：
impeccable
（设计评审）和
design-dna
（截图转Token）。即使不使用它们，本技能的所有功能也能正常运行。文中提及的Blender 360全景漫游属于独立工具链，不属于本技能范畴。

Start every job with the sixty-second intake

每项工作从60秒需求采集开始

Do not build first and ask forgiveness later. When this skill is invoked, and the user has not already answered these, ask BEFORE writing any code, in one short message, plain words, no design jargon:
  1. What is this page for, and who lands on it? (one line is enough)
  2. Should it sell or should it work? Offer the registers as a plain choice: "a page that makes people want it (cinematic) or a page that gets things done (instrument)?" If they hesitate, recommend one and say why in one sentence.
  3. Anything that must stay? Brand colors, a logo, existing copy.
Then do thirty seconds of thinking about the subject's WORLD before answering (what materials, weather, rooms, and objects live in this business), and present two or three named directions, each in one line: a name, the ground tint and accent as real hex values, the face pairing, and why it fits this subject. Recommend one and say why in one sentence. Example shape:
  1. Rain jar (recommended): cool green-grey ground 
    #EDF1EC
    , moss ink, fired-clay accent 
    #A65A33
    , Fraunces + Archivo. Fits a flower shop in a rainy hill town: the palette is the shop's own window on a wet morning.
  2. Night market: charcoal ground, paper-lantern amber accent, Newsreader + Archivo. Moodier, better if evenings are the business.
End with "pick one, mix them, or say just build it." One round of questions, maximum. The intake exists to make newcomers feel steered, never interrogated, and the options exist so they choose by recognition instead of having to describe taste they do not have words for.
不要先开发再寻求谅解。当触发本技能且用户尚未回答以下问题时，请在编写任何代码前，用简洁直白的语言（无设计术语）一次性询问：
  1. 该页面的用途是什么？目标受众是谁？（一句话即可）
  2. **它是侧重转化还是功能？**提供清晰选项：“是打造让人产生欲望的页面（电影感风格），还是高效完成任务的页面（工具感风格）？”若用户犹豫，推荐一种风格并给出一句话理由。
  3. **有哪些必须保留的元素？**品牌色、Logo、现有文案等。
之后花30秒思考业务所处的场景（该业务涉及的材质、环境、空间、物品），然后提出2-3个命名方向，每个方向用一句话说明：名称、真实十六进制值的底色和强调色、字体组合，以及适配该业务的理由。推荐其中一个并给出一句话理由。示例格式：
  1. 雨罐（推荐）：冷灰绿底色 
    #EDF1EC
    、墨绿正文、陶土色强调色 
    #A65A33
    ，搭配Fraunces + Archivo字体。适合多雨山城的花店：调色板如同雨天早晨花店橱窗的色调。
  2. 夜市：炭黑色底色、纸灯笼琥珀色强调色，搭配Newsreader + Archivo字体。氛围更浓郁，适合主打夜间业务的场景。
最后以“选择其一、混搭风格，或直接开始开发”收尾。最多仅进行一轮提问。需求采集的目的是引导新手，而非盘问他们；提供选项是为了让他们通过直观认知做出选择，无需用语言描述自己不擅长表达的审美偏好。

Mobile is the default, not the afterthought

移动端是默认优先，而非事后补充

Assume most viewers are on phones. These defaults apply to EVERY build unless the user says otherwise, and they come from the webapp playbook (
references/webapp.md
), which is not just for web apps:
  • Scroll budget. A page should land its argument within about 3.5 phone screens (the density budget). When content wants to sprawl, compact it: facets, tabs, or a horizontal shadow gallery instead of another stacked section.
  • Side-scroll galleries carry an affordance. Any horizontal scroller shows a peeking next card, a subtle edge fade, and on first view a brief swipe cue. Never a naked overflow that looks like the content just got cut.
  • Real tap targets. Buttons and cards at thumb size (44px minimum), the primary action reachable in the bottom half of the screen, and a bottom tab bar the moment a product has three or more destinations.
  • Coach marks, once. If a surface has a gesture the user cannot guess (swipe, long-press, drag), a one-time overlay teaches it, then never appears again.
  • The viewport meta is not optional, and every page must measure 
    scrollWidth == viewport width
    at 390px. Internal scrollers scroll themselves, the page never scrolls sideways.
The cinematic register on a phone is a smaller cinema: fewer sections, larger type, the same argument. The instrument register on a phone should feel like a native app, not a shrunk website.
假设大多数用户使用手机浏览。以下默认规则适用于所有开发，除非用户另有说明，这些规则来自Web应用指南（
references/webapp.md
），并非仅适用于Web应用：
  • 滚动预算。页面应在约3.5个手机屏幕高度内传递核心信息（密度预算）。当内容过多时，进行压缩：使用分面组件、标签页或横向阴影画廊，而非新增堆叠区块。
  • 横向滚动画廊需提供交互提示。任何横向滚动组件需显示下一张卡片的边缘、细微的边缘渐变效果，首次加载时显示短暂的滑动提示。绝对不能出现看起来像是内容被截断的裸溢出效果。
  • 真实可点击区域。按钮和卡片需达到拇指操作尺寸（最小44px），主要操作按钮需位于屏幕下半部分可触及区域；当产品有三个及以上页面时，需添加底部标签栏。
  • 引导提示仅显示一次。若页面存在用户无法直觉发现的手势操作（滑动、长按、拖拽），显示一次性覆盖层进行引导，之后不再出现。
  • viewport元标签是必填项，所有页面在390px宽度下必须满足
    scrollWidth == viewport width
    。内部滚动组件自行滚动，页面整体不得横向滚动。
移动端的电影感风格是缩小版的影院体验：区块更少、字体更大，核心信息不变。移动端的工具感风格应具备原生应用的质感，而非缩小版的网页。

Why this skill exists at all

本技能的存在意义

Most design skills, 
impeccable
and 
high-end-visual-design
included, are built to invent a fresh point of view for every brief. That is correct for agency work, and 
impeccable
even warns itself against converging: if the last surface was restrained-on-cream, the next one must not be.
This skill does the opposite on purpose. It carries one aesthetic that has already been paid for, so a newcomer can produce work in that idiom without having taste yet. Taste is the slow part. A proven system is the shortcut.
Use both. 
impeccable
owns the universal laws (OKLCH colour handling, motion curves, the six absolute bans, the AI-slop test). This skill owns the specific house answer and the client workflow around it. Where they disagree, note it out loud rather than silently picking, and see 
references/taste.md
for the one place they genuinely conflict (the serif choice).
大多数设计技能（包括
impeccable
和
high-end-visual-design
）都是为每个需求创建全新的视觉方向。这在代理机构工作中是正确的，
impeccable
甚至会提醒自己避免风格趋同：如果上一个项目是米色极简风格，下一个项目就不能再用。
本技能则刻意反其道而行之。它承载一种已被验证并付费的美学风格，让新手无需具备审美能力就能产出该风格的作品。审美能力需要长期培养，而已验证的系统是捷径。
可以结合使用两种技能。
impeccable
负责通用规则（OKLCH色彩处理、动效曲线、六大绝对禁令、AI劣质内容检测）。本技能负责具体的专属风格和客户工作流程。若两者存在分歧，需明确指出而非默默选择，可参考
references/taste.md
中唯一真正冲突的部分（衬线字体选择）。

First decision: which register

第一个决策：选择哪种风格类型

Everything downstream depends on this. The two builds look nothing alike because they answer different questions.
Cinematic (AURA Heights)Instrument (The Assembly)
The user isdeciding whether to caretrying to get something done
Success isa feeling, then an enquirya completed task, fast
Layoutfull-bleed sections, scroll narrativedense cards, facets, lists
Typedisplay serif + letterspaced sansone sans, many sizes
Motionambitious, first-load allowedfunctional only
Mobilea smaller cinemaa native-feeling app with a tab bar
Verdictmarketing site, launch, brandbooking, dashboard, catalogue, account
If the answer is genuinely both (a marketing front door plus a logged-in app), build them as two registers under one token system rather than compromising into a mush. The Assembly does exactly that: a cinematic home surface sitting on top of an instrument.
Write the register down before touching a file. It decides the type stack, the density, and what counts as a defect later.
后续所有工作都取决于此。两种风格的成品截然不同，因为它们解决的问题不同。
电影感风格（AURA Heights）工具感风格（The Assembly）
用户状态正在决定是否感兴趣正在完成某项任务
成功标准先产生情感共鸣，再引发咨询快速完成任务
布局全屏通栏区块，滚动叙事高密度卡片、分面组件、列表
字体展示型衬线字体 + 字间距加宽的无衬线字体单一无衬线字体，多种字号
动效富有表现力，允许首屏加载动效仅保留功能性动效
移动端表现小型化的电影感体验类原生应用，带底部标签栏
适用场景营销网站、新品发布、品牌展示预订系统、仪表盘、商品目录、账户中心
若确实需要兼顾两者（营销首页+登录后应用），应在同一Token系统下构建两种风格，而非妥协混合成四不像。The Assembly就是如此：电影感的首页搭配工具感的内部功能。
在开始开发前明确记录所选风格类型，它将决定字体栈、内容密度以及后续的缺陷判定标准。

Second decision: the brand's own tokens

第二个决策：品牌专属Token

The register decides the architecture. The SUBJECT decides the palette and the faces, and this is where most one-style skills go wrong: they ship one palette and every client comes out beige. The law is the STRUCTURE of the tokens, never one fixed set of values:
  • A tinted ground, any temperature. Never pure 
    #FFFFFF
    or 
    #000000
    . The tint comes from the subject's material world: a florist in the rain is cool green-grey, a fintech ledger is cool paper-blue, a supper club is linen and smoke, a beachfront tower is warm ivory. Derive it, do not default to it.
  • Ink, not black. A dark that carries the ground's temperature.
  • One accent, from an object the business actually owns. Ember red from the oven, clay from the pots, ledger green from the money, gold from the brass. Name the object when you present the direction.
  • Faces carry the voice, so vary them. A short vetted menu, all on Google Fonts, each with a voice: Cormorant Garamond (candlelit, classical), Fraunces (warm, contemporary, slightly soft), Newsreader (editorial, dry), Spectral (precise, technical warmth), Libre Caslon Text (bookish). Pair with one working sans: Archivo, Public Sans, or IBM Plex Sans. For Thai, Trirong (serif) and Sarabun (sans) carry both scripts honestly.
  • Banned regardless of brief: the AI-slop pairings (Playfair Display over Montserrat, Inter for everything), purple-to-blue gradients, and reusing a previous client's palette because it worked there. Every demo brand in this repo runs a different direction derived this way; that variation is the proof the method works.
风格类型决定架构，业务主题决定调色板和字体，这也是大多数单一风格技能出错的地方：它们只提供一套调色板，导致所有客户项目都千篇一律。核心原则是Token的结构，而非固定的数值集合：
  • 带色调的底色，冷暖均可。绝对不能使用纯
    #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通用于所有场景）、紫蓝渐变、复用其他客户的调色板（即使之前效果很好）。本技能中的每个演示品牌都采用了不同的推导方向，这种多样性证明了方法的有效性。

The five laws

五大核心法则

These are the load-bearing ideas. Everything else is detail. Each is drawn from what actually shipped, and each has a reason, because a rule you understand survives contact with a new situation and a rule you memorize does not.
这些是支撑整个风格的核心理念，其他内容均为细节。每条法则都来自已交付的真实项目，且有明确理由——理解背后逻辑的规则能适应新场景，而死记硬背的规则则不能。

1. Specificity is the luxury signal

1. 精准性是高端的信号

Real numbers, real names, real distances. AURA Heights says "217.40 sqm", "38m above the bay", "ninety seconds from the pier". The Assembly says "3 of 12 places", "09:20 to 14:05", "8 min from Harbor Station, north exit".
Vagueness reads as either hiding something or not knowing. Precision is expensive to fake, so it signals the real thing. This is also the cheapest upgrade available on any page: replace every "spacious residences" with the square metres and the page gets more premium without a single CSS change.
Corollary: placeholder content is a design defect, not a content to-do. Lorem ipsum and "Feature One" hide exactly the quality this style depends on.
真实数字、真实名称、真实距离。AURA Heights会标注“217.40平方米”“距海湾38米”“步行90秒到码头”。The Assembly会标注“12个名额剩余3个”“09:20至14:05”“距港北站北口8分钟路程”。
模糊表述会让人觉得要么有所隐瞒，要么不够专业。精准性很难伪造，因此是真实品质的信号。这也是提升页面质感最廉价的方法：将所有“宽敞住宅”替换为具体面积，无需修改任何CSS就能让页面更显高端。
推论：占位符内容是设计缺陷，而非待填充内容。Lorem ipsum和“功能一”会完全掩盖本风格依赖的品质感。

2. Proof over promise

2. 用事实说话而非空口承诺

Every claim carries the evidence next to it. AURA Heights does not say the views are beautiful; it flew a drone to the exact position of nearly every residence and says "Not an artist's impression. Your view, on file." It does not say the materials are good; it says every material in the renders exists today in the sales gallery, go and touch it. It shows the render and the photograph side by side and invites the comparison.
The Assembly applies the same move to onboarding: "The dates and the places left are counted out of the database as the page is built, not written by hand. When a table fills, this number drops."
When you write a claim, ask what would make a sceptic believe it, then put that thing in the layout. This is what separates the style from ordinary luxury pastiche, which asserts and hopes.
每个主张旁边都需附带证据。AURA Heights不会说“景观优美”，而是用无人机拍摄了几乎每套住宅的真实视角，并标注“非艺术家渲染图。您的专属景观已存档”。不会说“材质优良”，而是标注“渲染图中的所有材质均已在销售展厅展示，欢迎触摸体验”。同时展示渲染图和实景照片，邀请用户对比。
The Assembly将同样的原则应用于引导流程：“页面加载时，剩余日期和名额会从数据库实时计算，而非手动编写。当名额满员时，数字会自动更新。”
撰写主张时，思考什么能让怀疑者信服，然后将其加入布局。这正是本风格与普通高端仿制品的区别——后者只是断言并寄希望于用户相信。

3. The ground is never white and the ink is never black

3. 底色永远不是纯白，正文永远不是纯黑

AURA Heights sits on 
#F7F2E9
warm ivory with 
#40301D
brown ink. The Assembly uses white paper but a green-tinted 
#141A18
ink and an 
#F3EEE3
secondary surface.
Pure 
#FFF
on pure 
#000
is the default of something unconsidered, and the eye reads the tint as intent even when it cannot name it. Tint every neutral a little toward the brand hue. 
impeccable
says the same thing in OKLCH terms and its reasoning is worth reading.
AURA Heights使用
#F7F2E9
暖象牙色底色搭配
#40301D
棕色正文。The Assembly使用白纸底色，但正文是带绿色调的
#141A18
，次要区域使用
#F3EEE3
。
纯
#FFF
搭配纯
#000
是未经思考的默认选择，即使用户无法说出原因，眼睛也能感知到色调背后的设计意图。将所有中性色向品牌色调微调。
impeccable
用OKLCH色彩模型阐述了同样的观点，其背后的逻辑值得一读。

4. Anything interactive must announce itself

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

This is the most-repeated correction in the entire project history, so treat it as the house's sorest point. AURA Heights labels its carousel "SWIPE, DRAG, OR USE THE ARROWS" and its comparison slider "Drag the line to move the sun". The 360 viewer got a side-arrow scroll cue specifically because a user could not tell it was scrubbable.
A control that only reveals itself on hover does not exist on a phone. If a thing can be dragged, swiped, scrubbed, or expanded, say so in words, show an affordance, or animate a hint on first view. Discoverability is not decoration.
这是整个项目历史中最常被修正的问题，因此需视为工作室的重点关注项。AURA Heights为轮播组件标注“滑动、拖拽或使用箭头”，为对比滑块标注“拖动线条调整太阳位置”。360度查看器专门添加了侧边箭头滚动提示，因为用户无法直觉发现它可以拖动。
仅在 hover 时显示的控件在手机上等同于不存在。若元素可拖动、滑动、 scrub 或展开，需用文字说明、提供交互提示，或在首次加载时显示动画引导。可发现性不是装饰。

5. On mobile, density is respect

5. 在移动端，密度是对用户的尊重

The instrument register exists because of a specific correction: too much negative space and too much scrolling, most people are on a phone, and they should not have to wade through sections. Build for the thumb: a bottom tab bar, content above the fold, facets instead of endless scroll, and real information on every card.
Airy full-viewport sections are a cinematic-register privilege. Spending them on an instrument is a defect.
工具感风格的诞生源于一个具体的修正需求：负空间过多、滚动内容过长，而大多数用户使用手机，他们不应被迫浏览大量无关区块。为拇指操作优化：底部标签栏、首屏核心内容、分面组件替代无限滚动、每张卡片都包含真实信息。
通透的全屏区块是电影感风格的特权。在工具感风格中使用这种设计是缺陷。

The anti-slop clause

反劣质内容条款

The sharpest critique this house gives is that a page reads as generic AI slop, fonts included. The instruction that followed matters as much: look at classpass.com, airbnb, agoda, then create our own style.
So the method is benchmark, then diverge:
  1. Name three real products that solve a similar interaction problem well.
  2. Say in one sentence each what they actually get right, mechanically.
  3. Take the mechanism, never the skin.
  4. State what this project will do differently, and why the brand demands it.
If the palette and type are guessable from the category name, it is the training-data reflex and it has to be reworked. 
impeccable
's category-reflex check covers this well.
工作室最尖锐的批评是页面看起来像通用AI生成的劣质内容（包括字体）。随之而来的指令同样重要：参考classpass.com、airbnb、agoda，然后创建我们自己的风格。
方法是：先对标，再差异化：
  1. 列出三个解决类似交互问题的优秀真实产品。
  2. 用一句话分别说明它们在机制上的优点。
  3. 借鉴机制，而非外观。
  4. 说明本项目将做出哪些不同调整，以及品牌为何需要这些调整。
如果仅从品类名称就能猜到调色板和字体，那就是AI训练数据的惯性思维，必须重新设计。
impeccable
的品类惯性检查很好地覆盖了这一点。

The loop

工作流程

This is the sequence the good work actually followed. The gates are the point; skipping them is how projects go wrong.
这是优质项目实际遵循的流程。关卡是关键；跳过关卡是项目出错的根源。

1. Brief, out loud, before any file

1. 口头确认需求简报，再开始任何工作

State the register, who the user is, what the one action is, and what the brand already owns (logo, photography, a document, an existing site). Client assets often arrive as a 
.docx
or a folder of photos, so extract the real brand from them rather than inventing one. 
design-dna
is the right tool when a screenshot or reference image is the input.
Gate: say the plan before building it. The standing instruction in this house is to explain how you will do it first. This is not ceremony; it is the cheapest possible place to catch a wrong direction.
明确风格类型、目标用户、核心操作，以及品牌已有的资产（Logo、照片、文档、现有网站）。客户资产通常以
.docx
或照片文件夹形式提供，需从中提取真实品牌信息，而非凭空创造。当输入为截图或参考图片时，
design-dna
是合适的工具。
关卡：开始开发前说明计划。工作室的常规要求是先解释将如何执行。这不是形式主义；这是发现错误方向成本最低的环节。

2. Design contract

2. 设计合同

Lock the decisions before components exist, because retrofitting a type scale across forty files is how a week disappears. Write tokens down, then treat them as the only source of truth: no raw hex or px in components.
Both proven token systems are in 
references/tokens.md
, including the semantic patterns worth stealing wholesale (radius by role, colour by state, named z-index, app-chrome heights). Read it before inventing your own scale.
在组件开发前锁定决策，因为在四十个文件中重新适配字体比例会浪费一周时间。记录Token，然后将其视为唯一的事实来源：组件中不得使用原始十六进制值或像素值。
两套经过验证的Token系统位于
references/tokens.md
中，包括值得直接借鉴的语义模式（按角色定义圆角、按状态定义颜色、命名z-index、应用栏高度）。在创建自己的比例前请先阅读该文件。

3. Build

3. 开发

Component patterns with real markup are in 
references/patterns.md
: the section-header triple, the stat counter row, the affordance-labelled carousel, the comparison slider, the proof pair, the event card, the bottom tab bar, and the first-run coach overlay.
If the register is instrument, read 
references/webapp.md
before building anything. It carries the density budget (a real number you measure), the footer tab bar spec, eleven compaction moves, and the delight components worth their weight: the shadow coach overlay, the spotlight cutout, the shadow gallery, tickers, skeletons and the sticky commit bar. It also covers borrowing 21st.dev components without inheriting their skin.
Photography is not optional. Zero images is a bug, not a restraint, and the usual failure is a pretty image with the wrong context (a tropical beach on a Chiang Mai page). 
references/imagery.md
covers choosing for context, the free sources and their licences, the Unsplash URL shape, how many and which, and the labelling rules that keep stock imagery inside the honesty system.
Copy is part of the design, not a later pass. 
references/copy.md
carries the voice, which is the least copyable and most valuable part of the whole thing.
If the project uses the house engineering spine (Cloudflare Workers, Drizzle, Wrangler, Vitest, a generated asset manifest), 
references/stack.md
describes it and the photo-derivative pipeline.
带真实标记的组件模式位于
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. The localhost review gate

4. 本地评审关卡

Never push to show work. The standing rule is to put it on localhost and hand over the link first. Then verify it yourself before claiming it works, at 375px, 768px, and 1280px, because "I thought you checked everything" is what gets said when a hero video silently fails on mobile.
scripts/shots.mjs
captures the three widths in one command so review is a glance rather than a chore.
绝对不要直接推送代码展示工作成果。常规规则是先部署到localhost，再提供链接。然后在375px、768px和1280px尺寸下自行验证，因为“我以为你已经检查过所有内容”是当英雄视频在移动端无声失败时会听到的话。
scripts/shots.mjs
可通过一条命令捕获三种尺寸的截图，让评审变得一目了然，而非繁琐的任务。

5. Critique, in the house vocabulary

5. 用工作室术语进行评审

Work is reviewed with a small, consistent set of words. Treat each as a named defect class and check for it before presenting, since finding your own faults is much cheaper than being handed them:
cluttered · chopped off · out of place · odd · over complicated · too generic · ai slop · negative empty space · too much scrolling · irrelevant · not seamless
references/taste.md
turns each into something checkable.
使用一套简洁一致的词汇评审工作。将每个词汇视为命名缺陷类别，并在展示前自行检查，因为发现自己的问题比被指出问题成本低得多：
杂乱 · 内容截断 · 位置不当 · 不协调 · 过于复杂 · 太通用 · AI劣质内容 · 无效负空间 · 滚动内容过多 · 无关内容 · 不流畅
references/taste.md
将每个词汇转化为可检查的标准。

6. Multi-lens audit before any customer sees it

6. 客户预览前的多维度审核

Before a client preview the question asked is always some version of "check and verify, no loose ends". One reviewer misses things a panel catches, so fan out across independent lenses and then verify each finding against the source before keeping it, because unverified findings waste more time than they save.
references/audit.md
describes the five lenses and 
scripts/design-audit.mjs
is a ready-to-run harness.
客户预览前的核心问题始终是“检查并验证，确保没有遗漏”。单个评审者会遗漏问题，而多个独立视角能覆盖更多内容，之后需验证每个发现是否符合原始需求，因为未经验证的发现会浪费更多时间。
references/audit.md
描述了五个审核维度，
scripts/design-audit.mjs
是现成的运行框架。

7. Ship, then check the live URL

7. 上线，然后检查真实URL

Deployed is not done. Load the real domain on a real phone viewport and confirm the thing you fixed is actually fixed in production.
部署完成不代表工作结束。在真实手机视口下加载真实域名，确认修复的问题在生产环境中确实已解决。

Cost gate for paid generation

付费生成的成本关卡

If a step spends money (image or video generation, paid APIs), print the plan and the expected cost and get a yes first. A costly render that came back wrong after a long planning phase is a specific, remembered failure in this house. The 
generate
skill enforces budget caps and is the right front door.
若某个步骤需要付费（图片或视频生成、付费API），需打印计划和预期成本并获得批准后再执行。在长时间规划阶段后生成的昂贵渲染图不符合需求，是工作室记忆深刻的失败案例。
generate
技能负责执行预算限制，是合适的入口。

House hard rules

工作室硬性规则

  • No em dashes or en dashes anywhere, in code, copy, comments, or commit messages. Use commas, colons, periods, or parentheses.
  • Mobile navigation is consistent on every page, and stale pages get deleted rather than left to rot.
  • Self-host fonts as 
    woff2
    and preload the two that matter. Both live sites do this; it is why they feel instant.
  • Thai and Latin should share one face where possible. The Assembly uses 
    LINE Seed Sans TH
    , which carries both and saves a whole fallback problem.
  • Accessibility is not optional polish: real contrast, real focus states, real alt text. Sample rendered pixels rather than trusting the token values.
  • 任何地方都不得使用破折号或短破折号，包括代码、文案、注释或提交信息。使用逗号、冒号、句号或括号替代。
  • 移动端导航在所有页面保持一致，过时页面需删除而非保留。
  • 以
    woff2
    格式自托管字体，并预加载最重要的两种字体。两个示例网站均采用此做法，这也是它们加载迅速的原因。
  • 泰语和拉丁语应尽可能共用一种字体。The Assembly使用
    LINE Seed Sans TH
    ，它同时支持两种文字体系，避免了回退字体问题。
  • 无障碍不是可选的优化：需保证真实对比度、真实焦点状态、真实替代文本。需采样渲染像素，而非仅依赖Token值。

What this skill bundles

本技能包含的工具

bash
undefined
bash
undefined

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
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

报告HTTP状态、屏幕高度的滚动长度、横向溢出、图片损坏、渲染的破折号、控制台错误。然后查看生成的PNG截图。

images, rendered em/en dashes, console errors. Then LOOK at the PNGs.

生成六Agent审核流程，填入你的路径和预设信息。

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
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

若你的Agent有工作流编排器，可直接运行；否则依次将生成的提示交给子Agent执行，两种方式都可行。

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
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

find ~/.claude/plugins -path 'prom-design' -name shots.mjs

—

`shots.mjs` finds `playwright-core` in the npx cache on its own, so there is
usually nothing to install. If it cannot, it tells you the one command to run.

`shots.mjs`会自动在npx缓存中查找`playwright-core`，通常无需额外安装。若找不到，它会提示你需要运行的命令。

Where to go next

下一步指南

Read the reference that matches the step you are on. They are written to be read one at a time, not all at once.
FileRead it when
references/taste.md
Deciding what "good" means here, or self-checking before a review
references/tokens.md
Writing the design contract or starting a new project
references/webapp.md
The register is instrument. Density budget, footer nav, compaction, the delight components, 21st.dev
references/patterns.md
Building a specific component
references/imagery.md
Any page with photographs. Choosing images with the right context, free sources, labelling, performance
references/copy.md
Writing any user-facing words
references/stack.md
Standing up the app skeleton or the asset pipeline
references/audit.md
Preparing for a customer preview
The Blender 360 virtual tour is a different toolchain entirely and is not part of this skill.
阅读与当前步骤匹配的参考文件。这些文件设计为逐个阅读，而非一次性全部读完。
文件阅读时机
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虚拟全景漫游属于完全独立的工具链，不属于本技能范畴。