企业官网建设流程全解析

• AI 技能
• 前端
• 设计系统

导读

本文深度解析 skills/taste-skill-v1/SKILL.md，即 taste-skill 项目的第一代前端技能（install name 为design-taste-frontend-v1）。它是一套面向 AI 代理（Agent/LLM）的“高代理前端生成规范”，通过DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY三档 1-10 旋钮作为全局变量，驱动排版、色彩、布局、动效的确定性输出，系统性对抗 LLM 默认产出的“模板化平庸界面（AI slop）”。读完本文，你将掌握 v1 的完整基线配置、六大偏差纠正规则、三档旋钮的 1-10 分级定义、禁止模式清单、创意武库与最终起飞前检查（Pre-Flight Check），并了解如何在 Codex、Cursor、Claude Code 中安装与锁定该版本。

一、版本定位与安装方式

在深入技能规则之前，先明确 v1 在当前仓库中的位置。根据 README.md 与 CHANGELOG.md 的说明：taste-skill 仓库当前默认技能是taste-skill（install namedesign-taste-frontend），即v2（experimental），是相对 v1 的大规模重写；而 skills/taste-skill-v1/SKILL.md 保留了原始 v1，仅用于依赖其精确行为的项目，以保证向后兼容。

安装 v1（锁定版本）

仓库通过npx skills add扫描skills/目录，因此 v1 与其他技能使用同一套安装 CLI，但必须显式传入 v1 的 install name（frontmatter 中name:字段，而非文件夹名）：

# 安装单个技能，按 install name 精确定位 v1 npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1" # 安装全部技能（会包含 v2 默认版本） npx skills add https://github.com/Leonxlnx/taste-skill

安装名design-taste-frontend-v1与 v2 的design-taste-frontend不同，因此二者不会互相覆盖，也无需修改任何脚本。也可以直接把SKILL.md复制进项目，或粘贴进 ChatGPT / Codex 对话中作为上下文。此外，仓库根目录的 skill.sh 是一个本地技能注册表脚本，其中第 6 行登记了[taste-skill-v1]="skills/taste-skill-v1/SKILL.md"，执行source ./skill.sh taste-skill-v1即可输出该文档的本地路径。

v1 与 v2 的关系

从 CHANGELOG.md 可见：v2 保留了 v1 的“三旋钮哲学”（DESIGN_VARIANCE/MOTION_INTENSITY/VISUAL_DENSITY）与 Anti-slop 方向，但新增了 Brief Inference、设计系统映射、暗色模式协议、重设计协议、Block Library 契约以及更严苛的硬性禁令（如 em-dash 全面禁止）。本文主体聚焦 v1 的原始内容，如需迁移对比可参阅 CHANGELOG.md。

二、核心配置：三大旋钮的基线值

v1 文档第 1 节定义了全部生成工作的全局基线，这三个值同时充当第 3 至第 7 节的驱动变量：

文档给出的 AI 指令非常关键：所有生成的标准基线严格固定为 (8, 6, 4)，不要要求用户编辑技能文件；但必须始终倾听用户，根据用户聊天提示中的显式要求动态调整这些值。也就是说，基线只是默认值，用户自然语言中的“更保守”“更炫酷”“信息更密集”等诉求会覆盖它。使用时把这些基线值（或用户覆盖后的值）当作全局变量，驱动第 3 至第 7 节的具体逻辑，且不得自造别名（如LAYOUT_VARIANCE、ANIM_LEVEL），以保证文档内部交叉引用的一致可解析性。

三、默认架构与工程约定

v1 文档第 2 节规定，除非用户显式指定其他技术栈，否则遵守以下结构性约束以保持一致性。这些约束覆盖了依赖管理、组件边界、样式、响应式与图标体系：

• 依赖校验（强制）：导入任何第三方库（如framer-motion、lucide-react、zustand）之前，必须检查package.json。若包缺失，必须先输出安装命令（如npm install package-name）再给出代码，绝不假设库已存在。
• 框架与交互：React 或 Next.js，默认使用 Server Components（RSC）。全局状态只能在 Client Components 中工作，在 Next.js 里要用"use client"组件包裹 providers。如果第 4 或第 7 节（动效 / Liquid Glass）激活，对应交互组件必须抽离为独立的叶子组件并在顶部声明'use client'，Server Components 只渲染静态布局。
• 状态管理：孤立 UI 用局部useState/useReducer；全局状态仅用于避免深层 props 透传（prop drilling）。
• 样式策略：90% 样式使用 Tailwind CSS（v3/v4）。Tailwind 版本锁定：先查package.json，不要在 v3 项目里使用 v4 语法。v4 配置守卫：v4 下不要在postcss.config.js中使用tailwindcss插件，改用@tailwindcss/postcss或 Vite 插件。
• 反 Emoji 策略（关键）：代码、标记、文本内容、alt 文本中绝对禁止emoji，一律用高质量图标库（Radix、Phosphor）或干净的 SVG 图元替代。
• 响应式与间距：
  • 统一断点（sm、md、lg、xl）；
  • 页面布局用max-w-[1400px] mx-auto或max-w-7xl约束；
  • 视口稳定性（关键）：全高 Hero 区绝不用h-screen，一律min-h-[100dvh]，避免 iOS Safari 地址栏造成的布局跳动；
  • 网格优先于 flex 数学：绝不用复杂 flex 百分比计算（如w-[calc(33%-1rem)]），一律用 CSS Grid（如grid grid-cols-1 md:grid-cols-3 gap-6）保证结构可靠。
• 图标体系：必须精确使用@phosphor-icons/react或@radix-ui/react-icons作为导入路径（检查已装版本），并在全局统一strokeWidth（例如统一 1.5 或 2.0）。

四、设计工程指令（偏差纠正六规则）

LLM 对特定 UI 陈词滥调存在统计性偏好，v1 用六条工程化规则主动纠正这些偏差，构造高级感界面：

Rule 1：确定性排版

• 展示/标题：默认text-4xl md:text-6xl tracking-tighter leading-none。
• 反平庸：追求“Premium/Creative”气质时拒绝Inter，改用Geist、Outfit、Cabinet Grotesk、Satoshi赋予独特字符。
• 技术型 UI 规则：Dashboard/软件界面严格禁止衬线字体，只用高端无衬线搭配（Geist+Geist Mono或Satoshi+JetBrains Mono）。
• 正文/段落：默认text-base text-gray-600 leading-relaxed max-w-[65ch]。

Rule 2：色彩校准

• 约束：最多 1 个强调色（Accent），饱和度默认低于 80%。
• THE LILA BAN：严格禁止“AI 紫/蓝”审美——无紫色按钮光晕、无霓虹渐变。使用绝对中性的基底（Zinc/Slate）+ 高对比单一强调色（如 Emerald、Electric Blue、Deep Rose）。
• 色彩一致性：整个输出只用一个调色板，不在同一项目内冷暖灰之间摇摆。

Rule 3：布局多样化

• 反居中偏见：当DESIGN_VARIANCE > 4时，严格禁止居中 Hero/H1 段落，强制使用“左右分屏（50/50）”“左文右图”“非对称留白”结构。

Rule 4：材质、阴影与“反卡片滥用”

• Dashboard 加固：当VISUAL_DENSITY > 7时，严格禁止泛用卡片容器，改用border-t、divide-y或纯负空间进行逻辑分组；数据指标应“呼吸”而不被框死，除非层级（z-index）确有功能需求。
• 执行：仅当投影能传达层级时用卡片；使用阴影时，将其色调与背景色系保持一致。

Rule 5：交互 UI 状态

LLM 天然只产出“静态成功态”，必须补全完整交互周期：

• 加载态：与最终布局尺寸匹配的骨骼加载器（skeleton），避免通用圆形 spinner；
• 空状态：精心构图并说明如何填充数据；
• 错误态：清晰的内联错误提示（如表单）；
• 触觉反馈：:active时用-translate-y-[1px]或scale-[0.98]模拟物理按压，传达成功/动作反馈。

Rule 6：数据与表单模式

• 标签（Label）必须在输入框上方，辅助说明（Helper text）可选但应出现在标记中，错误文本在输入框下方；输入块使用标准gap-2。

五、创意主动性（Anti-Slop 实现）

v1 文档第 4 节要求主动实施以下高端编码概念作为基线，系统性对抗泛化的 AI 设计：

• “Liquid Glass”折射：需要玻璃拟态时超越backdrop-blur——加 1px 内边框（border-white/10）与微妙的内阴影（shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]）模拟物理边缘折射。
• 磁性微物理（当MOTION_INTENSITY > 5）：按钮向鼠标光标轻微吸附。关键：磁吸 hover 或连续动画绝不用 ReactuseState，必须只用 Framer Motion 的useMotionValue和useTransform（在 React 渲染循环之外运行），否则移动端性能崩溃。
• 永续微交互（当MOTION_INTENSITY > 5）：在标准组件（头像、状态点、背景）中嵌入无限循环微动画（Pulse 脉冲、Typewriter 打字机、Float 漂浮、Shimmer 流光、Carousel 轮播）；所有交互元素使用高级弹簧物理（type: "spring", stiffness: 100, damping: 20），禁用线性缓动。
• 布局过渡：始终利用 Framer Motion 的layout与layoutIdprops，实现状态变化时列表重排、尺寸变化与共享元素过渡的顺滑衔接。
• 错峰编排（Staggered Orchestration）：列表/网格不要瞬时挂载，用staggerChildren（Framer）或 CSS 级联（animation-delay: calc(var(--index) * 100ms)）实现瀑布式依次显现。关键：使用staggerChildren时，父级（variants）与子级必须位于同一 Client Component 树中；若数据为异步获取，先把数据作为 props 传入居中的父级 Motion 容器。

六、性能护栏

v1 文档第 5 节给出三条硬性性能约束，防止“好看但卡顿”：

• DOM 成本：颗粒/噪点滤镜只能施加在 fixed 且pointer-events-none的伪元素上（如fixed inset-0 z-50 pointer-events-none），绝不作用于滚动容器，否则会造成持续 GPU 重绘与移动端性能劣化。
• 硬件加速：绝不动画top、left、width、height，只能通过transform与opacity动画。
• Z-index 约束：绝不无理由乱用z-50、z-10；z-index 严格服务于系统性图层上下文（Sticky 导航、Modal、浮层）。

七、旋钮技术参考（1-10 分级定义）

v1 文档第 6 节给出了三个旋钮的完整 1-10 分级语义，这是调整输出风格时的权威对照表：

DESIGN_VARIANCE（布局实验度）

• 1-3（可预测）：Flexboxjustify-center、严格 12 列对称网格、等宽内边距。
• 4-7（错位）：margin-top: -2rem重叠、多样化的图片宽高比（如 4:3 与 16:9 相邻）、左对齐标题压住居中数据。
• 8-10（非对称）：瀑布流（Masonry）、分数单位网格（如grid-template-columns: 2fr 1fr 1fr）、大面积空域（如padding-left: 20vw）。
• 移动端覆盖规则：4-10 级下，md:以上的任何非对称布局，在< 768px视口必须激进回退为严格单列（w-full、px-4、py-8），防止横向滚动与布局破碎。

MOTION_INTENSITY（动效强度）

• 1-3（静态）：无自动动画，仅 CSS:hover与:active状态。
• 4-7（流畅 CSS）：transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)；用animation-delay级联做加载显现；严格聚焦transform与opacity；谨慎使用will-change: transform。
• 8-10（高级编排）：复杂滚动触发显现或视差；使用 Framer Motion hooks；绝不使用window.addEventListener('scroll')。

VISUAL_DENSITY（信息密度）

• 1-3（画廊模式）：大量留白、超大节间距，一切看起来昂贵且干净。
• 4-7（日常应用模式）：标准 Web 应用间距。
• 8-10（驾驶舱模式）：极小内边距、无卡片盒子，仅用 1px 线分隔数据，一切紧凑排布；强制：所有数字使用等宽字体（font-mono）。

八、AI Tells：禁止模式清单

v1 文档第 7 节列出了一份“AI 设计签名”清单，除非用户显式要求，否则必须严格规避这些模式：

视觉与 CSS

• 禁止默认box-shadow外发光/自动光晕，改用内边框或微染阴影；
• 禁止纯黑#000000，改用 Off-Black、Zinc-950 或炭黑；
• 禁止过饱和强调色，降饱和使其与中性色优雅融合；
• 禁止大标题过度使用渐变填充文字；
• 禁止自定义鼠标光标（过时且伤害性能与可访问性）。

排版

• 禁Inter字体，用Geist、Outfit、Cabinet Grotesk、Satoshi；
• 禁止超大 H1——首个标题不应“呐喊”，用字重与颜色控制层级，而非单纯放大字号；
• 衬线约束：衬线字体仅用于创意/编辑类设计，绝不可用于干净的 Dashboard。

布局与间距

• 内边距与外边距必须数学上完美，避免带别扭空隙的浮动元素；
• 禁止“三等分卡片”行：通用的“水平 3 个等宽卡片”功能行被禁用，改用两列锯齿（Zig-Zag）、非对称网格或横向滚动。

内容与数据（“Jane Doe 效应”）

• 禁止通用人名（“John Doe”“Sarah Chan”“Jack Su”），用高度创意、真实感强的名字；
• 禁止通用头像（标准 SVG“蛋”形或 Lucide 用户图标），用可信的真人照片占位或特定样式；
• 禁止“假完美数字”（如99.99%、50%、1234567），改用有机、凌乱的真实数据（如47.2%、+1 (312) 847-1928）；
• 禁止初创公司烂大街名（“Acme”“Nexus”“SmartFlow”），发明契合语境的优质品牌名；
• 禁止空洞填充词（“Elevate”“Seamless”“Unleash”“Next-Gen”），改用具体动词。

外部资源与组件

• 禁止失效的 Unsplash 链接，改用可靠的绝对占位图，如https://picsum.photos/seed/{random_string}/800/600或 SVG UI 头像；
• 允许使用 shadcn/ui，但绝不可停留在默认状态，必须按项目高端审美定制圆角、颜色与阴影；
• 生产级洁净度：代码必须极度干净、视觉出众、令人难忘、每个细节都精益求精。

九、创意武库（High-End Inspiration）

v1 文档第 8 节提供了一份“不要默认生成通用 UI”的灵感库。恰当场景下优先使用GSAP（ScrollTrigger/Parallax）处理复杂滚动叙事，或ThreeJS/WebGL处理 3D/Canvas 动画，而非基础 CSS 动效。关键约束：同一组件树内绝不混用 GSAP/ThreeJS 与 Framer Motion；默认用 Framer Motion 处理 UI/Bento 交互，GSAP/ThreeJS 仅用于隔离的全页滚动叙事或 Canvas 背景，且必须包裹在严格的useEffect清理块中。

标准 Hero 范式：抛弃“深色图片上的居中文字”，改用非对称 Hero——文字干净地左/右对齐，背景用一张高质量、与主题相关的图片，并施加微妙风格化渐变（依据亮/暗模式向背景色优雅变暗或变亮）。

导航与菜单：Mac OS Dock 放大镜（导航贴边、悬停图标流体缩放）、磁性按钮（向光标物理吸附）、Gooey Menu（子项如粘液般脱离主按钮）、Dynamic Island（药丸形组件变形展示状态/提醒）、上下文径向菜单（在点击坐标处展开圆形菜单）、浮动速拨盘（FAB 弹出一条弧形次操作）、Mega Menu 揭示（全屏下拉错峰淡入复杂内容）。

布局与网格：Bento Grid（非对称瓦片分组，如 Apple 控制中心）、Masonry（无固定行高的交错网格）、Chroma Grid（网格边框/瓦片显示微妙连续动画的彩色渐变）、Split Screen Scroll（滚动时两屏反向滑动）、Curtain Reveal（Hero 像幕布一样从中间拉开）。

卡片与容器：Parallax Tilt Card（3D 倾斜卡片追踪鼠标坐标）、Spotlight Border Card（光标下动态点亮的卡片边框）、Glassmorphism Panel（带内折射边框的真磨砂玻璃）、Holographic Foil Card（悬停时虹彩光线位移）、Tinder Swipe Stack（可滑走的物理卡片堆）、Morphing Modal（按钮无缝展开为全屏对话框）。

滚动动画：Sticky Scroll Stack（卡片钉住并物理堆叠）、Horizontal Scroll Hijack（纵向滚动转化为平滑横向图库平移）、Locomotive Scroll Sequence（帧率直接绑定滚动条的视频/3D 序列）、Zoom Parallax（中央背景图随滚动无缝缩放）、Scroll Progress Path（SVG 矢量线随滚动自绘）、Liquid Swipe Transition（粘液般擦拭的页面过渡）。

画廊与媒体：Dome Gallery（全景穹顶式 3D 画廊）、Coverflow Carousel（中心聚焦、边缘倾斜的 3D 轮播）、Drag-to-Pan Grid（任意方向拖拽的无界网格）、Accordion Image Slider（悬停时展开的窄条图像）、Hover Image Trail（鼠标留下弹出/淡出图像轨迹）、Glitch Effect Image（悬停时 RGB 通道位移的数字失真）。

排版与文字：Kinetic Marquee（无尽文字带随滚动反向/变速）、Text Mask Reveal（巨型文字作为视频背景的透明窗口）、Text Scramble Effect（加载/悬停时矩阵式字符解码）、Circular Text Path（沿旋转圆路径弯曲的文字）、Gradient Stroke Animation（轮廓文字沿笔画连续流动渐变）、Kinetic Typography Grid（字母网格躲避/旋转离开光标）。

微交互与特效：Particle Explosion Button（CTA 成功后碎裂为粒子）、Liquid Pull-to-Refresh（如水滴脱离的移动端刷新指示）、Skeleton Shimmer（占位框上流动的光反射）、Directional Hover Aware Button（悬停填充从鼠标进入侧精确进入）、Ripple Click Effect（从点击坐标精确扩散的视觉波纹）、Animated SVG Line Drawing（矢量实时自绘轮廓）、Mesh Gradient Background（熔岩灯般的有机动画色块）、Lens Blur Depth（动态模糊背景 UI 层以突出前景动作）。

十、“Motion-Engine”Bento 范式

v1 文档第 9 节定义了生成现代 SaaS Dashboard 或功能区块时必须采用的“Bento 2.0”架构与动效哲学，超越静态卡片，塑造“Vercel 核心 × Dribbble 干净”且依赖永续物理的审美。

A. 核心设计哲学

• 审美：高端、极简、功能化。
• 调色板：背景#f9fafb；卡片纯白（#ffffff）加 1pxborder-slate-200/50边框。
• 表面：所有主要容器用rounded-[2.5rem]；施加“扩散阴影”（极轻、广铺的阴影，如shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]）在不杂乱的前提下制造深度。
• 排版：严格Geist、Satoshi或Cabinet Grotesk字体栈；标题用细微字距（tracking-tight）。
• 标签：标题与描述必须放置在卡片外部下方，保持干净的画廊式呈现。
• 像素完美：卡片内部使用慷慨的p-8或p-10内边距。

B. 动画引擎规格（永续运动）

所有卡片必须包含“永续微交互”，遵循以下 Framer Motion 原则：

• 弹簧物理：无线性缓动，使用type: "spring", stiffness: 100, damping: 20获得高级的“分量感”；
• 布局过渡：大量使用layout与layoutIdprops，保证列表重排、尺寸变化与共享元素状态过渡顺滑；
• 无限循环：每张卡片必须有无限循环的“活动状态”（Pulse、Typewriter、Float 或 Carousel），让 Dashboard 感觉“活着”；
• 性能：动态列表包裹<AnimatePresence>并优化至 60fps。性能关键：任何永续运动或无限循环必须用React.memo记忆化，并完全隔离在独立的微型 Client Component 中，绝不触发父布局的重复渲染。

C. 五类卡片原型（微动画规格）

构建 Bento 网格（如第 1 行 3 列｜第 2 行 70/30 两列）时实现以下具体微动画：

1. 智能列表（The Intelligent List）：垂直项目堆，含无限自动排序循环，用layoutId交换位置，模拟 AI 实时排定任务优先级。
2. 命令输入（The Command Input）：搜索/AI 栏带多步打字机效果，循环输入复杂提示词，含闪烁光标与带流光加载渐变的“处理中”状态。
3. 实时状态（The Live Status）：“呼吸式”状态指示器的调度界面；含弹出通知徽章——以“Overshoot”弹簧效果出现、停留 3 秒后消失。
4. 宽幅数据流（The Wide Data Stream）：数据卡/指标的水平“无限轮播”，用x: ["0%", "-100%"]保证无缝循环，速度轻盈。
5. 上下文 UI（聚焦模式）：文档视图先错峰高亮文本块，随后“飘入”一个带微图标的浮动操作工具栏。

十一、最终起飞前检查（Pre-Flight Check）

v1 文档第 10 节规定，输出代码前必须对照以下矩阵自查，这是对逻辑施加的最后一道过滤器：

• 全局状态是否用于避免深层 prop drilling，而非随意滥用？
• 高方差设计是否保证移动端布局折叠（w-full、px-4、max-w-7xl mx-auto）？
• 全高区块是否安全使用min-h-[100dvh]而非有缺陷的h-screen？
• useEffect动画是否包含严格清理函数？
• 是否提供空状态、加载状态与错误状态？
• 是否在可能之处省略卡片改用间距？
• 是否将 CPU 密集的永续动画严格隔离在独立的 Client Components 中？

任一复选框无法诚实勾选，即视为页面未完成，必须修复后再交付。

十二、v1 的实际使用建议

• 适用场景：Landing page、Portfolio、品牌站点、SaaS 营销页等高表现力前端生成任务；v1 的规则同样适用于 React、Vue、Svelte 等框架，因为规则针对设计意图而非单一框架 API（见 README.md 的 FAQ）。
• 运行前提：需要支持npx与package.json的项目环境；技能通过 skill.sh 或npx skills add接入各主流编码 Agent。
• 与 v2 的关系：若你的工作流依赖 v1 的精确行为（如旧脚本、旧 prompts 绑定 v1 规则），用--skill "design-taste-frontend-v1"锁定；若愿意接受 experimental 并获取更强硬规则（em-dash 禁令、设计系统映射、重设计协议等），使用默认的design-taste-frontend，完整差异见 CHANGELOG.md。
• 研究背景：该技能的 Anti-slop 哲学背后有仓库 research/ 目录支撑，其中 research/laziness/README.md 系统分析了 LLM 输出截断与“偷懒”行为的根因（RLHF 与算力经济学、训练数据偏见、认知捷径、输出上限）及参数/提示词/架构层面的修复方法，可作为理解“为什么需要设计纪律”的理论依据。

• AI 技能
• 前端
• 设计系统