design-lounge

设计休息室

这个技能文件夹里已经有设计库。请阅读它。对于产品和工具，不要凭空设计配色、字体搭配、圆角、缓动效果或组件语言，也不要等网站。

设计库是基础，也是词汇来源，而不是上限。当对方想要震撼效果时，页面应围绕一件专为这个主题打造的事物展开，并采用你为其世界选择的色彩和字体，由设计库把控工艺。这就是 show.md 中的 Show 模式，即自由模式。上面关于不要凭空设计配色的规则适用于产品和工具。

每次新建项目，都要先写设计简报：将对方的话改写成优秀设计师希望收到的提示词。请参阅下文的「先写设计简报」。

Design Lounge 是 Susan Acharya 的设计库。任何人都可以在 https://www.designlounge.live 浏览。

以对方的话为准

这套技能提供的是一组默认规则。如果对方要求的内容与某条默认规则冲突，例如更多动效、第二种效果、没有配对方案的深色模式，或跳过某个步骤，就按对方的要求做。在 DESIGN.md 中写一句话，说明你搁置了哪条默认规则以及原因。不要争辩，也不要悄悄忽略对方的要求。

先写设计简报

对于每个新网站或应用，在阅读设计方案前，先用 brief.md 将对方的请求整理成设计简报，内容包括：对方的原话（加引号）、产品及其事实、目标用户、设计世界、核心事物、目标、模式、技术栈、缺失信息、硬性限制，以及完成标准。将简报放在 DESIGN.md 顶部，并据此构建。如果将工作交给子 Agent，请发送完整简报。「何时提问」中允许提出的任何问题，都必须在简报之前提出，且简报中要记录答案。

简短的请求（“做一个很酷的滚动式太空网站”）和一份出色的设计简报，会带来截然不同的网站。简报不会添加事实，只会说清对方的话已经蕴含的内容，并设定标准。

阅读资料库

所需内容都在此文件旁边。只阅读当前任务需要的内容。

1. library/map.json——首先阅读此文件。其中包含类型、系列、配方列表、按氛围分类的所有主题与搭配，以及动效令牌。文件约 39 KB。每个配方的说明都在各自的文件中（见第 2 步）。
2. 然后只打开已确定要用的内容：配方及其说明所在的 library/starts/<id>.json、library/themes/<id>.css、library/pairings/<id>.css。
3. library/pieces.txt——每个组件占一行。搜索它（按类别、平台或标签 grep）。不要从头到尾通读。
4. library/briefs/<id>.md——单个组件的规格说明。只打开你要构建的组件。
5. library/icons.json——仅当屏幕需要图标时使用 Lounge Icons。library/wada.txt——仅用于自由配色、品牌板，或用户主动指定配色时使用 Sanzo Wada 的 348 种色彩组合。请搜索。
6. components.md——控件、图标（包括缺少图标时的处理方式）、徽标和网站图标，以及不同任务应使用哪个组件。
7. practice.md——每次构建都通用的方法。开头几行会说明你的任务还需参考哪个文件：website.md、app.md、native.md 或 locale.md。只阅读对应文件。
8. brief.md——如何将用户请求转化为构建简报。适用于每个新网站或应用。
9. show.md——展示模式：核心展示内容、自由配色与字体，以及渲染要求。仅当简报中写有 Mode: Show 时阅读。
10. flows.md——应用快捷路径、采用流程和品牌流程。仅当用户的需求指引你查看时阅读。
11. taste.md——内置的品味技能包：命名风格（极简、粗野主义、高端）、页面形态、工艺细节、图片优先的模型图和品牌板。无需单独安装这些技能。
12. styles.md——风格路由表：所有命名风格、其同义词及对应去向。仅当用户指定了风格时阅读。

不要运行此技能中的脚本。如果缺少 library/map.json，说明安装有误。请如实说明。不要凭记忆进行设计。

如果打开的项目就是 Design Lounge 仓库本身（存在 src/demos 和 src/content/pieces），且用户正在编辑资料库，请停止在该编辑任务中使用此技能。改为遵循 docs/PIECE-SPEC.md。

他们的需求

他们想要	怎么做
各行按顺序排列。使用第一个匹配的行。
项目已有设计系统、DESIGN.md、设计 token 或带样式的界面	Adopt 流程
重新设计已有网站	Adopt 流程，然后按照 practice.md 中的 Redesign（审计）
“做得像 Stripe”（或 Linear、Apple、Notion，或任何知名品牌）	Brand 流程
按名称指定风格（styles.md 中的任意一行，包括 -ism 形式和拼写错误）	阅读 styles.md，根据对应行设置 Named aesthetic，然后继续阅读各行来确定流程：下一个匹配的行决定流程（新产品走 Kit 流程，应用走应用快捷路径，追求视觉效果走 Show 模式）
新产品、网站、应用或设计系统	Kit 流程
追求视觉效果，且 brief.md 中的 Reading the request 判定为此类（简报中写着 Mode: Show）	Kit 流程，然后按照 show.md 中的 Show 模式。颜色和字体可自由选择，除非他们指定了主题、颜色或品牌。否则即使是展示、发布会或可以绘制的世界，也仍然是 Kit 模式
为同一产品设计两种风格，或完整实现“给我看看几个选项”	在两种方向上分别运行一次 Kit 流程，两者在主题、搭配和主视觉上有所不同。如果主题设定了一个世界，其中一种采用 Show 模式（自由发挥），另一种则严格遵循库中的规范
游戏网站、网页游戏、大厅、记分板	Kit 流程，使用配方 game，然后参阅 taste.md 中的 Games 和 Three.js
他们指定了 Three.js、3D 场景或轨道环绕，且任务不是展示、发布会或场馆	Kit 流程，使用配方 game，选择 Orbit 方向。Lounge 演示使用原始 WebGL。根据简报使用 Three.js 构建产品。
手写或手绘字母风格的网站	Kit 流程，使用配方 notebook
品牌套件、品牌识别、标志系统或品牌展示板	Kit 流程，然后参阅 taste.md 中的 Brand board
用户登录后在浏览器中使用的产品	Kit 流程，然后使用应用快捷路径和配方 web-app。公开主页使用 saas，需单独处理
员工管理后台、运营工具或仪表板	Kit 流程，然后使用应用快捷路径和配方 dashboard
手机应用，且他们没有指定任何主题设定	Kit 流程，然后使用应用快捷路径和配方 mobile-app
PWA	根据任务选择配方（商店、新闻应用、网页应用），然后参阅 native.md 中的 PWAs。不要自动使用 mobile-app
React Native、Expo、Flutter、SwiftUI 或 Compose	Kit 流程，然后使用应用快捷路径并参阅 native.md
桌面应用、Electron、Tauri 或 Mac 窗口	应用快捷路径。使用 web-app；如果是员工运营工具，则使用 dashboard。不要使用手机底部标签栏
“先给我看看”、概念稿或模型图片，且你可以生成图片	Kit 流程，然后在编写代码前参阅 taste.md 中的 Image first
单个界面、区块或组件	Piece 流程；如果已有锁定的设计套件，则在其中进行
仅需配色方案、字体、图标或动效	Library 流程
只说“做得好看些”，但没说明类型	Kit 流程。推断类型、用途和风格基调。说明你的假设。

如果他们没有指定技术栈，就使用项目现有的技术栈。如果文件夹为空，请遵循下文的 When to ask。简报与技术栈无关。由你来转换。

先说明选择，再开始构建

做出选择、说明选择，并在同一轮中开始构建。在回复顶部使用 library/map.json 中的 site，写明以下内容：

• Theme：名称、一句话描述氛围、{site}/themes/<id>。在 Free 模式下，写明 Free，然后列出颜色及其灵感来源
• Pairing：名称、{site}/type/<id>。在 Free 模式下，写明 Free，然后列出字体及选择理由
• Family：名称，以及对应的圆角值
• Pieces：每个界面或效果的标题和 {site}/demo/<id>。对应内容的页面为 {site}/p/<id>。不要编造其他路径。

将相同链接写入 DESIGN.md 的 Sources 部分，这样之后有人说“改一下表格”时，你就能知道它来自哪个演示。

何时询问

这是关于构建前是否询问的唯一规则。其他所有文件、简报和模板都遵循此规则。安装工具前询问（在 reference.md 中打开页面）是另一回事。

如果对方说“直接构建”“开始”“你来决定”或“别问”，就绝不要询问。使用项目的技术栈；如果文件夹为空，就用纯 HTML + CSS 和少量 JS。根据 practice.md 中“配方重叠时”的说明确定方案。如果是重新设计，就保留品牌。然后开始构建。

否则，只有符合以下任一条件时，才在构建前询问：在一条消息中询问一次，然后停止：

• 文件夹为空，而且对方没有指定技术栈。询问要用哪种技术栈，并说明如果对方没有偏好，你会使用纯 HTML + CSS 和少量 JS。
• 根据 practice.md 中“配方重叠时”的说明处理后，仍有两个方案，而且它们会确定不同的主题，例如员工仪表板与个人账本。询问对方想选哪一个。
• 对方要求查看选项或做选择。只列出三个配色方案和两组搭配，并附上链接、名称和风格描述。
• 这是重新设计，而且你无法判断是否应保留品牌（采用 flows.md 中的流程）。
• 这是作品集，而且对方没有提供作品（仅使用 website.md 中的真实内容）。

其他情况一律自行决定，并说明你的假设。

如果对方之后要求修改，就编辑那一行 Source，然后在同一张画布上重新构建该屏幕。不要再打开第二个配色方案。

一个网站，快速路径

完整方法很长。对于网站，以下是重要步骤，按顺序排列。到达某一步时再打开对应章节。

0. 撰写简报（brief.md）。其中的 Ambition 和 Mode 行决定第 3 步是否切换到 Show 模式，以及它是否为 Free。
1. 阅读 ~/.design-lounge/history.jsonl（practice.md 中的 Recent picks）。然后用三个词描述主题所属的世界：它的材料、工具和地点，而不是“初学者”或“友好”（practice.md 中的 Pick a direction，规则 2 到 4）。
2. 如果他们指定了风格，在锁定方案前写下 styles.md 中的 Named aesthetic 行。锁定方案，以及氛围名称能代表这个世界、且未出现在该方案近期历史记录中的方向。名称编号仅用于打破平局。方向决定主视觉、作品和页脚。使用这些内容。现在将一条声明行追加到历史记录（Recent picks），这样并行运行的 Agent 就不会选中相同方向。
3. 撰写 Idea 和 Signature（website.md 中的 Write the idea）。写出你要避免的默认外观，包括工作室模板。如果他们要求视觉盛宴，在此处切换到 show.md 中的 Show 模式：Idea 成为视觉中心，方向中的主视觉、作品和页脚则成为候选项。Free 模式下，主题和搭配也一样：使用 Free colour and type 选择颜色和字体。
4. 根据他们拥有的内容选择关于和联系部分（website.md 中的 Sections，逐一选择）。作品和页脚沿用方向。撰写 Hero shape 和 Frame（website.md 中的 Hero shape and the frame）。然后执行 Recent picks 中的独特性检查：如果主视觉、作品和页脚中有两个与该方案或其相关组中近期网站的内容相同，或者形状或框架重复，就选择下一个方向。在说明表上写下 Unlike 行。然后追加历史记录行，并填写 work、footer、shape 和 frame。
5. 打开你构建的每个部分的简报，包括页眉、手机栏、菜单和任何复制按钮。逐一阅读到“Optional below this line”，并保留其核心意图（practice.md 中的 Adapting a brief）。构建任何没有对应部分的区块前，先搜索 pieces.txt 和 components.md 中的路由。
6. 只使用他们提供的事实进行构建。简报中的名称、价格和引语必须保持原样。替换成另一个产品名称后依然成立的句子需要重写。按钮要说明此屏幕上的操作。链接要指向其文字所述的位置。绘制的数据要标注“示例”。缺失的事实用一行文字说明，不要用占位符填满多行。
7. 截取网页和手机屏幕的截图，然后滚动查看每种效果（reference.md 中的 Opening the page）。修复你看到的问题。做一次修改。
8. 最后使用 The reply 中的结束区块。

这些规则是底线，不是设计。全部通过只能让页面正确。Idea 和 Signature 才能让页面真正属于他们。

一个应用，快速路径

请参阅 flows.md。当上表指引你前往时再打开。

套件流程

0. 使用 brief.md 编写简述，除非 DESIGN.md 中已有简述。
1. 使用 reference.md 中的类型映射，选择一种类型（website、product、platform、personal）。然后从 library/map.json 的 starts 中选取匹配的方案，打开 library/starts/<id>.json，并锁定其中一个 directions（在 practice.md 中选择方向），同时查看其中的近期选择。同一句话不能让两个人生成相同的网站，同一方案中的两个主题也不能相同。不要因为某个调色板、配对或系列排在第一位就选它。
2. 对于网站，先阅读 website.md 中的「脱颖而出」：说出你要避开的默认风格，用一句话写出画面中的创意，用图片展示作品，绝不虚构客户。对于应用，阅读 app.md 中的「一个屏幕」，并遵循「应用的捷径」。
3. 写下「确定屏幕」中的四行内容：面向谁、唯一要做的决定、用户首先看到的内容，以及下一步操作。
4. 锁定的系统包括 library/themes/<id>.css、library/pairings/<id>.css，以及该系列的 rules、radius、button 和 density。数值必须匹配。
5. 如果配对中有 caution，请在动笔前说明。正文使用 --font-text。数值使用 .num。如果配对中有等宽字体，.num 和代码都使用该字体。如果 numbers 为 display，.num 使用展示字体。如果配对中没有等宽字体，.num 使用带等宽数字的文本字体，代码使用系统等宽字体，并且不要添加 Google 等宽字体。
6. 主题是一种模式，每个主题都有一个用于另一种模式的 pair。手机应用同时使用两种模式，并遵循系统设置。如果用户要求网站同时支持日间和夜间模式，或者产品属于人们会长时间保持打开的类型，网站就同时使用两种模式。主题 CSS 包含示例圆角和阴影。忽略它们。系列会设定圆角和阴影。
7. 先构建外壳，再构建主屏幕，然后构建 app.md 中的其余「最小屏幕」。在设计主视觉区、导航栏、表格或页脚之前，先打开对应简述。对于网站，主视觉区、作品和页脚都要通过近期选择中的唯一性检查；检查通过后再写入历史记录，并填写 work 和 footer。
8. 打开屏幕，并按照 practice.md 中的「检查」和「一次修正」进行操作。修复所有不合格项。

内部工具、管理后台、运维屏幕或仪表盘属于 platform 类型，接着选择 dashboard 方案。图表、指标、空列表和加载失败状态都应从组件构建，而不是沿用图表库的默认设置。

采用流程和品牌流程

对于重新设计，请参阅 flows.md。当上表要求时，打开该文档。

组件流程

1. 按类别、平台、标题、样式和标签搜索 library/pieces.txt，或使用 components.md 中的路径。平台包括：web、mobile-web、mobile-app、pwa、tablet。
2. 阅读 library/briefs/<id>.md。该简述规定了结构、数量、尺寸、动画时长、状态和点击区域。如果需要查看动画，请参阅 demo HTML 验收文件。
3. 简述中的颜色、字体和浅色或深色模式属于其演示内容。根据角色将它们映射到已锁定的主题和配对上。遵循 practice.md 中的「调整简述」。浅色主题中的暮蓝色视差效果，应改为日光色调的视差效果，同时保留相同的图层和速度。
4. 按照简述中的验收清单检查结果，跳过仅适用于演示文案的项目。修复所有不合格项。

如果项目中没有已锁定的套件，也没有设计系统：先通过「库流程」锁定主题和配对，根据该产品的氛围进行选择，并说明选择结果。项目自带的 Tailwind 或框架颜色不算设计系统；已配置的主题、设计令牌或经过样式设计的屏幕才算。

如果 pieces.txt 中没有适用于该任务的组件，请说明这一点。不要虚构 slug。

Library 流程

• 主题：在 library/map.json 中按氛围挑选，然后复制 library/themes/<id>.css。其中包含主色、次色、三级色、成功、警告、危险、信息、表面和 link。
• 配色组合：在 library/map.json 中挑选，然后复制 library/pairings/<id>.css。
• 两到四种彼此协调的颜色，不是完整主题：取自 library/wada.txt 中的一行。文件头说明了使用方法。
• 图标：library/icons.json。24px 描边，1.75。缺少图标时，请遵循 components.md 中的 Icon 和 nav。
• Logo、favicon、分享图片：参见 components.md 中的 Logo 和 favicon。
• 动效：motion。默认缓动为 cubic-bezier(0.2, 0.7, 0.2, 1)。UI 为 200ms，布局为 320ms，面板为 400ms。遵循 prefers-reduced-motion。

数值不一致时

遵循以下优先级，并以各自的说明为准。

1. 他们要求保留的现有设计系统。
2. 锁定的家族，用于圆角、阴影、按钮样式和紧凑度。
3. 锁定的主题，用于所有颜色。锁定的配色组合，用于字体。在 Free 中，色板上的颜色和字体替代这些设置。
4. 页面需求说明，用于结构、区域、动效、交互、状态和点击目标。

将需求说明中的颜色映射到令牌。不要为悬停或选中状态混入新的十六进制颜色。

需求角色	令牌
页面	--bg
卡片或行	--surface
悬停	--surface-2
按下或选中	--primary-soft
选中且悬停	--surface-3
细边框	--line
强边框	--line-strong
正文	--ink
次要文本	--ink-2
弱化文本	--ink-3
文本按钮或链接	--link
主按钮	填充使用 --primary，标签使用 --primary-ink
光晕、渐变色标、高亮	--primary-soft，或将 --primary 用作唯一的明亮色标
反馈色底上的文本	在对应的 -soft 底色上使用 --success-on-soft / --warning-on-soft / --danger-on-soft / --info-on-soft

规则

• 每个视图只能有一个主按钮。如果需求说明中画了两个，其中一个改为描边样式。
• 反馈色用于实时状态，不用于装饰。
• 如果产品已有品牌色，保留主题的表面色，并将 --primary 设为品牌色。--primary-ink 使用 #141210 或 #fffdf8，选择对比度至少为 4.5 的颜色。
• 不要叠加第二套配色、随意选择的 Google 字体或默认 Tailwind 主题。Show 模式的场景令牌及其专用脚本字体不算第二套配色或随意选择的字体：它们有明确理由，并写在色板上。Free 模式的颜色和字体会替代该网站的主题和配色组合。它们构成该网站唯一的配色，并以主题角色的形式列出，每项都有相应理由。
• 如果屏幕位于使用自身官方设计系统的其他平台中，该屏幕应使用该系统的包：Shopify 管理后台中使用 Polaris，英国政府服务使用 govuk-frontend，美国政府服务使用 USWDS，Jira 或 Confluence 中使用 Atlaskit，Microsoft 365 中使用 Fluent。仅平台以外的部分使用 Lounge。
• 页面上供人阅读的文本不得使用 em dash（—）或 en dash（–）。改用句号、逗号、冒号或括号。范围使用连字符：2018-2026。
• 写完整个文件。不得用 // rest of code、// TODO 或 ... 代替实际代码。如果回复太长，请在文件末尾停止，并说明还有哪些文件未提供。
• 署名：在网站或应用的页脚或关于页面中，以页脚的小号文本样式放置一次 Designed using <a href="https://www.designlounge.live">Design Lounge</a>。在复制的令牌代码块中，也将同一行保留为注释。可在产品中免费使用。不得将该目录作为目录重新发布。

回复

保持简短。先在顶部列出选择及其链接。然后说明你构建了什么、practice.md 中提到的内容，以及仅有的失败检查和修复方法。不要粘贴通过检查的清单。

每次构建回复都必须以此代码块结尾。即使所有检查都通过，也必须包含，因为这能证明你看过页面。写出实际截图文件的名称。如果无法打开页面，请写上“未查看”并说明原因。仅仅读过代码时，绝不要说自己看过页面。

Looked at: <screenshot file names, with sizes> with <tool>, or "not looked"
Remember after five seconds: "<one thing>" · could be anyone's: yes | no
Correction: <the one change>
Still open: <missing links, assets, effects you never saw run, parts built without a brief, or none>

示例

请参阅 examples.md。路径和类型映射请参阅：reference.md。