前端常备提示词库
从 Anthropic、Vercel 等公开的前端设计规范中提炼的常备提示词，直接复制给 Cursor、Claude Code、v0 等 AI 编程工具使用。
共 13 条 · 更新于 2026-10-31
开工前定设计方向
在编写代码前，明确主题、受众和主营任务，并输出包含色盘、字体、布局和原则的设计方案，主动避开 AI 常见默认模板。
请作为资深设计总监，先为该项目制定独特的设计方案：1. 确认核心主题与受众；2. 设定 4-6 个核心十六进制颜色；3. 规划字体与字阶；4. 用一句话和 ASCII 框架描述布局；5. 确立设计原则。严禁使用暖米色搭配红陶色、黑底酸绿、报纸风分栏、全是圆角的 SaaS 卡片等 AI 默认套路。
生成组件与排版规则
在编写 UI 组件和排版时，规范英雄区（Hero）、字体层级和视觉结构，避免低级 AI 感。
生成前端组件时请遵循：1. 英雄区（Hero）直接展示主题最具特色的内容，避免盲目使用渐变大数字和默认标签；2. 字体使用 1-2 种精选字体，正文单行长度小于 80 字符；3. 严禁在标题中仅对单个词汇变色/加粗、严禁标签全大写、严禁无意义的上标题；4. 只有内容确实是序列（如时间线）时才使用数字编号（01/02/03）。
动效与克制设计原则
在添加动画和决定视觉留白时使用，确保界面克制且高级。
请保持设计克制：1. 谨慎使用非用户触发的动效，只保留一处精心编排的加载或入场动画，严禁每个卡片都有悬停过渡或每个板块都淡入上滑；2. 将视觉独特性集中在一处，其余保持安静；3. 砍掉所有不服务于主题的装饰；4. 保证响应式适配、键盘焦点可见及无障碍访问。
自查与文案规范清单
在代码编写完成后或自查阶段，核对文案、错误提示和 CSS 样式。
请对照以下规则自查代码：1. 文案站在用户视角用简单语言书写，CTA 按钮使用主动语态（如保存修改用“保存更改”而不是“提交”）；2. 错误提示和空白屏要直接说明原因和修复方式，不道歉也不含糊；3. 检查 CSS 选择器特异性，避免 .section 和 .cta 等类名互相冲突导致间距失效。
交互与无障碍规范
写进规则文件，指导所有交互组件的键盘、焦点和状态管理
确保所有流程都可通过键盘操作并符合 WAI-ARIA 规范。优先使用 `:focus-visible` 显示可见焦点环，确保粘性头部/底部不会遮挡焦点元素。移动端输入框 `<input>` 字号需 ≥ 16px 以防止自动缩放。使用 URL 作为状态（如深度链接过滤、分页等）。链接必须使用 `<a>` 或 `<Link>` 标签，绝不能用 `<button>` 或 `<div>` 代替。图标按钮必须提供描述性的 `aria-label`。
动画与性能规范
生成动画组件或编写 CSS 样式时自查
必须支持 `prefers-reduced-motion` 减少动画变体。优先使用 CSS 动画，避免主线程 JS 驱动。动画属性优先使用 GPU 加速的 `transform` 和 `opacity`，严禁使用会触发重排的 `width`、`height`、`top`、`left`。严禁使用 `transition: all`，必须显式列出动画属性。SVG 转换应应用到 `<g>` 包装器并设置 `transform-box: fill-box; transform-origin: center;`。
表单编写规范
编写表单组件时使用，确保用户体验和表单状态正确
每个控件都必须有 `<label>` 关联，点击标签可聚焦控件。不要预先禁用提交按钮，允许提交不完整的表单以展示验证反馈。提交开始时才禁用按钮并显示 loading 指示器。绝不要拦截或禁用用户的输入、粘贴操作（即使字段只接受数字也允许任意输入再给出验证反馈）。`<textarea>` 中使用 ⌘/⌃+Enter 提交，Enter 换行。正确设置 `autocomplete` 和 `name` 属性。
内容与排版规范
前端开发自查清单，确保文案、多语言及视觉对齐符合规范
优先使用内联解释，将 Tooltip 作为最后手段。空状态、稀疏状态、密集状态和错误状态都必须完成设计。数字对比应使用表格数字（`font-variant-numeric: tabular-nums` 或等宽字体）。状态提示不能仅依赖颜色，必须包含文字标签。使用直角引号时优先使用弯引号（“ ”），并使用字符 `…` 代替三个点 `...`。使用不间断空格（` `）将单位、快捷键和名称黏合在一起（如 `10 MB`）。
键盘交互与焦点管理规则
实现导航、表单或可交互组件的键盘导航及焦点时使用
MUST: Full keyboard support per WAI-ARIA APG; visible, unobscured focus rings (:focus-visible; group with `:focus-within`); sticky/fixed elements never cover focus; manage focus (trap, move, return) per APG patterns. NEVER: `outline: none` without visible focus replacement.
表单交互与状态设计规则
编写表单、输入框、按钮提交逻辑时使用
MUST: Hydration-safe inputs; loading buttons show spinner and keep original label; Enter submits focused input (⌘/Ctrl+Enter in textarea); keep submit enabled until request starts; accept free text and validate after; errors inline next to fields and focus first error on submit; autocomplete + meaningful name; trim values. NEVER: Block paste in input/textarea.
动画与视觉动效准则
编写CSS动效或JavaScript动画时使用
MUST: Honor `prefers-reduced-motion`; animate compositor-friendly props (`transform`, `opacity`) only; animations interruptible and input-driven; correct `transform-origin`. NEVER: Animate layout props (`top`, `left`, `width`, `height`); `transition: all`—list properties explicitly.
内容溢出与截断处理规则
处理文本截断、Flex布局子项及长文本内容时使用
MUST: Text containers handle long content (`truncate`, `line-clamp-*`, `break-words`); Flex children need `min-w-0` to allow truncation; handle empty states without broken UI for empty strings/arrays.
无障碍与语义化标签规则
编写HTML结构、ARIA属性或进行可访问性检查时使用
MUST: Accurate `aria-label`; icon-only buttons have descriptive `aria-label`; decorative elements `aria-hidden`; prefer native semantics (`button`, `a`, `label`, `table`) before ARIA; use `…` character (not `...`); skeletons mirror final content to avoid layout shift.