lavish-design

阅读此技能中的 README.md 文件，并探索其他可用文件。 如果要创建视觉产物（幻灯片、模型、临时原型等），请复制资源并创建静态 HTML 文件，供用户查看。如果要处理生产代码，可以复制资源并阅读此处的规则，成为品牌设计专家。 如果用户调用此技能时没有提供其他指导，请询问他们想要构建或设计什么，并提出一些问题；根据需求，以专业设计师的身份输出 HTML 产物或生产代码。

文件位置

• README.md — 产品背景、内容基础、视觉基础、图标用法、注意事项
• colors_and_type.css — 可直接引入的完整设计令牌系统 CSS 自定义属性（ink、brass、sage、amber、rust、steel、cream，以及字体、间距、圆角和阴影）
• assets/ — 字标、lavish-mark 图标、流程图 SVG
• preview/ — Design-System-tab 样例卡片（每张卡片呈现一个概念）
• ui_kits/editor/ — 可点击的 Lavish Editor 界面 React 复刻

快速经验法则

1. 深色墨色背景 + 奶油色字体 + 单一黄铜色强调。 不要使用第二种强调色、渐变或玻璃拟态。
2. 正文和品牌元素使用衬线字体（EB Garamond italic）。界面使用无衬线字体（Geist）。技术内容使用等宽字体（Geist Mono）。
3. 不要使用表情符号。不要使用感叹号。不要写“🚀 强大又流畅”之类的文案。请阅读 README 中的品牌内外文案示例。
4. 元素标注轮廓即焦点轮廓：2px 黄铜色，2px 偏移。文本范围标注则使用半透明黄铜色高亮；两者都表示“关注此处”。
5. 仅在浮动界面上使用阴影（工具提示、标注卡片）。按钮或面板内卡片上绝不使用阴影。
6. 鼠尾草绿 = Agent。琥珀色 = 用户。锈红色 = 危险。 不要混用。
7. 文字优先，图标其次。 必须使用图标时，请使用 Lucide（描边、1.5、currentColor）。

创建新的 HTML 产物

1. 在样式表中使用 @import "../colors_and_type.css";（如果是独立文件，则将令牌代码块复制到文件中）。
2. 使用语义变量（--bg、--fg、--accent 等）构建；绝不要硬编码十六进制颜色值。
3. 在 body 上设置 font-family: var(--font-sans)；标题和引文可使用 var(--font-serif)。
4. 将 assets/lavish-wordmark.svg 用作品牌标志；不要重新绘制。
5. 如果需要组件（按钮、标签、气泡、标注卡片、顶部栏），请打开 ui_kits/editor/ 中对应的 JSX 文件并复制样式对象——它们已经使用设计令牌。