AI 技能前端设计系统【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址https://gitcode.com/GitHub_Trending/ta/taste-skill点击查看免费下载导读本文深度解析 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-skillinstall namedesign-taste-frontend即v2experimental是相对 v1 的大规模重写而 skills/taste-skill-v1/SKILL.md 保留了原始 v1仅用于依赖其精确行为的项目以保证向后兼容。安装 v1锁定版本仓库通过npx skills add扫描skills/目录因此 v1 与其他技能使用同一套安装 CLI但必须显式传入 v1 的 install namefrontmatter 中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 节的驱动变量旋钮基线值1 端语义10 端语义DESIGN_VARIANCE8完美对称艺术化混乱MOTION_INTENSITY6静态/无动效电影级/魔法物理VISUAL_DENSITY4画廊式/留白充裕驾驶舱式/数据密集文档给出的 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 ComponentsRSC。全局状态只能在 Client Components 中工作在 Next.js 里要用use client组件包裹 providers。如果第 4 或第 7 节动效 / Liquid Glass激活对应交互组件必须抽离为独立的叶子组件并在顶部声明use clientServer Components 只渲染静态布局。状态管理孤立 UI 用局部useState/useReducer全局状态仅用于避免深层 props 透传prop drilling。样式策略90% 样式使用 Tailwind CSSv3/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/软件界面严格禁止衬线字体只用高端无衬线搭配GeistGeist Mono或SatoshiJetBrains 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列表/网格不要瞬时挂载用staggerChildrenFramer或 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-10z-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流畅 CSStransition: 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 Inspirationv1 文档第 8 节提供了一份“不要默认生成通用 UI”的灵感库。恰当场景下优先使用GSAPScrollTrigger/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 RevealHero 像幕布一样从中间拉开。卡片与容器Parallax Tilt Card3D 倾斜卡片追踪鼠标坐标、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 PathSVG 矢量线随滚动自绘、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 ButtonCTA 成功后碎裂为粒子、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 两列时实现以下具体微动画智能列表The Intelligent List垂直项目堆含无限自动排序循环用layoutId交换位置模拟 AI 实时排定任务优先级。命令输入The Command Input搜索/AI 栏带多步打字机效果循环输入复杂提示词含闪烁光标与带流光加载渐变的“处理中”状态。实时状态The Live Status“呼吸式”状态指示器的调度界面含弹出通知徽章——以“Overshoot”弹簧效果出现、停留 3 秒后消失。宽幅数据流The Wide Data Stream数据卡/指标的水平“无限轮播”用x: [0%, -100%]保证无缝循环速度轻盈。上下文 UI聚焦模式文档视图先错峰高亮文本块随后“飘入”一个带微图标的浮动操作工具栏。十一、最终起飞前检查Pre-Flight Checkv1 文档第 10 节规定输出代码前必须对照以下矩阵自查这是对逻辑施加的最后一道过滤器全局状态是否用于避免深层 prop drilling而非随意滥用高方差设计是否保证移动端布局折叠w-full、px-4、max-w-7xl mx-auto全高区块是否安全使用min-h-[100dvh]而非有缺陷的h-screenuseEffect动画是否包含严格清理函数是否提供空状态、加载状态与错误状态是否在可能之处省略卡片改用间距是否将 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 技能前端设计系统【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址https://gitcode.com/GitHub_Trending/ta/taste-skill点击查看免费下载相关推荐MediaGo 的 Anti-Slop 前端设计 Skill 全解:设计判读、三旋钮与预检清单如何约束 AI 的审美MediaGo 的 Anti Slop 前端设计 Skill 全解:设计判读、三旋钮与预检清单如何约束 AI 的审美 在 AI Agent 参与前端开发的场音视频桌面应用后端Open-Codesign 前端设计反套路方法技能解析frontend-design-anti-slop 的原理与工程落地Open Codesign 前端设计反套路方法技能解析frontend design anti slop 的原理与工程落地 本篇技术指南以 open code人工智能AI 应用桌面应用mediago 设计品味基准stitch-design-taste 语义化设计系统全解析mediago 设计品味基准stitch design taste 语义化设计系统全解析 这篇技术指南以 mediago 仓库中的 .agents/skill音视频桌面应用后端上一篇如何为你的设计作品注入米哈游游戏的神秘文字风格下一篇Prisma CLI prisma deploy 命令完全指南同步服务定义、处理数据迁移与自动化部署流程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
