文尾附规则⬇️
用 AI 生成前端页面，很容易陷入固定审美陷阱：千篇一律的蓝紫渐变、满屏悬浮卡片、随处可见的 emoji、过度的毛玻璃效果，一眼就被认出是 AI 速成作品。想要做出更贴近真实项目、质感高级的界面，不需要复杂设计，只要在生成前做好规则约束，就能显著提升界面成熟度。
事情要从五年前的 Tailwind CSS 说起。作为当下最热门的实用优先型 CSS 框架，Tailwind CSS 允许开发者通过预定义的类名快速构建用户界面，其灵活且高效的特性深受前端开发者与设计师青睐。在 Tailwind CSS 早期版本里，所有按钮的默认色值都设定为 indigo-500。这个选择在当时很合理：indigo 介于蓝与紫之间，既没有纯蓝色的 “冷淡感”，也没有高饱和紫色的 “浮夸感”，适配大多数产品风格，且对文字对比度友好，开发时不用反复调试色值。
但没人想到这个 “方便的选择” 会产生蝴蝶效应：
- 大量教程、技术文章用 Tailwind CSS 的 indigo-500 做案例，比如 “按钮设计教程”；
- 开源代码库、社区分享的项目里，按钮、卡片渐变也默认沿用这个色值；
- 这些带 indigo-500 的文章、代码、设计稿，最终都成了大模型的训练语料。
就像设计师会受过往作品影响，AI 也会 “复制” 训练数据里的高频元素 —— 当 indigo-500 在语料中出现次数远超其他颜色，它自然会把 “网页设计中蓝紫渐变是最优选择，当成默认逻辑。
一、严控配色，告别廉价渐变
AI 默认配色往往偏好高饱和渐变，导致页面花哨又不专业。生成时可以主动限制色彩体系：主色只保留 1–2 个品牌色，搭配黑白灰三类中性色；禁用大面积蓝紫渐变、霓虹色与炫光效果；背景统一使用纯白或浅灰，突出内容层级。通过固定色值，让页面更沉稳、耐看，也更符合企业级产品的设计规范。
二、精简装饰，去掉多余视觉元素
很多 AI 界面为了 “好看” 堆砌大量装饰，反而显得杂乱。实际项目中应尽量克制：统一使用专业线性图标库，避免用 emoji 替代功能图标；减少毛玻璃、流光、外发光等特效；阴影只用来区分层级，不做纯装饰效果。去掉冗余元素后，页面会更干净利落，交互逻辑也更清晰。
三、规范布局，拒绝卡片堆砌
AI 生成的界面常出现卡片层层嵌套、阴影叠加过度的问题，显得臃肿。优化方式很简单：卡片只做边框或阴影，不同时叠加；控制圆角统一为 6px 或 8px，不随意更改；减少不必要的分割线，用间距区分模块；整体遵循栅格系统，靠留白与对齐提升秩序感，让结构更清爽。
四、统一字体，建立清晰文字层级
文字是界面的核心，却常被 AI 忽略。规范字体体系可以大幅提升质感：设置固定字号阶梯，如 12、14、16、20、24、32px，避免随机大小；统一使用 rem 或 px 单位，不混用；正文保持常规字重，标题适度加粗，建立明确的视觉层级。统一的文字规则，能让界面看起来更专业、易读。
五、工程化约束，提升代码可维护性
除了视觉，代码质量同样重要。让 AI 生成时遵循工程规范：颜色、间距、字号全部使用 CSS 变量，避免硬编码；间距基于 4px 网格系统，杜绝无规律的 “魔法数字”；禁止内联样式与冗余代码，保证组件可复用。这样生成的代码不仅美观，还能直接用于项目开发。
可直接复制的 AI 前端规范提示词
生成前端界面时请遵循以下规则：配色克制，无蓝紫渐变与炫光效果，仅使用品牌色 + 中性色；统一专业图标库，不使用 emoji，减少毛玻璃特效；布局简洁，卡片不叠加多层阴影，统一圆角；字体层级清晰，字号规范，不混用单位；代码使用 CSS 变量与 4px 网格，无内联样式与冗余代码，整体风格简约高级、贴近真实产品。
规则：
# Frontend Design System Rules ## Color System - Define CSS variables: --color-primary, --color-secondary, --color-neutral-*, --color-success, --color-warning, --color-error - Backgrounds: white (#ffffff) or light gray (#f8f9fa, #f3f4f6) only - No gradients on backgrounds or buttons - No blue-purple gradients (linear-gradient with purple/violet/indigo) anywhere - No neon colors, no rainbow palettes - No more than 3 brand colors in any single view - Text colors: #111827 (primary), #6b7280 (secondary), #9ca3af (tertiary) ## Typography - Font scale: 12px / 14px / 16px / 20px / 24px / 32px - CSS variables: --text-xs, --text-sm, --text-base, --text-lg, --text-xl, --text-2xl - Body: font-weight 400, line-height 1.5 - Headings: font-weight 600, line-height 1.25 - Do not mix px, rem, em — pick one unit system - No arbitrary font sizes outside the defined scale ## Spacing - 4px base grid: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64px - CSS variables: --space-1 through --space-16 - No magic numbers (13px, 7px, 23px, etc.) - Consistent padding within component families ## Components Cards: - Use either border (1px solid #e5e7eb) OR shadow, not both - Shadow level 1: 0 1px 3px rgba(0,0,0,0.08) - Shadow level 2: 0 4px 12px rgba(0,0,0,0.1) - Border radius: 6px or 8px, no 16px+ Buttons: - Primary: solid fill, no gradient - Secondary: outline or ghost - Hover: darken by 10%, not color switch - No rounded-full on rectangular buttons Inputs: - Border: 1px solid #d1d5db - Border radius: 6px - Focus: border-color change + outline, no glow ## Icons - Use one icon set consistently: Lucide / Heroicons / Phosphor - Size: 16px inline, 20px standalone - No emoji as functional icons ## Forbidden Patterns - No blue-purple gradients - No glassmorphism unless explicitly requested - No emoji icons - No excessive shadows on every element - No inline styles for color, spacing, or typography - No magic numbers — every value must reference a design token - No more than 2 shadow depth levels per page
