别让AI再交模板货Taste-Skill 的 AI前端设计方法论完整指南【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skillTaste-Skill 是一套教AI做前端界面的方法论框架。它不直接生成代码而是先逼AI完成设计推理再用三轴参数、预检清单和选型规则约束每一行输出专治AI界面千篇一律的模板味。AI 生成的界面为什么总是同一张脸居中大标题、渐变按钮、三卡片横排——换十个项目AI 交出的还是这一套。病根不在代码能力而在流程AI 拿到需求就急着开写跳过了这是什么产品、给谁看、要什么气质的设计推理。Taste-Skill 的解法是简报推理写任何代码之前AI 必须答完三道题。第一题识别项目类型别用一套模板打天下SaaS 落地页讲价值主张和转化路径作品集拼视觉表达企业官网负责建立信任博客文档服务阅读体验。同样是做个官网花艺工作室和云计算公司不该共享同一套模板。第二题调性词要翻译成设计参数用户说简约AI 不能只贴个风格标签得落成参数设计变化度压到 3-5、视觉密度压到 2-3对称布局、大留白、单色调。高端推向变化度 7-9、动效 6-8配非对称构图和材质纹理科技感取密度 4-6 加冷色调网格创意拉到 9-10允许实验性布局和交互元素。第三题受众是谁强调什么就定了B2B 采购看数据可信度与合规设计敏感型消费者看美学和情感连接技术决策者盯架构、性能和集成能力普通用户只关心好不好用、值不值。受众一定页面该放大什么、收起什么随之确定。三个 1-10 的参数到底在拧什么Taste-Skill 把视觉基调拆成三个推子像调音台一样各管一路从 1 拧到 10。设计变化度布局敢不敢出格的刻度1-3 走传统对称12 列网格、等距、居中4-7 开始偏移负边距重叠、混合宽高比、非对称对齐8-10 是艺术化非对称错落布局、分数单位网格、大尺度留白。这一档拧上去页面立刻从标准网页变成有主张的页面。动效强度动效给多少分量1-3 基本静态只留悬停反馈适合企业应用和文档站4-7 上滚动触发和视差适合营销页和作品集8-10 是电影级物理模拟加滚动劫持。 铁律只有一条动效必须服务内容叙事——引导注意力或表达状态变化不做无意义装饰。视觉密度一屏塞多少信息1-3 像画廊大留白突出焦点内容4-7 是日常应用的舒适区8-10 是驾驶舱数据密集、紧凑排布、单色字体优先。Floria 这个花艺品牌页面就是高变化度的成品错落的图文关系、克制的大留白配上中高档动效一眼脱离模板。什么时候该用现成设计系统什么时候自己写撞见官方设计系统直接装官方的需求是 Material 风格就装material/webMicrosoft 生态选 Fluent UIIBM 风和数据类界面用 CarbonGitHub 风和开发者工具用 Primer。官方包意味着组件成熟、无障碍达标、持续维护自己重写只有成本没有收益。没有官方包原生实现并标注设计来源玻璃态、粗野主义这类审美方向没有官方实现AI 需要自己写 CSS同时在注释里标清楚设计来源比如近似 Apple Liquid Glass方便团队校对和后续替换。.glass { backdrop-filter: blur(24px) saturate(180%); background: linear-gradient(135deg, rgb(255 255 255 / .3), rgb(255 255 255 / .08)); border: 1px solid rgb(255 255 255 / .32); }粗野主义更直白等宽字体、3px 黑边框、8px 硬阴影注释写明原生粗野主义实现即可。交付前AI 要给自己做哪几套体检布局四连查断点、层次、对齐、状态320px 到 1920px 逐断点走一遍确认布局不塌视觉层次靠尺寸、颜色、间距核对信息优先级对齐系统检查所有元素是否落在统一网格上交互状态把悬停、焦点、激活、禁用一次补齐缺一个都不算交付。可访问性四条线对比度、键盘、读屏、减动效文本与背景对比度卡 WCAG AA 的 4.5:1 线所有交互元素能用 Tab 键逐个到达语义化标签加 ARIA 属性让读屏软件读得通prefers-reduced-motion 用户自动切到静态替代方案。性能指标有硬线⚠️ 四条线全部达标才算通过用 Lighthouse 审计加真实用户监控双重验证指标大白话目标值FCP首屏出现内容要多久 1.5 秒CLS页面内容跳动量 0.1INP点击到响应的延迟 200 毫秒TBT交互被阻塞的总时长 300 毫秒怎么把 Taste-Skill 嵌进现有工作流图像优先先出概念图再落码用图像生成工具出视觉概念提取其中的色彩、布局、材质特征映射成 CSS 属性和组件结构再按实现效果回调参数。适合风格还没定死的早期项目。重设计审计、提取资产、渐进改先审计现有界面定位核心问题提取品牌资产颜色、字体、Logo原样保留然后按 Taste-Skill 规则逐步优化不做破坏性改动最后用 A/B 数据对比新旧设计的参与度和转化率。技能组合按项目类型配搭档MVP 验证期taste-skill 配 imagegen-frontend-web出概念快又保品牌感企业级应用配 output-skill保代码完整与规范创意作品集用 soft-skill 配 redesign-skill突出个性表达电商落地页上 gpt-tasteskill 配 image-to-code-skill冲转化。代码层面怎么保证工程质量不掉链子框架与样式跟着需求走const framework brief.includes(SEO) ? Next.js : React; const styling brief.includes(快速原型) ? Tailwind : CSS Modules; const animation motionIntensity 7 ? GSAP Motion : Motion;要 SEO 就上 Next.js快速原型用 Tailwind 起步动效强度超过 7 才引入 GSAP否则 Motion 够用。组件架构四条原则默认用 React 服务端组件不占客户端体积需要交互才引入客户端组件本地状态用 useState全局状态交给 Zustand 或 Jotai动画逻辑独立封装在客户端组件里不和业务逻辑缠在一起颜色、间距这些设计决策统一收进 CSS 变量设计令牌换主题只改一处。性能策略四件套图片走 next/image自动输出 WebP 和响应式尺寸按路由做代码分割压初始包大小字体自托管font-display: swap 防布局跳动静态资源长缓存API 响应按场景设置缓存。参数怎么调上线之后怎么继续变好先定目标再选三轴区间项目目标变化度动效密度建立信任3-52-44-6激发创意7-106-93-5提高转化5-74-75-7简化操作3-42-36-8三个典型场景的完整配置SaaS 落地页DESIGN_VARIANCE: 7 MOTION_INTENSITY: 6 VIS【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考