一条命令后，AI 界面设计不再像 AI 生成的

一条命令后AI 界面设计不再像 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 界面设计技能它自己不生成页面而是给编码代理Codex、Cursor、Claude Code 等提供一套可执行的设计规则解决 AI 生成网页千篇一律、模板感重的问题。如果你也见过那种熟悉的紫色渐变、三列等宽卡片、居中 hero装完这个技能后再跑一次同样的需求就能感觉到差别。安装 taste-skill 并看到第一个设计效果安装就是一条 npx 命令。CLI 会扫描仓库里的 skills/ 目录把全部技能装上包括输出代码的实现技能和只输出参考图的图像生成技能npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill如果只要默认设计技能用--skill指定安装名npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend注意这里传的是安装名技能文件头部的name字段不是文件夹名直接写taste-skill会报找不到。装完把需求丢给代理即可比如给一个花艺设计工作室做官网落地页。代理会先给出一行design read类似按高端消费品牌读深色底、低饱和、单一强调色再开始写代码。仓库里有一个这样做出来的成品Floria 花艺工作室官网就是默认规则下的输出方向左对齐分栏布局强调色全页只出现一种没有紫色渐变没有装饰性小标签。AI 界面设计反模板的 4 个机制先读需求再动手。规则要求代理先判断页面类型、受众、用户用的风格词再用一行话声明设计方向真不确定时只问一个问题。大部分模板化输出来自模型不读上下文就跳到默认审美这一步是第一道过滤。三个旋钮门控所有决策。DESIGN_VARIANCE布局实验度、MOTION_INTENSITY动画深度、VISUAL_DENSITY信息密度各 1-10基线 8/6/4。布局、动效、间距都受这三个数约束换风格不用重写规则需求里写一句minimalist、Linear 风格代理就会调到 5-6/3-4/2-3 一带。按名字点名禁止 AI 陈词滥调。规则逐条列出了模型的默认习惯AI 紫色渐变Lila 规则、三列等宽卡片、Inter 作默认字体、每个章节标题上方的 eyebrow 小标签、em-dash 等同时用色彩一致性锁要求强调色全页统一。这些禁令来自项目附带的 production test 对比结果不是审美偏好。该用官方设计系统就用官方。需求对应到 Fluent、Carbon、Material、shadcn 这类官方体系时直接装官方包不手写 CSS 仿制且一个项目只用一套。交付前还有一份 pre-flight 清单要逐条过按钮对比度达到 WCAG AA正文 4.5:1、CTA 文字不换行、全页主题锁定等有一条不过就继续改。官网、作品集、SaaS 仪表板该怎么调项目类型适用技能方向VARIANCE / MOTION / DENSITY品牌 / SaaS 官网落地页taste-skilldesign-taste-frontend默认 8/6/4偏极简时降到 5-6 / 3-4 / 2-3作品集 / 创意工作室gpt-tasteskillGPT/Codex 向的严格版9-10 / 8-10 / 3更强非对称布局与滚动动效SaaS 产品内部仪表板不在 taste-skill 范围内转 Fluent / Carbon / shadcn 等官方体系密度 8-10数字用等宽字体卡片让位于留白差异一句话官网拼首屏印象控制单屏信息量仪表板拼数据密度这个技能刻意不碰它避免把落地页规则套到产品 UI 上。安装后常见的 4 个坑与修法--skill taste-skill找不到。症状安装报错。原因--skill只认安装名不认文件夹名。修法用 README 技能表里的名字默认技能是design-taste-frontend。升级后行为变了。症状输出风格和以前明显不同。原因默认技能已升到 v2 实验版是一次大规模重写安装名没变但规则全变了。修法依赖 v1 行为就安装design-taste-frontend-v1固定版本完整差异看 CHANGELOG.md。装完还是紫色渐变、三列卡片。症状输出没有变化。原因代理加载的是不完整或过期的 SKILL.md。修法检查上下文里的文件是否包含三个旋钮和 pre-flight 清单缺了就重跑 npx 安装命令更新。图像生成技能不出代码。症状以为 brandkit 能直接产出站点代码。原因imagegen-frontend-web、brandkit 这类技能只输出参考图文档明确标注 no code。修法生成图片后交给编码代理或用 image-to-code-skill 一步完成生图、分析、写码的流程。生态与进阶仓库里的 research/ 目录收录了一组关于LLM 为什么输出不完整内容的实验这也是单独存在 output-skill强制完整输出、禁止占位注释的原因。stitch-skill 支持导出 Google Stitch 格式的 DESIGN.md三个图像生成技能可以配合 ChatGPT Images 先出 moodboard再把成图交给编码代理落地。下一步做什么下次做官网时装上design-taste-frontend先让代理给出一行 design read再对照 pre-flight 清单验收成品。如果你经常需要参考图把imagegen-frontend-web一起装上出图和写码分成两步做。【免费下载链接】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），仅供参考