需要打造有辨识度、非通用 AI 风格的前端界面时…

在构建网页组件、页面或应用时，通过先问清用途/调性/约束/差异化，再大胆选定一种鲜明美学方向并精细实现，避免千篇一律的 AI 生成感界面。

适用场景

解决思路

1. 编码前先提问理解上下文：1) 用途——这个界面解决什么问题、谁使用；2) 调性——哪种美学极端最契合（可参考 Tone Options 但设计出忠于该方向的方案）；3) 约束——框架、性能、无障碍等技术要求；4) 差异化——什么让它令人难忘、别人会记住的那一点是什么。
2. 选定一个清晰的概念方向并精准执行：大胆极繁与精致极简都可行，关键是有意图而非强度；随后用可运行的代码（HTML/CSS/JS、React、TypeScript 等）实现，要求生产级可用、视觉醒目难忘、美学观点统一、每个细节都精雕细琢。
3. 从 Tone Options 中挑一个极端方向执行，例如：极度极简、复古未来、有机自然、编辑/杂志、粗野主义、装饰艺术/几何、柔和粉彩、工业实用、新瑞士网格、反网格实验、单色高对比、双色调波普、动态字体、故障/数字噪点、Y2K 赛博光泽、蒸汽波怀旧、合成波夜驰、孟菲斯趣味、Riso 印刷、包豪斯现代主义、构成主义宣传、未来主义速度、电影黑色、奇幻故事书、现代拟物、黏土/柔和 3D、等距系统、数据驱动仪表盘、科学/技术、军事/指挥 UI、风化/复古包浆、海岸/轻盈、沙漠现代、植物药剂师、北欧静谧、趣味极简、创业清爽、高级时装画册、博物馆展览、建筑蓝图、修道院/侘寂。
4. 拿到上下文后：完全投入所选方向、不做半吊子；先给出 2-3 个备选方案及取舍，再精准实现为生产级、视觉醒目、令人难忘的成品。
5. 遵循基础设计原则：字体要美丽独特有趣，避免 Arial、Inter 等通用字体，选有个性的展示字体搭配精致正文字体；色彩与主题要统一，用 CSS 变量保持一致，主色配锐利点缀优于怯懦的均匀配色；动效用于效果与微交互，HTML 优先纯 CSS，React 可用时用 Motion 库，聚焦高冲击时刻（如一次编排好的页面加载配合 animation-delay 交错揭示）；空间构图要出人意料，用不对称、重叠、对角流动、破格元素、大量留白或受控密度；背景与视觉细节要营造氛围与纵深，而非默认纯色，加入与整体美学匹配的语境化效果与纹理（渐变网格、噪点纹理、几何图案、层叠透明、戏剧性阴影、装饰边框、自定义光标、颗粒叠加）。
6. 刻意跳出通用套路：每次设计都不同，在明暗主题、字体、美学之间变化，绝不在多次生成中收敛到常见选择（如 Space Grotesk）。
7. 绝不使用这些 AI 生成感美学：字体 Inter、Roboto、Arial、系统字体作为首选、Space Grotesk；颜色通用 SaaS 蓝 #3B82F6、白底紫色渐变；模式千篇一律的布局与可预测的组件排布；效果玻璃拟态、模仿 Apple 设计、液态/blob 背景；整体任何看起来像 Claude 生成或机器制造的东西。
8. 改为营造氛围：用摄影、图案、纹理替代扁平纯色；跳出常规路径；参考 Interaction Design 中的 Visual Effects 实现清单（渐变网格、颗粒叠加、戏剧性阴影、层叠透明、自定义光标）。
9. 从获奖数字作品（Awwwards、FWA、CSS Design Awards、Dribbble Playoffs）、以独特作品著称的独立工作室（荷兰 Studio Dumbar/Lava Design/Thonik，瑞士 Büro Destruct/NORM/Elektrosmog，英国 Studio Output/Made Thought/NB Studio，西班牙 Mucho/Folch/Vasava，美国 Collins/Pentagram/HAWRAF，日本 6D-K/Rhizomatiks/TeamLab）、历史运动（包豪斯、瑞士国际主义、Otl Aicher 慕尼黑奥运、Emigre 杂志、David Carson 的 Ray Gun、Neville Brody 的 Face 杂志、Sagmeister 的破规）以及技术灵感（Codrops、CodePen Spark、Hoverstat.es、缓慢循环微妙的背景动画）中汲取灵感。
10. 用视觉趣味策略：非典型的独特配色、感觉新鲜的动画效果、增加纵深而不分散注意力的背景图案、制造对比的字体组合、能讲故事的视觉资产。
11. 卡在安全模式时用创意重构提示自问：设计师视角（Sagmeister 会怎么做→挑衅、手绘、概念深度；Neville Brody→字体即艺术、打破层级；Studio Dumbar→大胆色彩、几何游戏、荷兰式直接；Dieter Rams→激进简化、功能之美；David Carson→摧毁网格、感觉优先于阅读）；语境转换（若是杂志跨页→编辑层级、拉引语、艺术指导；若是博物馆展陈→充裕空间、安静字体、标本式呈现；若是街头标识→最大可读性、大胆简洁；若是黑胶唱片封套→方形约束、触感品质、收藏感；若是抗议海报→紧迫、强烈对比、即时冲击）；时代视角（1960s 瑞士国际主义→网格完美、Helvetica、理性清晰；1990s Emigre/Ray Gun→混乱、层叠、刻意挑战；1920s 包豪斯→原色、几何形式、功能艺术；2000s Flash 时代→动效优先、实验性导航、惊喜；Cyberpunk 2077→霓虹、故障、密集信息、暗色 UI）。
12. 实现前用「强制多样性（反雷同协议）」掷骰决定维度：色温抛硬币（正面暖色：陶土、赭石、奶油、铁锈；反面冷色：石板灰、冰蓝、薄荷、炭黑）；布局方向掷 1-4（1 左重不对称、2 右重不对称、3 中心主导带边缘张力、4 对角/旋转流动）；字体性格掷 1-6（1 几何无衬线、2 人文无衬线、3 衬线、4 粗衬线、5 展示/装饰、6 等宽）；动效哲学掷 1-3（1 极简仅必要反馈、2 编排式揭示与滚动触发、3 俏皮弹跳与过冲）；密度掷 1-2（1 充裕留白、2 受控密度）。在无品牌约束的新项目、陷入重复模式、简报开放、想先探索再决定时使用。
13. 践行核心设计哲学：1) 简洁——识别本质目的、消除干扰，从复杂开始但每个元素都必须证明其存在价值；2) 材质诚实——拥抱数字材质的独特属性，按钮通过颜色、间距、字体以及有意图时的阴影传达可供性，卡片可用边框、背景区分或戏剧性阴影制造纵深，动画遵循适配数字响应性的真实物理原则；3) 功能分层——通过字体尺度、色彩对比、空间关系建立层级，概念上分层信息（主→次→三级），在服务美学方向时有意使用阴影与渐变，拥抱功能纵深（模态覆盖内容、下拉覆盖 UI），避免玻璃拟态与模仿 Apple（但阴影/渐变是工具而非敌人）；4) 偏执细节——考虑每个像素、交互与过渡，卓越源于数百个小的有意决策，细节服务简洁而非复杂，细节与清晰冲突时清晰优先；5) 一致的设计语言——每个元素视觉上传达其功能，元素应像统一系统的一部分，不应有任何随意感；6) 技术的隐形——最好的技术会消失，用户应聚焦内容与目标而非理解界面。
14. 实践中落实：颜色用 4-5 个中性色（背景、边框、文字）+ 1-3 个大胆点缀色（CTA、状态、强调），中性色依品牌意图略去饱和偏暖或偏冷，点缀色足够饱和以形成清晰对比；字体标题重情感与抓人且出人意料（个性优先于纯可读性），正文/UI 重功能与高可读性（清晰优先于表达），最多 2-3 款字体但要有性格且独特，用清晰数学比例（如 1.25x），绝不默认 Inter、Roboto 或 Space Grotesk；动画要有目的（引导注意、建立关系、提供反馈）且符合物理（自然缓动、恰当质量/动量）；间距用充裕留白营造清晰与呼吸感，采用数学关系（如 4px 基准，8/16/24/32/48px 尺度），一致应用形成视觉节奏。
15. 呈现任何设计前用设计决策清单核对：1) 目的——每个元素是否服务明确功能；2) 层级——视觉重要性是否与内容重要性一致；3) 一致性——相似元素是否外观与行为相似；4) 无障碍——是否满足 WCAG AA（对比度、触控目标、键盘导航）；5) 响应式——是否在手机、平板、桌面可用；6) 独特性——是否打破通用 SaaS 套路；7) 审批——实现颜色、字体、尺寸、布局前是否已征询确认。
16. 构建颜色系统：基础/中性色板 4-5 色（背景最浅、表面色、边框分隔线、文字最深，依品牌用略去饱和的暖灰或冷灰）；点缀色板 1-3 色（主操作 CTA、状态指示成功/警告/错误/信息、聚焦/悬停态，用饱和色与中性色形成清晰对比）；示例结构 Neutrals: slate-50, slate-100, slate-300, slate-700, slate-900；Accents: teal-500（主）、amber-500（警告）、red-500（错误）。
17. 应用颜色规则：背景用最浅中性色（slate-50 或白）；文字主文本用最深中性色（slate-900）、次要文本用中间调（slate-600）；主按钮用点缀色配白字；次按钮用中性色配边框与深色文字；状态指示用特定点缀色（绿=成功、红=错误、琥珀=警告、蓝=信息）；交互态悬停加深 10-15% 或轻微偏移色相、聚焦用点缀色 ring/outline、禁用降透明度至 40-50% 并移除悬停效果。
18. 选择暖灰（米/棕底色：有机、亲和、可信）或冷灰（蓝底色：现代、科技、专业）并保持意图一致；点缀色需与浅背景（用于白底按钮）和深色文字（若作白字背景）都有清晰对比；每个颜色都必须服务目的（层级、功能、状态或动作），避免无意义的装饰色，同一颜色在全站含义一致。
19. 无障碍：确保色盲用户有足够对比，遵循 WCAG 2.1 AA（正文至少 4.5:1、大字至少 3:1），不单靠颜色传达信息（加图标或标签）。
20. 独特配色策略：绝不用默认 SaaS 蓝 #3B82F6 或白底紫渐变；用出人意料的中性色（暖灰、柔和米白、深炭、浓郁黑）；中性色搭配独特点缀（陶土+炭黑、鼠尾草+藏青、珊瑚+石板灰）；主色配锐利点缀优于怯懦均匀配色；用「这看起来像 AI 生成吗」过滤测试组合；在明暗主题间变化，不让任何设计雷同。
21. 字体卓越：标题/展示优先情感、个性、注意力（可读性次要），正文优先可读性、阅读舒适、无障碍，UI/标签优先清晰、可扫读、一致；最多 2-3 款字体但出人意料且有性格，每款限 3 个字重（如 Regular 400、Medium 500、Bold 700），优先可变字体以便微调与性能；绝不将 Inter、Roboto、Arial/Helvetica、Space Grotesk、系统字体作为首选（仅作回退）；展示版用于标题与主视觉且要大胆，文本版用于段落与长文，说明/微型版用于小 UI 标签（1-2 行非关键信息）；在 Google Fonts 上深挖第一页之外，或从字体厂牌找独特选项，选择服务所选美学方向的字体，用独特展示字体搭配精致正文字体。
22. 用数学关系建立字号层级：比例用大三度 1.25x（中等对比）或纯四度 1.333x（戏剧性）；正文基准 16px（1rem）；示例尺度（1.25x）：xs 0.64rem(10px)、sm 0.8rem(13px)、base 1rem(16px)、lg 1.25rem(20px)、xl 1.563rem(25px)、2xl 1.953rem(31px)、3xl 2.441rem(39px)、4xl 3.052rem(49px)、5xl 3.815rem(61px)；在各级间建立清晰视觉区分，标题、副标题、正文、说明各有不同大小/字重，用大小、字重、颜色组合建立层级。
23. 间距与可读性：正文行高 1.5x 字号（16px 文字=24px 行高）；行长 45-75 字符最佳（60-70 理想）；段间距 1-1.5em；字距：大字标题略紧（-0.02em 到 -0.05em）、正文默认 0、小字说明略松（+0.01em 到 +0.03em），通用规则是字号增大则减字距、字号减小则增字距。
24. 字体搭配逻辑：通过类别对比（衬线+无衬线）、字重对比（细+粗）、性格对比（几何+人文）制造对比；示例：衬线标题+无衬线正文（编辑感、可信）、展示标题+系统正文（独特+高效）、粗无衬线标题+细无衬线正文（现代、干净）。
25. UI 字体规范：按钮文字 Semi-Bold(600)、14-16px、大小写一致（全大写或标题式）；表单标签 Regular(400)、14px、置于输入框上方；表单输入文字 Regular(400)、最小 16px（防止 iOS 聚焦缩放）；占位符 Light(300) 或去饱和色、与输入同尺寸；错误信息 Regular(400)、12-14px、偏红色。
26. 响应式字体：跨断点缩放字号，如 Tailwind 的 text-3xl md:text-4xl lg:text-5xl，或 CSS clamp(2rem, 5vw, 4rem)；移动端比桌面缩小 20-30%，小屏减少层级数（更少不同字号）。
27. 布局与空间：每个屏幕都应平衡，注意视觉重量与负空间，用充裕负空间聚焦注意力，留足边距与内边距以显专业宽敞；保持一致的底层网格系统，在允许有意义例外时营造秩序感，用带 gap 的 grid/flex 包裹器控制间距，优先用包裹器而非直接给子元素加 margin/padding；通过邻近、对齐、共享属性分组相关元素，用大小、颜色、间距突出重要元素，引导用户注意力，避免元素互相竞争造成杂乱，为内容创造清晰路径。
28. 动效实现清单：滚动触发动画用 Intersection Observer API 做高性能检测，元素进入视口时触发（而非页面加载时），如 data-animate="fade-up" 配合 .is-visible 类切换；交错揭示用 animation-delay 顺序揭示列表、网格与分组内容，基础延迟 50-150ms（快=活力、慢=优雅），总序列控制在 1s 内，模式可选线性/缓动/随机，方向可选左到右、上到下、对角、中心向外或边缘向内。
29. 背景氛围：用 body::before 伪元素加颗粒/噪点纹理叠加；用 @keyframes 创建漂浮/脉动背景光球；环境动效时长 8-20s（慢=平静、快=活力），变换类型用 translateY（漂浮）、scale（呼吸）、rotate（环绕），缓动用 ease-in-out 获得有机呼吸感，强度上背景用细微（5-20px 位移）、主视觉可更大胆，多层不同速度营造纵深（视差）。
30. 布局动画：用不对称 bento 网格布局配合不同揭示时机，逐个动画网格项而非容器，考虑对角或波浪式揭示序列。
31. 数据可视化动效：滚动触发时进度条填充、统计数字在可见时递增，用末端减速的 ease-out 缓动获得自然感。
32. 悬停态变换：translateY(-4px) 轻微抬升、scale(1.02-1.05) 强调、用点缀色 box-shadow 发光、组合变换 transform: translateY(-4px) scale(1.02)，始终加 transition 保证平滑。
33. 社会证明动效：为推荐语、logo 或数据实现无限跑马灯/滚动条，用纯 CSS @keyframes 无缝循环，悬停暂停以利无障碍（animation-play-state: paused）；速度 20-60s 一个完整周期（慢=高级、快=紧迫），方向可选水平（传统）、垂直（独特）或对角（大胆），内容复制 2 倍实现无缝循环，用 flexbox gap 控制一致间距，始终在悬停/聚焦时暂停。
34. 视觉特效实现清单：渐变网格背景用多个径向渐变偏移定位，用 background-blend-mode: multiply 或 overlay 混合，微妙动画渐变位置营造活的背景；层数 2-4 个径向渐变（多=丰富、少=干净），位置从角落/边缘偏移 20-30% 制造张力，叠加透明度 0.1-0.4（细微）或 0.5-0.8（主导），形状可选椭圆（有机）、圆（聚焦）、锥形（放射爆发），动画在 15-30s 内移动位置 10-30%。
35. 戏剧性阴影（非细微）：用分层阴影制造纵深 box-shadow: 0 4px 6px rgba(), 0 10px 20px rgba()；给阴影加入点缀色；非矩形元素考虑 drop-shadow 滤镜；阴影应可见且有意，而非几乎察觉不到。
36. 层叠透明：用 rgba() 或 hsla() 背景堆叠元素，谨慎使用 backdrop-filter: blur()（有性能成本），通过重叠半透明层制造纵深。
37. 颗粒/噪点纹理：通过 ::before 或 ::after 伪元素应用，用 SVG 噪点滤镜或极小重复 PNG，透明度 0.03-0.08 保持细微，用 pointer-events: none 不干扰交互。
38. 自定义光标：交互区域改 cursor: pointer，考虑用自定义光标图片做品牌区分，可拖拽元素用 cursor: grab / cursor: grabbing，始终提供回退 cursor: url(custom.cur), pointer。
39. 遵循核心 UX 原则：1) 直接操作——用户直接与内容交互而非抽象控件（拖放排序而非上下按钮、就地编辑而非独立表单、滑块而非数字输入加减、移动端捏合缩放而非加减按钮）；2) 即时反馈——每次交互在 100ms 内给出即时视觉反馈，类型包括视觉（按下态、悬停、颜色变化）、触觉（移动端提交/错误/成功震动）、音频（关键动作的细微声音，可选且用户可控）、加载（>300ms 操作显示骨架屏/加载器）、成功（对勾、绿色高亮、toast）、错误（红色高亮、内联错误、抖动动画）；3) 一致行为——相似元素行为相似（所有主按钮同色同尺寸同悬停态、所有模态都可用 X/ESC/点击外部关闭、所有拖拽目标同悬停与放置反馈、所有表单在失焦与提交时校验）；4) 宽容——让错误难发生但易恢复，预防策略（禁用无效操作、提交前内联校验、破坏性操作确认、后台自动保存草稿/进度），恢复策略（所有状态变更支持撤销/重做、软删除先入回收站/归档、清晰错误信息含可操作修复、出错时保留用户输入不清空表单）；5) 渐进披露——按需揭示细节，层级为摘要（默认显示卡片标题、价格、评分）、详情（展开显示描述、规格、评论）、高级（复杂选项藏在「高级设置」开关后），示例：手风琴默认折叠点击展开、搜索筛选显示 3-5 个常用其余藏于「更多筛选」、设置中基础可见高级藏于「显示高级」。
40. 采用现代 UX 模式：1) 对话式界面——在合适处优先自然语言交互，四种类型为纯聊天（AI 助手、支持机器人）、命令面板（Cmd+K、随处搜索）、智能搜索（自然语言查询如「下周的会议」而非筛选）、表单替代（对话式收集如「你叫什么名字」而非表单字段），适用于多变量复杂搜索、任务引导（向导、入门）、语境帮助、快捷操作（命令面板），不适用于简单表单、精确控制界面（设计工具、仪表盘）、高频重复任务；2) 自适应布局——按用户语境自动响应，基于时间（夜间暗色、白天亮色）、设备（移动端简化 UI、桌面全功能）、连接（慢速连接减少图片/视频）、使用（优先高频操作、隐藏罕用功能），示例：按时间或系统偏好自动明暗模式、移动端简化导航（汉堡菜单）vs 桌面完整导航、小屏折叠侧栏大屏展开；3) 大胆视觉表达——依所选方向灵活运用美学，有意时允许并鼓励阴影（戏剧性阴影、柔和抬升），允许渐变用于纵深、点缀、背景与氛围，唯一禁用玻璃拟态，不模仿 Apple 设计（找到自己的声音），聚焦字体、颜色、间距与视觉特效建立层级，营造氛围（渐变网格、噪点纹理、颗粒叠加、戏剧性光照）。
41. 导航：结构清晰、菜单直观；层级超过 2 层时加面包屑；用标准 UI 模式降低学习成本（汉堡菜单、标签栏）；确保行为可预测（返回键有效、链接看起来可点击）；保持导航语境（高亮当前页、保留滚动位置）。
42. 样式实现：组件库强烈优先 shadcn 组件（v4，预装于 @/components/ui），单独导入 import { Button } from "@/components/ui/button";，优先于原生 HTML 元素（<Button> 优于 <button>），避免创建与 shadcn 命名冲突的自定义组件；样式引擎独占使用 Tailwind 工具类，遵循 index.css 中通过 CSS 自定义属性定义的主题变量，在 @theme 中映射变量（见 tailwind.config.js），仅在绝对必要时用内联样式或 CSS 模块；图标用 @phosphor-icons/react 用于按钮与输入，如 import { Plus } from "@phosphor-icons/react"; <Plus />，纯图标按钮用颜色，除非要求否则不覆盖默认 size 或 weight；通知用 sonner 做 toast，如 import { toast } from 'sonner'；始终添加加载态、加载器、占位动画，内容渲染前用骨架屏。
43. 布局实现：用带 gap 的 grid/flex 包裹器控制间距，优先用包裹器而非直接给子元素加 margin/padding，按需嵌套包裹器实现复杂布局；条件样式用三元运算符或 clsx/classnames 工具，如 className={clsx('base-class', { 'active-class': isActive })}。
44. 响应式设计：用相对单位（%、em、rem）而非固定像素，用 CSS Grid 与 Flexbox 实现灵活布局，移动优先再向上扩展；媒体查询基于内容需求而非特定设备，跨设备与方向测试；触控目标最小 44x44 像素，触控目标间留足间距，桌面加悬停态、触控/键盘加聚焦态；性能上为移动网络优化资源，用 CSS 动画而非 JavaScript，图片与视频懒加载。
45. 无障碍标准：遵循 WCAG 2.1 AA，所有交互元素可键盘导航，最小触控目标 44×44px，用语义 HTML 兼容屏幕阅读器，为图片与非文本内容提供替代文本；实现细节：用描述性变量与函数名，事件函数以 handle 前缀（handleClick、handleKeyDown），加无障碍属性（自定义交互元素加 tabindex="0"、无文字按钮加 aria-label、语义 HTML 不足时加 role），确保逻辑 Tab 顺序，提供可见聚焦态。
46. 设计工作流：1) 理解上下文——解决什么问题、用户是谁何时使用、成功标准是什么；2) 探索选项——给出 2-3 个备选方案、解释各自取舍、询问哪个方向有共鸣；3) 迭代实现——先结构与层级、逐步加视觉打磨、每阶段测试；4) 验证——可用时用 playwright MCP 测试视觉变化、跨不同屏幕尺寸检查、验证无障碍。
47. 测试清单：视觉测试——可用时用 playwright MCP 自动化测试、在常见断点检查响应式行为、验证移动端触控目标、用不同内容长度（短、长、边界情况）测试；无障碍测试——测试键盘导航、验证屏幕阅读器兼容、检查颜色对比度、确保聚焦态可见；跨设备测试——在真实设备而非仅模拟器测试、检查不同浏览器（Chrome、Firefox、Safari）、验证移动端触控交互、测试横竖屏方向。
48. 按钮设计示例：先问「1) 你想强调的主操作是什么？2) 有品牌色还是我建议选项？3) 按钮应传达什么情绪（紧迫、平静、俏皮、专业）？」，获批后实现如 <Button className="bg-slate-800 hover:bg-slate-700 text-white px-6 py-3 rounded-lg transition-colors duration-200">Get Started <ArrowRight className="ml-2" /></Button>。
49. 字体层级示例：先问「标题大而粗抓注意力、副标题中等常规、正文较小优化阅读，走大胆当代还是含蓄精致？」，获批后实现如 <div className="space-y-4"><h1 className="text-5xl font-bold tracking-tight text-slate-900">Headline Here</h1><h2 className="text-2xl text-slate-600">Supporting subheading</h2><p className="text-base leading-relaxed text-slate-700">Body text optimized for readability with proper line height.</p></div>。
50. 独特配色建议示例：给出三个打破典型 SaaS 套路的方案——1) 暖土色（基础暖灰 #E8E2DC、点缀陶土 #C86E4B，用于有机可信感）；2) 冷午夜（基础深藏青 #1A2332、点缀青色 #4ECDC4，用于现代科技感）；3) 柔和粉彩（基础柔粉 #FFE5E5、点缀鼠尾草绿 #9DB5A4，用于平静亲和感），并询问哪个方向契合品牌。
51. 避免常见反模式：绝不用 Inter、Roboto、Arial、Space Grotesk 作主字体；绝不用通用 SaaS 蓝 #3B82F6 或白底紫渐变；绝不复制 Apple 设计语言或用玻璃拟态；绝不创建看起来 AI 生成的千篇一律布局；绝不跳过设计前询问上下文；绝不在多次生成中收敛到常见选择（一切都要变化）；绝不用延迟用户操作的动画；绝不创建元素互相竞争的杂乱界面。
52. 始终做到：先问用途、调性、约束、差异化；再大胆投入鲜明美学方向；用出人意料有性格的字体；营造氛围（有意时用阴影、渐变、纹理、颗粒）；主色配锐利点缀（而非怯懦均匀配色）；为交互提供即时反馈；用真实设备测试；验证无障碍（它赋能创意而非限制）。
53. 在以下情况打破规则：语境需要时（客户品牌已用 Inter 就精彩地用，不强行替换；玻璃拟态就是美学方向就完全投入不半途而废；简报要求 Apple 式精致就研究并超越而非回避）；你有更强想法时（有意图执行的「禁用」模式胜过无信念执行的「安全」模式；能说清为何破规就大胆破）；意外本身就是目的时（有意的冲突如字体碰撞、刺眼颜色可以很有力；「丑」设计在有意图时是合法美学选择；舒适是难忘的敌人）；破规前核对：1) 能解释创意意图吗？2) 是有意识选择而非偷懒吗？3) 服务用户/品牌/语境吗？4) 资深设计师会为这个选择辩护吗？全为是则自信破规。

适用边界 · 注意事项

• 简单表单、精确控制界面（设计工具、仪表盘）、高频重复任务等场景不适合用对话式界面。
• 当客户品牌已规定使用某字体（如 Inter）或明确要求玻璃拟态、Apple 式风格时，不应为遵守「禁用清单」而强行替换或回避。
• 无明确创意意图、只是偷懒或无法向资深设计师辩护的破规行为不应发生。