尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

stitch-skills taste-design深度解析:反AI味设计系统生成器完整指南

stitch-skills taste-design深度解析:反AI味设计系统生成器完整指南 stitch-skills taste-design深度解析反AI味设计系统生成器完整指南【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skillsstitch-skills是面向 Google Stitch 的 Agent Skills 技能库合集其中的taste-design技能堪称反AI味的设计系统生成器——它能为你的 AI 项目生成一份强制遵循高端 UI 标准的DESIGN.md设计系统文件帮你告别千篇一律的紫色霓虹渐变和廉价感界面。本文完整解析它的原理、规则与使用方法。1 分钟了解 taste-design 是什么taste-design位于 stitch-utilities 插件 中源码目录为 plugins/stitch-utilities/skills/taste-design/。一句话概括它把反套路前端美学指令翻译成 Stitch 能听懂的语义化设计语言生成的DESIGN.md会成为你后续生成所有页面的唯一事实来源。特性说明 输入一个项目 你想要的气质描述 输出7 大章节的DESIGN.md语义化设计系统 核心目标强制剔除AI 味设计陈词滥调 依赖Stitch 服务可选 Stitch MCP Server为什么你的界面总有一股AI味做过 AI 生成界面的朋友都有同感紫色霓虹光晕、居中大标题配渐变文字、三张等大卡片横排……这些就是典型的AI 设计陈词滥调AI Tells。taste-design 的做法非常硬核在 SKILL.md 中它直接内置了一份NEVER DO 禁令清单写入生成的设计系统 禁用Inter字体AI 界面的默认脸 禁用纯黑#000000、霓虹外发光、过度渐变 禁用三列等大卡片布局 禁用假数据99.99% 在线率、124ms 平均响应这类编造指标 禁用 AI 文案陈词Elevate、Seamless、Unleash 禁用 Scroll to explore、弹跳箭头等填充式 UI 文字 关键洞察反模式清单和正面规则同等重要——正是这些禁令让输出摆脱廉价感。用品味光谱调出你的项目气质taste-design 最有意思的设计是先用三维标尺给你的项目定调SKILL.md维度低档 (1–3)中档 (4–7)高档 (8–10)密度 Density美术馆般留白日常应用均衡驾驶舱级紧凑变化 Variance可预测的对称错位不对称艺术感混乱动效 Motion静态克制流畅 CSS 动画电影级编排默认基线为创意 9 / 变化 8 / 动效 6 / 密度 5并会根据你描述的气质动态调整。也就是说你只需说我想要一个克制的、画廊般的产品官网技能就会自动匹配相应档位。四条核心规则一眼看懂高端标准 颜色校准最多一个强调色规则写在 SKILL.md强调色最多 1 个且饱和度低于 80%AI 紫/蓝霓虹风格被严格禁止必须用 Zinc/Slate 等绝对中性色打底全程只用一套色板。每个颜色都要描述性名称 十六进制值 功能角色三件套齐全。 字体架构强迫你有辨识度Inter在高端/创意场景中被直接封杀改推Geist、Outfit、Satoshi等有独特性格的字体通用衬线体Times New Roman、Georgia同样在禁列中数据密集型界面密度 7所有数字强制等宽字体。 布局原则告别三卡片套路居中 Hero 在变化 4时被封杀改用分屏、左对齐或不对称留白通用三列等大卡片禁止改为 Z 字双栏或不对称网格全高区块必须用min-h-[100dvh]而非h-screen避免 iOS Safari 跳转问题。⚡ 动效哲学弹簧物理 微交互默认弹簧参数stiffness: 100, damping: 20带来有分量的高级感每个活跃组件都应有常驻微循环状态脉冲、打字机、浮动、微光动画只允许操作transform和opacity保证硬件加速性能。生成流程从描述到 DESIGN.md当你向 Agent 提出类似Generate a premium DESIGN.md with strict typography and calibrated colors的指令时技能会按 7 步流水线工作SKILL.md定义视觉氛围mood、密度、设计哲学校准色板中性色、强调色、禁用模式建立字体架构字体栈、层级、反模式描述组件行为按钮、卡片、输入框的交互状态定义布局原则网格、留白、响应式策略编写动效哲学弹簧物理、常驻微交互列出反模式AI 味黑名单最终产出的DESIGN.md结构参考 示例模板共 7 个标准章节。想感受语义化描述的威力可以对照 design-md 的完整 DESIGN.md 示例——比如它不会写深色文字而是写炭黑色近黑 #2C2C2C用于标题与产品名比纯黑更柔和精致。快速上手安装与使用前置条件这些技能需要 Stitch MCP Server 已在你的 Agent 环境中配置并运行。一键安装技能npx skills add google-labs-code/stitch-skills触发 taste-design安装后直接用自然语言对 Agent 说Generate a premium DESIGN.md with strict typography and calibrated colors.随后把生成的DESIGN.md作为后续所有页面生成的基准即可。 完整安装方式Codex 插件市场、Claude Code、Cursor、OpenCode 手动安装见 README.md。技能组合拳和谁搭配效果最好taste-design并非孤军奋战stitch-utilities 插件里还有几个好搭档技能作用路径design-md从已有 Stitch 项目反向提炼DESIGN.mddesign-md/enhance-prompt把模糊的 UI 想法润色成 Stitch 优化提示词enhance-prompt/stitch-loop单提示词循环构建多页面网站stitch-loop/推荐工作流用taste-design或design-md生成DESIGN.md设计基准用enhance-prompt把想法结构化为高质量提示词示例参考用stitch-loop读取next-prompt.md持续迭代生成页面其中enhance-prompt会自动读取项目里的DESIGN.md把色板、字体、组件样式注入提示词——这正是 taste-design 的价值闭环先立标准再生成页面。常见问题 FAQQtaste-design 和 design-md 有什么区别Adesign-md是考古——分析已有 Stitch 项目并提炼设计规范taste-design是立规——从零生成一份强制高端标准的DESIGN.md。Q生成的设计系统太有主见了怎么办A这是刻意设计。最佳实践 明确写道Be Opinionated — 这不是中性模板它强制执行一种特定的高端美学。Q支持哪些编码 AgentA遵循 Agent Skills 开放标准兼容 Codex、Antigravity、Gemini CLI、Claude Code、Cursor 等。写在最后taste-design 的核心价值不是生成设计而是把审美判断力固化成可执行的规则一份反 AI 味清单 一套品味光谱 一份语义化DESIGN.md模板。如果你受够了 AI 生成的紫色霓虹 三卡片 Inter 字体老三样这个技能值得立即装上。更多技能代码转设计、静态 HTML 提取、上传 Stitch 等都在 stitch-design 插件 中可以按需取用。【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表