尧图网页设计 
AI 生成的页面还在模板脸Taste-Skill 高端 UI 设计三分钟上手【免费下载链接】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 写前端你八成见过这类结果深色紫蓝渐变、居中大标题、三张一样宽的功能卡片、清一色 Inter 字体。乍看不差细看全是 AI 味。Taste-Skill 就是冲着这个问题来的一组可移植的 Agent SkillsAI 编码代理会自动加载的指令文件专门拉高 AI 构建界面在布局、排版、动效、间距上的水准挡掉那种一眼 AI 的 slop。上手成本很低一条命令的事。第一步 · 一条命令装好 Taste-Skill打开终端跑这一条npx skills add https://gitcode.com/gh_mirrors/ta/taste-skill这个 CLI 会扫描仓库里的skills/目录代码技能和图像生成技能都是同一种装法。只想要某一个技能时加--skill参数指定即可比如只装移动端出图技能npx skills add https://gitcode.com/gh_mirrors/ta/taste-skill --skill imagegen-frontend-mobile不想走 CLI 也有两条路把任意一个 SKILL.md 复制进你的项目或者直接粘贴进 ChatGPT / Codex 对话里。SKILL.md 本质就是一份代理能读懂的设计指令装到哪、粘到哪规则就在哪生效。第二步 · 12 个技能怎么选先分清两类实现类出代码图像生成类只出设计图。实现类技能出代码技能干什么的taste-skill默认全能款。先读懂需求、推断设计方向再调参数输出不绑定单一视觉风格gpt-taste给 GPT/Codex 的严格变体布局变化更激进GSAP 动效方向更强image-to-code-skill先出图 → 分析图 → 写码复现一条完整管线redesign-skill老项目专用先审计现有 UI再修布局、间距、层次、样式soft-skill精致、安静、昂贵感柔和对比、大留白、优质字体、弹性动效output-skill治半成品强制完整输出不许占位符注释minimalist-skillNotion/Linear 式的编辑风产品 UI克制配色结构清晰brutalist-skill⚠️ BETA机械硬朗风瑞士字体、强对比、实验性布局stitch-skill兼容 Google Stitch 规则可导出 DESIGN.md图像生成类技能只出图技能干什么的imagegen-frontend-web网站设计稿hero 区、着陆页、多区块强排版和间距艺术指导imagegen-frontend-mobile移动端屏幕与流程iOS/Android/跨平台字体可读、成套连贯brandkit品牌工具板logo 方向、色板、字体、跨品类身份应用按场景挑全新项目、拿不准方向直接taste-skill最稳的默认项改造现有代码库redesign-skill它会先审计再动手不是一上来就重画交付物是设计稿、品牌板用图像生成类先出图再把图交给编码代理实现AI 老截断输出叠加output-skill视觉方向已经定了再加soft-skill、minimalist-skill或brutalist-skill定调第三步 · 用三个滑块调口味skills/taste-skill/SKILL.md 文件顶部有三个 1-10 的参数直接决定产出长什么样参数管什么默认值调低调高DESIGN_VARIANCE布局实验性8对称、居中、稳妥不对称、艺术化、更野MOTION_INTENSITY动效深度6只有悬停反馈滚动驱动、磁性效果、物理感VISUAL_DENSITY每屏信息量4画廊式通透仪表盘式密集什么时候动它们默认值就是为通用着陆页调好的多数情况不用碰。该动的是这几类场景信任优先的公共服务、监管行业VARIANCE 压到 3-4、MOTION 压到 2-3创意机构作品集、Awwwards 风格VARIANCE 和 MOTION 顶到 9-10安静、极简、Linear 风的需求VARIANCE 5-6、MOTION 3-4、DENSITY 2-3改造现有项目匹配现有观感全面翻新就各 2效果参考高端感长什么样下面这组案例是 Taste-Skill 产出主题围绕植物建筑分顶部和底部两段看。顶部几个细节值得放大看标题用非通用字体版式没有居中整套配色避开了 AI 最爱的紫蓝渐变走中性基调加单一强调色。底部同样不松客户评价层次清楚行动召唤区克制但醒目页脚安静、不抢戏。它不靠堆元素撑场面这就是 Taste-Skill 想要的高端。第四步 · 四条设计红线技能文件里最硬的规则可以当你的验收清单排版大标题默认text-4xl md:text-6xl tracking-tighter leading-none正文默认text-base text-gray-600 leading-relaxed max-w-[65ch]高级创意类场景禁用 Inter换 Geist、Outfit、Cabinet Grotesk 或 Satoshi技术型 UI仪表盘、软件界面禁用衬线字体色彩强调色最多 1 个饱和度低于 80%严禁AI 紫/蓝用 Zinc 或 Slate 中性基调配一个强调色Emerald、Electric Blue、Deep Rose一个调色板走完全页别在暖灰和冷灰之间来回摇摆布局布局实验性参数大于 4 时默认就是 8居中 Hero 直接禁用改用分屏、左文右图、不对称留白这类结构交互状态加载骨架屏尺寸匹配真实布局别甩一个通用圆环空状态设计出来告诉用户怎么把数据填进去错误内联在表单字段旁边报不弹一层层对话框触感:active时加-translate-y-[1px]或scale-[0.98]模拟物理按压第五步 · 动效与性能红线三条动效技巧液态玻璃backdrop-blur 只是起点再加 1px 内边框border-white/10和一层微妙内阴影模拟物理边缘折射玻璃感才立得住磁性效果MOTION_INTENSITY 大于 5 时按钮被光标轻轻拽着走。必须用 Framer Motion 的useMotionValue/useTransform让计算跑在 React 渲染周期外用useState做连续动画移动端性能直接崩持续微交互头像、状态点、背景里埋循环微动画脉冲、打字、浮动、闪光所有交互走 spring 物理stiffness: 100, damping: 20线性缓动用起来就是廉价感三条性能红线颗粒/噪点滤镜只挂在fixed pointer-events-none的伪元素上挂滚动容器上等于让 GPU 一直重绘只动画transform和opacitytop、left、width、height一律不碰z-index 只留给系统层吸顶导航、弹窗、覆盖层别满屏乱撒z-50常见问题规则绑死 React 了吗Vue、Svelte 能用吗不绑。规则针对的是设计意图不是某个框架的 API换个框架照样生效。SKILL.md 到底是个什么东西AI 代理能自动加载的可移植指令文件。装的方式有npx skills add也可以直接复制进仓库或粘贴进对话。图像生成类技能要单独装吗不用。它们和代码技能一样放在skills/目录里同一个 CLI 一次全发现。装完还是出模板脸查哪里先确认装的是哪个技能——默认 taste-skill 最稳再看三个参数是不是和场景匹配比如后台仪表盘还把 VISUAL_DENSITY 留在 4页面自然偏画廊。写在最后装一条命令、选一个技能、调三个参数然后把你原来的提示词原样丢给 AI对比一下产出。Taste-Skill 不给模板它给的是别偷懒、别求同的一套规则。先跑默认 taste-skill想微调时再翻 skills/ 目录里其他九个够你用很久了。【免费下载链接】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），仅供参考 AI 生成的页面还在“模板脸“？Taste-Skill 高端 UI 设计三分钟上手
AI 生成的页面还在模板脸Taste-Skill 高端 UI 设计三分钟上手【免费下载链接】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 写前端你八成见过这类结果深色紫蓝渐变、居中大标题、三张一样宽的功能卡片、清一色 Inter 字体。乍看不差细看全是 AI 味。Taste-Skill 就是冲着这个问题来的一组可移植的 Agent SkillsAI 编码代理会自动加载的指令文件专门拉高 AI 构建界面在布局、排版、动效、间距上的水准挡掉那种一眼 AI 的 slop。上手成本很低一条命令的事。第一步 · 一条命令装好 Taste-Skill打开终端跑这一条npx skills add https://gitcode.com/gh_mirrors/ta/taste-skill这个 CLI 会扫描仓库里的skills/目录代码技能和图像生成技能都是同一种装法。只想要某一个技能时加--skill参数指定即可比如只装移动端出图技能npx skills add https://gitcode.com/gh_mirrors/ta/taste-skill --skill imagegen-frontend-mobile不想走 CLI 也有两条路把任意一个 SKILL.md 复制进你的项目或者直接粘贴进 ChatGPT / Codex 对话里。SKILL.md 本质就是一份代理能读懂的设计指令装到哪、粘到哪规则就在哪生效。第二步 · 12 个技能怎么选先分清两类实现类出代码图像生成类只出设计图。实现类技能出代码技能干什么的taste-skill默认全能款。先读懂需求、推断设计方向再调参数输出不绑定单一视觉风格gpt-taste给 GPT/Codex 的严格变体布局变化更激进GSAP 动效方向更强image-to-code-skill先出图 → 分析图 → 写码复现一条完整管线redesign-skill老项目专用先审计现有 UI再修布局、间距、层次、样式soft-skill精致、安静、昂贵感柔和对比、大留白、优质字体、弹性动效output-skill治半成品强制完整输出不许占位符注释minimalist-skillNotion/Linear 式的编辑风产品 UI克制配色结构清晰brutalist-skill⚠️ BETA机械硬朗风瑞士字体、强对比、实验性布局stitch-skill兼容 Google Stitch 规则可导出 DESIGN.md图像生成类技能只出图技能干什么的imagegen-frontend-web网站设计稿hero 区、着陆页、多区块强排版和间距艺术指导imagegen-frontend-mobile移动端屏幕与流程iOS/Android/跨平台字体可读、成套连贯brandkit品牌工具板logo 方向、色板、字体、跨品类身份应用按场景挑全新项目、拿不准方向直接taste-skill最稳的默认项改造现有代码库redesign-skill它会先审计再动手不是一上来就重画交付物是设计稿、品牌板用图像生成类先出图再把图交给编码代理实现AI 老截断输出叠加output-skill视觉方向已经定了再加soft-skill、minimalist-skill或brutalist-skill定调第三步 · 用三个滑块调口味skills/taste-skill/SKILL.md 文件顶部有三个 1-10 的参数直接决定产出长什么样参数管什么默认值调低调高DESIGN_VARIANCE布局实验性8对称、居中、稳妥不对称、艺术化、更野MOTION_INTENSITY动效深度6只有悬停反馈滚动驱动、磁性效果、物理感VISUAL_DENSITY每屏信息量4画廊式通透仪表盘式密集什么时候动它们默认值就是为通用着陆页调好的多数情况不用碰。该动的是这几类场景信任优先的公共服务、监管行业VARIANCE 压到 3-4、MOTION 压到 2-3创意机构作品集、Awwwards 风格VARIANCE 和 MOTION 顶到 9-10安静、极简、Linear 风的需求VARIANCE 5-6、MOTION 3-4、DENSITY 2-3改造现有项目匹配现有观感全面翻新就各 2效果参考高端感长什么样下面这组案例是 Taste-Skill 产出主题围绕植物建筑分顶部和底部两段看。顶部几个细节值得放大看标题用非通用字体版式没有居中整套配色避开了 AI 最爱的紫蓝渐变走中性基调加单一强调色。底部同样不松客户评价层次清楚行动召唤区克制但醒目页脚安静、不抢戏。它不靠堆元素撑场面这就是 Taste-Skill 想要的高端。第四步 · 四条设计红线技能文件里最硬的规则可以当你的验收清单排版大标题默认text-4xl md:text-6xl tracking-tighter leading-none正文默认text-base text-gray-600 leading-relaxed max-w-[65ch]高级创意类场景禁用 Inter换 Geist、Outfit、Cabinet Grotesk 或 Satoshi技术型 UI仪表盘、软件界面禁用衬线字体色彩强调色最多 1 个饱和度低于 80%严禁AI 紫/蓝用 Zinc 或 Slate 中性基调配一个强调色Emerald、Electric Blue、Deep Rose一个调色板走完全页别在暖灰和冷灰之间来回摇摆布局布局实验性参数大于 4 时默认就是 8居中 Hero 直接禁用改用分屏、左文右图、不对称留白这类结构交互状态加载骨架屏尺寸匹配真实布局别甩一个通用圆环空状态设计出来告诉用户怎么把数据填进去错误内联在表单字段旁边报不弹一层层对话框触感:active时加-translate-y-[1px]或scale-[0.98]模拟物理按压第五步 · 动效与性能红线三条动效技巧液态玻璃backdrop-blur 只是起点再加 1px 内边框border-white/10和一层微妙内阴影模拟物理边缘折射玻璃感才立得住磁性效果MOTION_INTENSITY 大于 5 时按钮被光标轻轻拽着走。必须用 Framer Motion 的useMotionValue/useTransform让计算跑在 React 渲染周期外用useState做连续动画移动端性能直接崩持续微交互头像、状态点、背景里埋循环微动画脉冲、打字、浮动、闪光所有交互走 spring 物理stiffness: 100, damping: 20线性缓动用起来就是廉价感三条性能红线颗粒/噪点滤镜只挂在fixed pointer-events-none的伪元素上挂滚动容器上等于让 GPU 一直重绘只动画transform和opacitytop、left、width、height一律不碰z-index 只留给系统层吸顶导航、弹窗、覆盖层别满屏乱撒z-50常见问题规则绑死 React 了吗Vue、Svelte 能用吗不绑。规则针对的是设计意图不是某个框架的 API换个框架照样生效。SKILL.md 到底是个什么东西AI 代理能自动加载的可移植指令文件。装的方式有npx skills add也可以直接复制进仓库或粘贴进对话。图像生成类技能要单独装吗不用。它们和代码技能一样放在skills/目录里同一个 CLI 一次全发现。装完还是出模板脸查哪里先确认装的是哪个技能——默认 taste-skill 最稳再看三个参数是不是和场景匹配比如后台仪表盘还把 VISUAL_DENSITY 留在 4页面自然偏画廊。写在最后装一条命令、选一个技能、调三个参数然后把你原来的提示词原样丢给 AI对比一下产出。Taste-Skill 不给模板它给的是别偷懒、别求同的一套规则。先跑默认 taste-skill想微调时再翻 skills/ 目录里其他九个够你用很久了。【免费下载链接】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），仅供参考