frontend-design

此技能将指导你创建独具特色、达到生产级水准的前端界面，避免千篇一律的“AI 垃圾风”。请编写真正可用的代码，并格外注重美学细节和创意选择。

Refactoring UI 操作模型

在考虑使用效果之前，请按以下顺序决策：

1. 从功能入手，而不是先搭外壳：先设计具体的用户任务。导航、界面框架和装饰结构应服务于功能需求，而不是本末倒置。
2. 先用灰度建立层次：首先通过间距、大小、字重、对比度和分组，让界面清晰易懂。如果灰度下都行不通，颜色也救不了它。
3. 先定义系统，再处理细节：为间距、字体、颜色、圆角和层次使用受约束的尺度。减少选项，以降低决策疲劳，让结果更显得经过深思熟虑。
4. 通过具体手段塑造个性：通过字体选择、色温、边框圆角和语言来表达调性，而不是依赖随机效果。
5. 最后再打磨：只有在层次和系统已经完善后，才添加颜色、纵深、装饰、动效和润色细节。

关键：层次胜过装饰。系统胜过零敲碎打的调整。克制胜过盲目追逐潮流。

上下文收集流程

缺少项目上下文时，设计技能会产出千篇一律的结果。在开展任何设计工作之前，必须确认设计上下文。

必需的上下文——每项设计技能至少需要了解：

• 目标受众：谁会使用此产品？他们会在什么场景下使用？
• 使用场景：他们想完成哪些任务？
• 品牌个性／调性：界面应带给人怎样的感受？

具体技能可能还需要其他上下文——请查看该技能的准备部分，了解详情。

关键：你无法通过阅读代码库来推断这些上下文。代码只能说明构建了什么，无法说明它面向谁，也无法说明它应带给人怎样的感受。只有创建者才能提供这些上下文。

收集顺序：

1. 检查当前指令（即时）：如果已加载的指令中包含 设计上下文 部分，立即继续。
2. 检查 .better-web-ui.md（快速）：如果指令中没有，则读取项目根目录下的 .better-web-ui.md。如果该文件存在且包含必需的上下文，继续。
3. 检查旧版上下文文件（备用）：如果 .better-web-ui.md 尚不存在，则依次读取项目根目录下的 .better-ui.md 和 .impeccable.md。如果其中任一文件存在且包含必需的上下文，继续；但在可行时，优先迁移到 .better-web-ui.md。
4. 运行设置流程（必须）：如果这两个来源都没有上下文，必须立即运行 $setup，然后才能进行其他操作。不得跳过此步骤。不得尝试改为从代码库推断上下文。

框架与库指导

此技能库有意保持与框架和库无关。

当实现细节很重要时，请按以下优先级处理：

1. 首先检测并匹配现有项目技术栈
2. 其次尊重用户对新项目的明确选择
3. 仅当项目是新项目且未指定技术栈时，才使用默认矩阵

完整的优先级顺序、框架默认矩阵、问题简写和注意事项见框架默认值。需要决定样式、组件库、表单架构、表格架构或虚拟化默认设置时，请参考该文档。

当项目使用特定的前端框架或元框架时，请在做出框架相关的实现决策之前，查阅框架官方文档。

对于 Next.js，如果项目包含与版本匹配的捆绑文档，路径为 node_modules/next/dist/docs/，请在编写代码前阅读其中相关的 Next.js 文档。应以这些捆绑文档作为已安装版本的权威依据，而不要依赖过时的记忆。

当与 React 相关的备用默认方案适用时，请使用组件与区块策略，决定何时使用 shadcn/ui 基础组件进行组合、何时适合用区块加速开发，以及如何避免原样交付通用库输出。当请求适用于精选社区组件（例如主题控件、同意管理、文本动效、推荐语样式、轮盘选择器或幻灯片操作）时，请使用 React shadcn 加速方案。

当项目没有成熟的组件库，且需要从头构建或优化基础组件时，请使用组件解剖指南，了解按钮、卡片、复选框、下拉菜单、标签页、文本区域、Toast、切换开关、工具提示、手风琴、头像、徽章、边框、面包屑导航、图标、列表和提交操作等自定义组件的实用结构建议。

本文件夹中更聚焦于组件模式的参考资料——例如手风琴、面包屑导航、轮播图、滑块、日期输入、日期时间选择器、导航菜单、功能对比、配置器和复杂表格指南——遵循相同的默认原则。它们主要适用于自定义基础组件、无头组合或纯 HTML / CSS / JavaScript 实现。如果成熟的组件库已经很好地实现了某个基础组件，请主要使用这些参考资料来判断该模式是否适用、应如何组合、需要哪些默认设置和状态，以及如何围绕库组件实现响应式行为，而不是重写上游组件成熟的结构、语义或无障碍行为。

---

设计方向

将设计方向视为一套经过深思熟虑的约束体系，而非模糊的语气形容词。

• 功能优先：在围绕界面外壳进行设计之前，先确定此界面必须支持的主要工作流或使用场景。
• 目的：此界面要解决什么问题？谁会使用它？
• 品牌契合度：对于这家特定公司、产品、受众和品牌承诺，它应该给人怎样的感觉？
• 内容契合度：此布局需要容纳多少文案、证据、图像、导航和产品细节？
• 约束：技术要求、性能预算、无障碍要求和维护成本。
• 差异化：怎样才能令人印象深刻，同时又不增加使用难度？

选择或保留风格时，请遵循设计方向。

该参考文档定义了此库认可的网站设计方向、如何在其中进行选择、哪些风格应谨慎使用，以及此库不应生成哪些风格。

默认遵循以下规则：

• 优先遵循现有项目：如果项目已经有视觉系统，除非用户明确要求重塑品牌或进行较大风格调整，否则应保留其字体、配色、间距节奏、表面风格和交互语气。
• 宽泛的新项目需求应从认可的方向中选择：如果用户要求制作新的落地页、营销页面或几种不同方向，却没有指定风格，应根据产品构想和品牌契合度，从认可的设计方向中选择，而不是随意编造风格标签。
• 先确定结构，再添加效果：首先确定一个主要结构方向，然后可选地添加一种表面、字体、动效或表现力方面的辅助修饰。
• 核心流程应比外层设计更清晰：即使营销层的表现力更强，表单、表格、设置、身份验证、价格对比和错误状态通常仍应采用更接近极简主义、瑞士风格、扁平风格或同样注重清晰度的设计方式。
• 切勿默认采用复古 / 赛博 / 合成波 / 终端美学：对于此库中的宽泛提示，不要主动推荐这些方向。

开始时应稍作保守：

• 先设计最小的实用版本
• 不要暗示尚未准备好实现的功能
• 通过粗略探索快速做出决策，然后尽早构建真实版本，并以短周期迭代
• 在叠加更强烈的风格处理之前，先确定字体、间距、层级和 CTA 结构

如果需求仍不明确、需要在润色前厘清布局和流程决策，或需要更顺畅地从线框图推进到风格指南再到原型，请参阅设计流程。 如果团队需要更清晰且共享的默认规范、更鲜明的产品价值，或能说明应该做什么及避免什么、更持久的决策视角，请参阅设计原则。 如果工作需要在界面层面执行之前，进一步明确用户细分、优先级、高价值 UX 行动、可行性评估，或与产品和业务目标保持风险意识一致，请参阅UX 策略。 如果受众本身会改变 UX——例如面向 Z 世代、儿童、家长、老年人，或任何在设备使用习惯、信任模式或无障碍需求方面有明显特点的受众进行设计，请参阅受众敏感型设计。

重要：选择清晰的概念方向，并精准地贯彻执行。有意识的设计胜过一味追求强烈效果。即使暂时移除装饰效果，字体、间距、层级和内容结构仍应合理有效。

然后实现可用的代码，并确保它：

• 达到生产级质量且功能完善
• 视觉鲜明，令人印象深刻
• 风格统一，具有明确的审美立场
• 每个细节都经过细致打磨

前端美学指南

排版

→ 有关字号比例、字体搭配、加载策略和字体选择启发式，请参阅排版参考。有关行长、行高、基线对齐、标签/数值处理、链接强调、数字对齐，以及语义层级与视觉层级，请参阅文本层级与可读性。

选择美观、独特且有趣的字体。将风格鲜明的展示字体与精致的正文字体搭配。

DO：使用精心设计、范围有限的字号比例；将模数比例作为灵感，而非教条 DO：通过字重、颜色和间距构建层级，而不只是依靠字号 DO：同一行中出现不同字号时，按基线对齐 DO：谨慎收紧标题字距，并在有助于提升可读性时为全大写文本增加字间距 DO：主视觉或展示标题换成多行时，先缩小字号，再压缩行距；保留足够的行高和块级内边距，避免上伸部和下伸部被裁切 DON'T：使用过度泛滥的字体——Inter、Roboto、Arial、Open Sans 和系统默认字体 DON'T：把等宽字体当作表达“技术/开发者”风格的偷懒捷径 DON'T：在嵌套 UI 中使用基于 em 的字号比例——它们很快就会偏离系统 DON'T：将长篇文本居中；居中适合简短陈述，不适合密集阅读 DON'T：在每个标题上方都放置大号圆角图标——它们很少能增添价值，还会让网站看起来像模板

颜色与主题

→ 有关 OKLCH、调色板和深色模式，请参阅颜色参考。当语义状态、图表、激活状态或类别颜色需要在色觉缺陷情况下仍可区分时，请参阅色盲友好型 UX。构建或修复色阶时，请参阅颜色阶工作流。当颜色承载状态、警报或含义时，请参阅语义颜色。通过图表、曲线图或绘图展示数据时，请参阅数据可视化。

坚持使用协调统一的调色板。以主色为主、搭配鲜明的点缀色，效果胜过畏首畏尾、平均分配的调色板。

DO：先从灰度开始，在已清晰明确的层级之上再叠加颜色 DO：使用现代 CSS 颜色函数（oklch、color-mix、light-dark），构建感知均匀且易于维护的调色板 DO：预先定义色阶——灰色需要真正的色阶，主色和点缀色需要多个可用色值 DO：让中性色带有品牌色调——哪怕只有一丝微妙色调，也能营造潜意识中的协调感 DO：需要无障碍、强调程度较低的彩色面板时，优先在浅色调表面上使用深色文本 DON'T：在彩色背景上使用灰色文本——这会显得褪色；应改用背景色的深浅变化 DON'T：盲目使用 lighten() 或 darken()，调出 35 种近乎相同的颜色 DON'T：使用纯黑（#000）或纯白（#fff）——始终加入色调；自然界中不存在纯黑和纯白 DON'T：使用 AI 风格的调色板：深色背景上的青色、紫到蓝的渐变，以及霓虹点缀色 DON'T：为了营造“冲击力”而使用渐变文本——尤其是用于指标或标题时；这只是装饰，并无实际意义 DON'T：默认采用带发光点缀色的深色模式——不需要真正做出设计决策，就显得很“酷”

布局与空间

→ 网格、节奏和容器查询请参阅空间设计参考。如果构图或分组效果不佳，请使用间距系统和层级检查清单。

通过变化的间距营造视觉节奏，而不是到处使用相同的内边距。大胆采用不对称和出人意料的构图。有意打破网格以突出重点。

DO：先留出比你觉得必要的更多留白，再逐步缩减，直到设计显得平衡 DO：通过变化的间距营造视觉节奏——紧凑分组，宽松分隔 DO：使用 clamp() 设置流式间距，让布局在大屏幕上舒展呼吸 DO：采用不对称和出人意料的构图；有意打破网格以突出重点 DO：组与组之间的间距应大于组内间距，避免产生歧义 DO：将长页面拆分为清晰、合乎逻辑的区块；权重相当的区块通常应保持一致的外围间距，共享背景应覆盖整个相关区块，而不只是狭窄的标题条 DO：根据组件的实际需要设置宽度；对于侧边栏、表单和卡片，固定宽度往往比流式宽度更合适 DON'T：把所有内容都放进卡片——并非所有内容都需要容器 DON'T：不要在卡片中嵌套卡片——这会造成视觉噪音、弱化层级 DON'T：不要使用千篇一律的卡片网格——反复排列相同尺寸、带图标、标题和文本的卡片 DON'T：不要使用主视觉指标布局模板——大数字、小标签、辅助统计数据和渐变点缀 DON'T：不要把所有内容都居中——左对齐文本搭配不对称布局更显设计感 DON'T：不要仅仅因为视口很宽，就拉伸每个区块 DON'T：不要处处使用相同的间距——缺乏节奏的布局会显得单调

视觉细节

→ 阴影层级、凸起与内嵌逻辑以及深度映射请参阅层次系统。在间距、边框、阴影、重叠和背景变化之间进行选择时，请使用表面区分。关于得体的默认样式优化、强调边框和装饰性背景，请参阅润色细节。如果整体风格显得模糊，请使用个性化手段。如果设计有流于泛化或盲目追逐潮流的风险，请使用AI 味检测。

DO：使用有意且有目的的装饰元素来强化品牌 DO：建立一套精简的层次系统；阴影应传达 Z 轴深度，而不是作为默认装饰 DO：优先通过背景变化、间距和细腻阴影来区分表面，而不是到处添加边框 DO：除非所选设计方向确实适合广泛使用，否则应选择性地使用玻璃质感、柔和 UI、黏土风、粗野主义点缀或 3D 元素等更醒目的风格处理 DON'T：不要到处使用玻璃拟态——避免将模糊效果、玻璃卡片和发光边框仅作装饰，而非出于实际目的使用 DON'T：不要使用单侧带有粗彩色边框的圆角元素——这种偷懒式点缀几乎从来都显得刻意不足 DON'T：不要把迷你趋势图当作装饰——这种小图表看似精致，却没有传达任何有意义的信息 DON'T：不要使用搭配通用投影的圆角矩形——这种设计稳妥却令人难忘，可能来自任何 AI 输出 DON'T：不要添加无法说明层次或交互的拟真效果或深度效果 DON'T：如果没有明确区分主次层级，不要同时混用多种醒目的风格体系 DON'T：除非实在没有更好的替代方案，否则不要使用模态框——使用模态框是偷懒

图像与媒体

→ 处理照片、屏幕截图、图标、插图、用户上传的媒体、叠加效果和图像可读性时，请参阅 图像处理。如果首屏视觉、首页开场或着陆页的第一印象需要更清晰的表达、更有力的证明、更严格的性能考量，或需要判断是否应该使用主视觉图片，请参阅 主视觉区域 UX。如果媒体比例、裁剪规则、浏览型与评估型卡片布局，或响应式卡片／媒体节奏会显著影响清晰度和流畅度，请参阅 宽高比与卡片方向。

应该：优先将图像对比度问题视为图像处理问题，而非字体排印问题 应该：让屏幕截图足够大或足够聚焦，以传达有用的信息 应该：让图标保持接近其设计尺寸，除非它们本来就是为插画式缩放而制作的 应该：将主视觉文案放在图像中视觉上较为安静的区域，避开人脸、产品细节或其他重要焦点 应该：将用户上传的媒体限制在受控的形状和可预测的容器中 不应该：缩小屏幕截图，直到看起来像视力测试 不应该：把小图标放大成粗笨的占位符来充当真正的插图 不应该：让用户上传的图像决定布局形状或延伸到背景中

动效

→ 有关时间、缓动和减少动态效果，请参阅 动效参考。

聚焦于影响力最大的时刻：精心编排的页面加载，加上错落出现的内容，比零散的微交互更能带来愉悦感。

应该：通过动效传达状态变化——进入、退出和反馈 应该：使用指数缓动（ease-out-quart/quint/expo），实现自然减速 应该：制作高度动画时，使用 grid-template-rows 过渡，而非直接对高度进行动画处理 不应该：对布局属性（width、height、padding、margin）制作动画——只使用 transform 和 opacity 不应该：使用弹跳或弹性缓动——它们显得过时又俗气；真实物体会平滑减速

交互

→ 有关表单、焦点、加载模式、Jakob 定律和 Fitts 定律，请参阅 交互设计。

表单与验证

• 禁用按钮 UX — 主要操作被阻止、进行中时的锁定、不可用操作
• 破坏性操作 UX — 删除、归档、移除、撤销授权、撤销与确认、批量破坏性操作
• 手风琴 UX — 常见问题、折叠分组、产品详情手风琴、设置分区
• 实时验证 UX — 行内验证时机、失焦验证与实时验证、尽早奖励／延迟惩罚
• 错误恢复 — 字段错误、错误摘要、严格验证器、可恢复的失败处理
• 日期输入 UX — 出生日期、易记日期表单
• 日期时间选择器 UX — 预订日历、日期范围选择器、时段选择

导航与路径指引

• 信息架构 UX — 大型产品套件、设置架构、跨产品导航
• 侧边栏与页脚 UX — 右侧栏、支持面板、支持内容丰富的页脚
• 导航菜单 UX — 大型下拉菜单、页眉导航、悬停与点击菜单
• 面包屑 UX — 嵌套导航、面包屑路径、当前位置提示、文档层级结构
• 搜索与可查找性 — 站内搜索、命令面板、自动建议、无结果后的恢复
• 搜索与筛选 UX — 自动补全、筛选架构、结果展示、无结果后的恢复 电商与内容
• 集合浏览与筛选 — 长结果列表、分面浏览、筛选叠加层
• 复杂表格 UX — 数据网格、固定列、表头筛选、行选择、表格内验证
• 数据可视化 — 图表类型选择、响应式模式、无障碍数据表、工具提示和注释
• 功能比较 UX — 比较表、并排规格、候选清单比较流程
• 配置器 UX — 产品构建器、分步配置、实时选项预览
• 滑块 UX — 范围滑块、贷款或定价计算器、双滑块筛选器
• 轮播 UX — 轮播、画廊轨道、客户评价滑块、功能展示轨道
• 电商 UX — 分类页面、产品页面、购物流程、购物车、结账
• 评论与评分 — 产品评论、推荐信号、客户照片证明
• 社会认同模式 — 客户评价、客户徽标、评论徽章、案例研究
• 定价与套餐 — 定价页面、套餐比较、账单设置
• 付费墙与升级流程 — 功能锁定、使用限额、试用、升级提示

反馈与状态

• 微小故障与感知质量 — 细微卡顿、反馈不足、菜单消失或诡异行为带来的不稳定感
• 加载反馈与感知性能 — 骨架屏、旧数据提示、乐观 UI、流式内容、真实的等待状态
• 状态传达 — 验证、通知、徽章、收件箱、动态消息流
• 表单验证模式 — 验证时机、错误位置、多字段依赖、异步验证、恢复设计
• 通知与权限 — 浏览器权限提示、推送策略、通知中心、拒绝后的恢复
• 空状态模式 — 无数据界面
• 组件无障碍性 — 键盘支持、焦点指示器、跳过链接、模态框焦点处理、隐藏内容、当前页面状态

遗留系统与韧性

• 行为设计 — 渐进式披露、启动效应、框架效应、完成提示、定价选择架构
• 引导 UX — 首次运行流程、激活、顿悟时刻、导览与清单
• 预测式与意图驱动 UI — 推荐、智能默认值、恢复流程
• 遗留系统现代化 — 遗留系统、新旧流程混合、迁移路线图决策
• 离线与韧性 — 服务工作线程 UX、过期时提供缓存并重新验证、同步队列、冲突解决
• 认知负荷 — 希克定律和米勒定律的实践应用
• 身份验证与账户恢复 — 登录、注册、密码设置、会话过期、双重验证流程、账户锁定
• 权限与角色 UX — 角色模型、访问请求流程、能力边界、管理员与成员行为
• 语言与区域设置选择 — 语言选择器、市场覆盖设置、货币或配送偏好 在决定哪些控件应在破坏性操作确认中突出显示、弱化、隐藏或升级时，请使用 action hierarchy。

使用 empty-state 设计零数据界面。使用 onboard 制定更全面的激活策略，设计关键体验时刻、引导流程和首次使用教育。 当频繁交互让人感觉迟缓或打断流程时，使用 optimize。当权限、破坏性操作、自动化或管理员权限需要更强的防护时，使用 harden。

让交互感觉迅速。使用乐观 UI——立即更新，稍后同步。

应该：使用渐进式披露——从简单开始，通过交互逐步展现复杂功能（先显示基础选项，将高级选项放在可展开的分区中；悬停时显示次要操作） 应该：熟悉的任务采用熟悉的模式——导航、搜索、标签页、下拉菜单、表格、筛选器、表单、分页和设置，应符合优秀产品已让用户习惯的行为方式 应该：使用仍能奏效的最低打扰状态模式——行内验证、安静提示、收件箱、摘要和 Toast 不应争相传达同等紧急程度 应该：在提出对遗留系统进行大刀阔斧的重写之前，先利用现有工作流知识；混合共存和分阶段迁移往往才是更切合实际的设计问题 应该：设计能够教会用户如何使用界面的空状态，而不只是说“这里什么也没有” 应该：让每个交互界面都经过精心设计且响应灵敏 应该：明确操作层级——一个主要操作、少数次要操作，以及不显眼的第三级操作 应该：让常用操作易于点击——提供足够大的点击区域，在适当情况下让整行标签都可点击，并将操作放在所作用内容附近 应该：在通知量可能造成干扰时，为用户提供控制嘈杂系统的方式，例如平静的默认设置、摘要模式、静音方式、延后选项或安静时段 不应该：重复相同信息——冗余的标题、重复标题内容的引言 不应该：为标准控件发明自定义交互模式，除非收益显而易见且显著 不应该：让每个按钮都显得重要——使用幽灵按钮、文本链接和次要样式；层级很重要 不应该：仅仅因为系统能够发送状态更新，就把每条更新都当作警告、Toast、推送通知或增长提示 不应该：假设从零开始替换遗留界面就一定更安全；记录工作流、减少衔接痛点，并与用户一起逐步迁移，可能是更好的做法

响应式设计

→ 窄屏优先策略、流式设计、自然宽度、列布局调整和容器查询，请参阅响应式设计参考。

应该：使用容器查询（@container）实现组件级响应式设计 应该：根据不同场景调整界面——不要只是一味缩小 不应该：在窄屏布局中隐藏关键功能——应调整界面，而不是将其删减

UX 文案

→ 标签、错误和空状态请参阅 ux-writing reference。当措辞、进度提示、同意流程、取消订阅／取消流程或升级提示可能显得闪烁其词、带有操纵性或假意友好时，请参阅 interface honesty。当问题不仅在于消息措辞，还涉及用户如何在具体情境中发现、理解并解决错误时，请参阅 error recovery。当任务涉及标题、落地页、产品定位、引导承诺、生命周期消息、市场列表或 CTA 策略时，请参阅 marketing copywriting。当文案依赖于推荐语的呈现方式、案例研究中的佐证、认证，或信誉信号在声明和 CTA 附近的布局时，请参阅 social proof patterns。当需要通过有重点的多轮审校来改进现有文案，而不是盲目重写时，请参阅 copy editing sweeps。如果文案需要解释方案、计费、续订、升级或价值，同时避免施压手段，请将这些指南与 pricing and packaging 和 paywalls and upgrade flows 配合使用。

要做：让每个词都发挥作用
不要做：重复用户已经看得到的信息

零数据界面设计请使用 empty-state。更广泛的激活策略、首次使用引导、顿悟时刻、导览和采用规划请使用 onboard。

产品伦理与默认设置

出现取舍时，按以下顺序优先考虑：

1. 清晰度
2. 任务完成速度
3. 错误预防
4. 熟悉的交互模式
5. 视觉润色
6. 高级灵活性

不要为了改进列表靠后的项目而牺牲靠前的项目。

绝不使用暗黑模式

界面不得依靠混淆、阻碍、内疚感、隐瞒或误导性的层级来推动有利于产品的结果。

要做：

• 让选择、定价、同意事项和后果都易于理解
• 让取消订阅、取消、隐私和降级流程简单明了
• 使用真实的警告、真实的主动选择机制和公平的默认设置
• 尽可能维护用户自主权、知情同意和可逆性

不要做：

• 通过低对比度、隐蔽的位置或误导性标签来隐藏重要信息
• 让取消比注册更困难
• 仅为提高转化率而预先选中剥削性选项
• 使用虚假的紧迫感、虚假的稀缺性、羞辱性文案或含糊不清的破坏性操作确认
• 通过降低决策的知情程度或增加撤销难度来改善指标

---

AI 滥竽充数测试

关键质量检查：如果你向某人展示这个界面并说“这是 AI 做的”，对方会立刻相信吗？如果会，那就是问题所在。

有特色的界面应该让人问“这是怎么做出来的？”，而不是“这是哪个 AI 做的？”

请查看上文的“不要做”指南——这些正是 2024-2025 年 AI 生成作品的典型痕迹。

反模式汇总列表请参阅 ai slop detection。

---

实现原则

让实现复杂度与美学愿景相匹配。玻璃质感、柔和 UI、黏土质感、3D 或其他自定义表面处理等更复杂的风格，会增加 CSS 复杂度、状态设计工作、无障碍风险和性能调优成本。克制的设计方向同样需要精准，而不是少花工夫。

发挥创意，做出意料之外、真正贴合情境的设计选择。每种设计都应独一无二。在浅色与深色主题、不同字体和不同美学风格之间有所变化。绝不要在多次生成中趋同于常见选择。

实现时，请记住以下质量检查项：

• 两秒内，用户能否分辨主要、次要和第三级元素？
• 间距、排版、颜色、圆角和层级等决策是否基于设计系统，而非临时调整？
• 字体、颜色、圆角和语言是否体现出个性？
• 暂时去掉颜色后，设计是否依然令人满意？

请记住：GPT 能够完成非凡的创意作品。不要有所保留——跳出框架思考，并全心投入独特的愿景，展现真正可以创造出的成果。