让 AI 编码工具生成前端界面时使用的一套提示词：先定技术栈，再定视觉风格，最后用设计规范约束细节。技术栈与风格取自三个自有项目的实际做法：内容站以个人站 Owlbay 为准，桌面应用以 Armadra 和 CC Switch 为准；设计规范部分整合了两套设计 Skill 的要点（出处见文末）。
一、技术栈选型
按项目类型选一套：内容为主用第 1 套，桌面工具和交互密集的应用用第 2 套。
1. 内容站（博客、文档、个人主页、产品官网）
页面以静态 HTML 输出，默认不带 JS，交互只在需要的地方加。
| 层 | 默认选择 | 说明 |
|---|---|---|
| 框架 | Astro + TypeScript | 静态输出；交互写在组件内的 <script>，确有需要再引入框架岛屿 |
| 内容 | Markdown + 内容集合（content collections） | frontmatter 用类型校验；Markdown 插件走 unified / remark |
| 样式 | 原生 CSS + 设计令牌 | 颜色、字号、行高、间距、时长全部定义在 tokens.css 的 CSS 变量里；组件用作用域样式，只引用变量 |
| 组件 | 项目自有的基础组件 | 页头、分区框架、列表行、快捷键提示、代码块、分段选择等先抽成组件，页面只组合，不另写一套 |
| 图标 | 内联 SVG 图标组件 | 一个项目只用一套，线宽与文字字重匹配 |
| 动画 | CSS 过渡 + View Transitions API | 退场或需要中断的动画用 Web Animations API；不引入动画库 |
| 字体 | Geist / Geist Mono（@fontsource-variable 自托管） | 中文回退 PingFang SC、Hiragino Sans GB、Noto Sans SC |
| 代码高亮 | Shiki 双主题 | 主题色值与设计令牌同源 |
| 搜索 | Pagefind | 构建后生成静态索引，不需要服务端 |
| 一致性检查 | 自写检查脚本，并入 check 命令 | 拦截写死的字号、间距、颜色、transition: all 等 |
技术栈要求：
使用 Astro + TypeScript，静态输出，页面默认不带 JS；交互写在组件内的 <script> 中，只在确有需要时引入框架组件。
样式使用原生 CSS：颜色、字号、行高、间距、动画时长与缓动全部定义为 tokens.css 中的 CSS 变量，组件样式只引用变量，不写字面色值和像素字号，不写 transition: all。
先抽出项目自有的基础组件（页头、分区框架、列表行、代码块、分段选择等），页面只组合这些组件。
图标使用内联 SVG 组件；动画使用 CSS 过渡与 View Transitions API，不引入动画库；字体使用自托管的 Geist 与 Geist Mono，中文回退到系统字体。
不要引入 Tailwind、UI 组件库或 CSS-in-JS。2. 桌面应用与交互密集的单页应用（后台、编辑器、工作台）
Armadra 与 CC Switch 都用这一套；新项目按 Armadra 的版本（Tailwind 4）起步。
| 层 | 默认选择 | 说明 |
|---|---|---|
| 桌面壳 | Tauri 2 或 Electron | 包体小、Rust 后端选 Tauri；需要 node-pty、完整 Chromium 能力时选 Electron（electron-vite） |
| 框架 | Vite + React 19 + TypeScript | 不需要服务端渲染 |
| 样式 | Tailwind CSS 4 + 设计令牌 | 令牌写在 tokens.css，在 @theme 中映射给 Tailwind；功能代码不写字面色值 |
| 组件 | shadcn/ui（Radix 底层） | CLI 生成的 ui/* 原样保留，令牌名遵守 shadcn 语义（--primary、--accent、--muted-foreground 等） |
| 图标 | Lucide | 16px、线宽 1.5 |
| 动画 | CSS 过渡；复杂编排用 Motion | 只动 opacity 与 transform |
| 字体 | 系统字体（SF Pro / PingFang SC / ui-monospace） | 桌面应用不加载在线字体 |
| 状态与数据 | TanStack Query + Zustand；表单 react-hook-form + Zod | 长列表用 TanStack Virtual |
| 常用部件 | cmdk（命令面板）、sonner（提示）、CodeMirror 6（编辑器）、xterm.js（终端） | 按需引入 |
技术栈要求：
桌面壳使用【Tauri 2 / Electron】，界面使用 Vite + React + TypeScript；样式使用 Tailwind CSS 4，颜色、圆角、间距、字号、动画时长定义在 tokens.css 的 CSS 变量中，并在 @theme 中映射给 Tailwind；功能代码只用令牌，不写字面色值。
组件基于 shadcn/ui，CLI 生成的 ui 目录保持原样，业务组件在其上组合；令牌名遵守 shadcn 语义。图标统一使用 Lucide；字体使用系统字体，不加载在线字体。
服务端数据用 TanStack Query，客户端状态用 Zustand，表单用 react-hook-form + Zod；长列表使用虚拟滚动。二、视觉风格
先根据页面用途选风格，再写进提示词。风格只描述方向，具体数值交给设计令牌和设计规范约束。
1. Linear 风格（内容站、个人站，参考 Owlbay）
视觉风格参考 Linear：深色背景为主，界面克制简洁；结构用 1px 细线和网格组织，不用阴影、模糊或叠加卡片区分层级，层级只靠底色微差、线的深浅和字号字重。
强调色只有一种，只用在主要操作、当前状态和焦点上；选中状态用反白表示。
排版清晰：字号阶梯少而分明，正文用无衬线字体，等宽字体只用于代码、快捷键、日期等确实需要对齐的信息。
内容以“行”而不是“卡片”呈现，每一行带上日期、标签、数量等出处信息。
全站只保留一处有记忆点的主视觉（如首页背景的缓慢文字或纹理），其他区域保持安静。
不要使用渐变文字、大面积发光、装饰性毛玻璃和满屏粒子；提供深浅两种主题，浅色主题是同一套关系的反相，并重新校对对比度。这类风格的核心做法（深色、克制、精确的几何与排版）仍是开发者工具官网的主流；渐变发光、粒子背景已经泛滥，只适合作为一处点睛，不再作为整页基调。要更彻底可以再加一条“全站零圆角，当前与聚焦状态靠反白、线色或 2px 线表达”。
2. Apple HIG 风格（桌面工作台，参考 Armadra）
Armadra 按 Apple 人机界面指南重做过全局视觉，规则都落在令牌里，并有令牌测试守住。
视觉风格参考 macOS 原生应用（Apple HIG）：默认深色，浅色是同一套语义令牌的覆盖层，每个组件在两套主题下都要检查。
层级用材质与灰度表达，不用线框：窗口底、侧栏/面板、卡片三档灰度逐级变亮；边框只用 1px、约 8% 透明度的前景色；只有浮层（菜单、对话框）使用一处阴影。
间距使用 8pt 网格（4、8、12、16、24、32）；行高：设置行 44、列表行 32、工具栏按钮 28；圆角：控件 6、卡片 10、面板 12、对话框 14，圆形元素 9999。
字体层级：标题 17 半粗、分区标题 15 半粗、正文 13 常规、辅助 11 常规，不出现小于 11px 的文字；数字使用 tabular-nums。
强调色使用系统蓝（深色 #0A84FF、浅色 #007AFF），只用于选中态、主要按钮和进度；其他按钮用灰底次要按钮或幽灵按钮。实心按钮的底色要让白字达到 4.5:1，焦点环在各级表面上至少 3:1。
状态色有固定语义：成功绿、警告橙、危险红，彼此不靠“是否闪烁”区分；业务里的品牌色（如不同 Agent 的颜色）单独成组，不挪作他用。
侧栏使用源列表样式：桌面壳下半透明加背景模糊，网页中退化为纯色；分组标题 11px 大写、次要色，选中项用强调色 15% 透明底。
设置和对话框统一用“标签在左、控件在右”的分组卡片，卡片内的行用 1px 分隔。
工具按钮 28×28、图标 16px；图标按钮不带文字，文字按钮不带图标（主要操作除外）；Tooltip 延迟 500 毫秒。
动效只用 opacity 和 transform，时长 120 到 180 毫秒，ease-out，页面切换淡入 120 毫秒，不使用弹跳。3. shadcn 中性风格（轻量工具，参考 CC Switch）
CC Switch 基本是 shadcn/ui 默认外观加 macOS 系统蓝，适合设置类、表单为主的小工具，起步成本最低。
视觉风格使用 shadcn/ui 的 neutral 主题：中性灰底，颜色以 HSL 写成 CSS 变量，提供深浅两套主题，用 .dark 切换。
强调色使用系统蓝 #0A84FF，只用于主要按钮、焦点环和选中态；危险操作用红色并与强调色明显区分。
字体使用系统字体栈（-apple-system、PingFang SC），代码与路径用 ui-monospace。
圆角：控件 6、卡片 8 到 12；阴影只用 sm、md、lg 三档轻阴影表示层级。
页面以“列表 + 卡片”组织：每页右上角只有一个添加入口，卡片只展示关键信息，详细字段放进编辑表单；同一种信息在不同页面使用相同的层级、字号、间距和操作位置。
不使用装饰性毛玻璃和渐变卡片；动画只做 200 到 300 毫秒的淡入和轻微位移，列表拖拽排序用 dnd-kit。CC Switch 目前的 index.css 里还留着 .glass、.glass-card 两个毛玻璃加渐变的卡片类，属于下文“默认要拒绝的套路”，提示词里已经去掉；要升级到更严格的规范时，直接换用 Apple HIG 风格的令牌。
交互动效（内容站）
常见手法与实现要点：
| 效果 | 推荐实现 |
|---|---|
| 页面切换 | 跨文档 View Transitions（@view-transition { navigation: auto; }），导航栏等常驻元素设固定 view-transition-name 保持不动 |
| 列表标题到详情标题 | 两页给同一元素相同的 view-transition-name，形成共享元素过渡 |
| 主题、语言切换，筛选列表 | 同文档 document.startViewTransition()，不支持时直接切换 |
| 面板开合 | 打开用 CSS 过渡，关闭用 Web Animations API 淡出后再移除 |
| 加载更多 | 只给新插入的行做短促的错开淡入，已有内容不动 |
| 滚动进入视口时出现 | CSS 滚动驱动动画（animation-timeline: view()），不支持时用 IntersectionObserver 加 class |
| 悬停与按压 | transition 只写变化的属性（color、background-color、scale）；按下时 scale: 0.97 |
交互动效要求（内容站；桌面应用的动效要求已写在 Apple HIG 风格中）：
页面切换使用 View Transitions API：跨页面用 @view-transition，主题切换、语言切换和列表筛选用 document.startViewTransition()，不支持时直接切换，不做降级动画。
所有过渡统一取自时长与缓动令牌（150 到 300 毫秒，缓出曲线）；只过渡变化的属性，不写 transition: all。
元素默认可见，动画只做增强；首屏不播放全部入场动画，只有新插入的内容才有入场效果。
悬停效果只在支持悬停的设备上启用（@media (hover: hover)）；按下时轻微缩放给出反馈。
系统开启“减少动态效果”时（prefers-reduced-motion: reduce），去掉位移、缩放和背景动画，只保留淡入淡出。
主题切换时不得出现整页闪烁或颜色逐个过渡的情况。三、设计规范
以下规范整合自两套设计 Skill：impeccable 负责“先定方向、守住质量底线、拒绝默认套路”，better 系列负责排版、颜色、布局、无障碍、细节与文案的具体规则。可整段放进提示词，也可作为生成后的自查清单。
1. 先确定页面模式
| 模式 | 访客要完成的事 | 典型页面 | 设计重心 |
|---|---|---|---|
| 说服 | 做出决定并行动 | 官网首页、营销页、定价页 | 第一屏讲清价值，视觉可以大胆 |
| 操作 | 完成任务 | 后台、仪表盘、编辑器、设置 | 可扫读、一致、符合平台习惯 |
| 阅读 | 理解内容 | 文档、文章、帮助中心 | 结构清楚，阅读体验舒适 |
| 体验 | 沉浸在作品中 | 作品集、展示页 | 作品优先，界面退后 |
模式按页面定，不按产品定：工具的官网仍是“说服”，工具本身是“操作”。
2. 排版
- 字体、字号、字重越少越好；使用有语义命名的字号阶梯，标题按层级逐级变小。
- 正文行宽控制在 65 到 75 个字符（中文约 35 到 45 个字）；正文行高约 1.5 到 1.8，标题更紧。
- 大字号收紧字距，小字号不收紧；14px 左右的界面文字不用细体，至少 400 字重。
- 标题用
text-wrap: balance，段落用text-wrap: pretty；变化的数字用等宽数字（tabular-nums）。 - 截断文字时保留查看完整内容的方式；移动端输入框字号不小于 16px，避免 iOS 自动缩放。
3. 颜色
- 颜色体系是色阶而不是零散色值：每个色阶按感知亮度均匀分布、色相保持一致，每一级都有明确用途。
- 原始色按色相命名（
--blue-500），组件只使用语义令牌（--color-accent、--color-bg-surface），令牌只在自己的用途里使用。 - 一种颜色只表达一种含义；一个视图里只有一个主操作使用实心强调色；危险色与强调色要明显区分。
- 文字对比度：正文和占位文字至少 4.5:1，大字至少 3:1；在有色背景上，次要文字从该色调或前景色派生，不用灰色。
- 深色主题不是浅色主题的简单反转：反转后降低饱和度、拉开深色端层次，再逐一检查对比度。渐变优先在
oklab色彩空间插值。
4. 布局
- 用间距而不是分割线来分组：组内紧、组间松，标题上方的留白大于下方。
- 共享对齐边线，按重要性排序；可滚动或隐藏的内容要有可见提示。
- 断点设在内容放不下的地方，而不是固定的 768/1024；用
margin-inline等逻辑属性适配多语言。 - 为内容增长和截断留余地；底部的主要操作使用吸附定位并留出安全区。
5. 无障碍
- 优先使用原生元素（
button、a、input），所有控件有可访问名称和可见的焦点样式，能完整用键盘操作。 - 点击区域不小于 24×24px（触屏建议 44×44px）；状态不能只靠颜色表达。
- 弹窗打开时锁定焦点、关闭后归还；动态内容通过
aria-live播报，错误信息出现在出错位置并说明如何修正。 - 支持 200% 缩放和 320px 宽度不丢内容；尊重
prefers-reduced-motion。
6. 细节打磨
- 使用圆角时嵌套圆角要同心：外层圆角等于内层圆角加内边距。图标按视觉居中微调，线宽与旁边文字字重匹配。
- 边框表示结构；扁平风格下层级靠底色微差和线的深浅，确需阴影时带偏移和柔和模糊。按下时轻微缩放给出反馈。
- 动画可中断，入场可错开、退场要轻；只过渡变化的属性，谨慎使用
will-change。 - 浏览器默认样式也要设计：文本选中色、光标、滚动条、焦点环、下划线位置都从配色中取值。
- 每个组件都要有悬停、禁用、加载、错误、空状态，并用真实内容检查每个断点。
7. 文案
- 语气统一：成功和引导可以轻松，日常操作保持中性，错误和危险操作冷静直白。
- 按钮用动词开头说明动作（“保存更改”而不是“确定”）；链接文字说明去向。
- 错误信息写在出错位置，说明问题和修复方法（“请输入至少 8 位密码”，不写“出错了”）。
- 空状态指出下一步；占位文字是示例，不代替标签。
8. 默认要拒绝的套路
除非需求明确要求，否则不要使用：
- 整页由同尺寸的“图标 + 标题 + 文字”卡片堆成，卡片里再套卡片。
- 大数字加小标签的“英雄指标”模板；标题上方的小号眉标签；无意义的 01 / 02 / 03 章节编号。
- 渐变文字；装饰性的毛玻璃与模糊；卡片左侧的粗彩色竖条；零模糊的硬投影。
- 把等宽字体当作“技术感”装饰；用表情符号代替图标。
- 每个区块都用同一种入场动画；按行业惯例而不是使用场景决定深色或浅色。
四、完整提示词模板
把前三部分组合成一段，替换方括号中的内容后使用。
请为【产品或页面说明】实现【页面名称】。
页面模式：【说服 / 操作 / 阅读 / 体验】。目标用户：【谁，在什么场景下使用】。必须包含：【功能与内容清单】。
技术栈：【粘贴第一部分中对应的技术栈段落】
视觉风格：【粘贴第二部分中选定的风格段落】
设计规范：
1. 字号阶梯不超过 6 级，正文行宽 65 到 75 个字符，标题使用 text-wrap: balance。
2. 只使用语义颜色令牌；一个视图只有一个实心强调色主操作；文字对比度正文至少 4.5:1。
3. 用间距分组，组内紧、组间松；断点按内容设置。
4. 使用原生交互元素，所有控件有可见焦点样式并可键盘操作；支持 prefers-reduced-motion。
5. 每个组件提供悬停、禁用、加载、错误、空状态；使用真实文案，按钮以动词开头。
6. 不使用渐变文字、装饰性毛玻璃、同尺寸卡片网格、眉标签和表情符号图标。
7. 只过渡变化的属性，减少动态效果时只保留淡入淡出；内容站的页面与主题切换使用 View Transitions。
完成后自查：在 375px、768px、1440px 宽度（桌面应用检查最小窗口与常用窗口尺寸）和深浅两种主题下检查布局与对比度，列出未满足的规范项。出处
- 技术栈与 Linear 风格的落地做法取自个人站 Owlbay（Astro 7 + 原生 CSS 设计令牌 + View Transitions）。
- Apple HIG 风格取自 Armadra 的全局视觉规范与
tokens.css（Electron + React 19 + Tailwind 4 + shadcn/ui）；shadcn 中性风格取自 CC Switch（Tauri 2 + React 18 + Tailwind 3 + shadcn/ui）。 - 设计规范提炼自 pbakaus/impeccable（Apache-2.0）与 jakubkrehel/skills（MIT，作者 Jakub Krehel，含 better-interface、better-typography、better-colors、better-layout、better-accessibility、better-ui、better-writing 等），为个人整理的摘要，非原文。