Garden Skills 设计方向顾问模式完整指南3 个流派方向AI 网页不再千篇一律【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skillsgarden-skills 是 ConardLi 开源的 AI 技能合集其中的 web-design-engineer 技能内置了设计方向顾问模式当你对 AI 网页说不出我要什么风格时它不会连问 10 个品味问题而是直接端上 3 个来自不同设计流派的候选方向把模糊的审美偏好变成一道选择题。这篇文章讲清它的触发条件、6 大流派和 25 份风格配方如何配合以及从做点好看的到第一稿的完整路径。⚡ 什么时候会触发设计方向顾问模式需求模糊到一定程度时顾问模式会自动接管你给了参考或点名了风格它就直接跳过。两类边界都写得很明确。会触发的三种情况需求真的模糊做点好看的、我不知道想要什么风格、给我几个方向没有任何设计上下文你也提供不了参考素材你主动开口推荐个风格、给我几个方向会跳过的情况你已经给了 Figma、截图或品牌参考你点名了具体方向比如做一支 Apple Silicon 风格的发布动画任务只是小改动或明确调用工具比如把这份 HTML 转成 PDF。完整机制写在技能主文件 SKILL.md 里。3 个差异化方向是怎么给出的顾问不问问题直接端菜从 6 大流派里挑 3 个并守住一条硬规则——3 个必须来自不同流派否则你分不清差异选择就失去意义。每个方向都带四样东西一位具名的设计师或工作室而不是笼统的简约风、2–3 行为什么适合你的场景、3–4 个标志性视觉特征配色、字体、布局、动效可选地再加一件知名参考作品。6 大流派和它们的代表锚点定义在 design-directions.md信息架构理性、克制、层级分明适合需要可信度的 B2B 和数据产品。锚点Pentagram、Edward Tufte、Vignelli、Bloomberg Terminal编辑/极简留白与精致字体是主材料安静的高贵感适合高端生活方式品牌。锚点MUJI原研哉、Apple、Braun、Aesop现代工具/SaaS发丝级细节、暖黑底、单一强调色适合开发者工具和 AI 工具。锚点Linear、Vercel、Raycast、Notion动效/实验大胆、生成式、感官冲击适合发布时刻和品牌大片。锚点Field.io、Active Theory、Resn粗野主义反设计、生猛、故意不加修饰适合差异化和亚文化定位。锚点Are.na、Balenciaga、Bloomberg Businessweek 封面温暖人文亲切、有机、手作感适合教育、社区和健康类产品。锚点Mailchimp、Stripe Press、Headspace有个容易混淆的细节Vercel 和 Linear 的动效页其实属于克制的动效归在现代工具流派不算动效流派——后者只在动效本身就是品牌时才被推荐。如何从设计流派落到风格配方你选中的方向会作为设计上下文写进项目的brand-spec.md随后顾问从该流派里挑2–3 份具名配方给你确认而不是让你在 25 份里盲选。配方目录一共25份文件每个文件对应一个真实品牌或设计师包含可直接使用的色值、字体、间距阶梯、圆角/阴影/动效特征和签名式细节还写明了 Avoid 边界。三重索引按流派、按适用场景、按明暗模式和跨配方反模式清单都在 INDEX.md。一份文件大约 50 行整个目录约 1400 行所以规则是只读你用的那一两份——把目录全读完恰恰是这套拆文件设计要防的反模式。拿 linear.md 举例底色 #08090A带暖调的近黑、Linear 紫 #5E6AD2 只出现在不足 5% 的像素上、1px 发丝级边框、圆角最大 16、阴影几乎不存在再配键盘快捷键 chips 和等宽字体代码块——这些值可以直接粘进设计系统声明。另外两份特殊流派配方Y2K 复古未来、中世纪现代不走顾问推荐只有你直接点名锚点时才读得到。选方向时最容易踩的 3 个坑INDEX 给全部 25 份配方列了共享反模式其中最要命的是三条别在一页里混搭两个配方。Linear 的骨架加 Aesop 的点缀读起来像混乱不像原创真要混搭得能一句话说清两者为什么搭得上粗野主义、Y2K 这类风格要么全力投入要么别选。半吊子 Y2K 读起来像坏掉的现代站半吊子粗野主义读起来像没做完别擅自加 AI 默认装饰。配方说无阴影就别加微妙阴影说无渐变就别加渐变网——每加一笔 AI 味辨识度就往均值掉一分还有两条也值得记住别用 Inter/Roboto 顶替配方指定的展示字体那通常占配方 30–40% 的签名缺真实摄影或插画时直说别用 CSS 形状假装。按产出类型分类的更多失败模式与修复方法见 failure-patterns.md。 从做点好看的到第一稿的完整流程假设你说帮我做个教育社区的产品页风格随便你定。接下来每一步都有据可查顾问给出 3 个不同流派的方向比如 Headspace 式温暖人文柔和粉彩、全圆角、呼吸感动效、Aesop 式编辑/极简奶油色底、衬线正文、产品当主角、Notion 式现代工具奶油色表面、友好的衬线标题每个附两三行为什么适合教育社区和 3–4 个标志性细节你选一个或混合两个并说清理由顾问会先把混搭方案复述确认如果你说你定它挑最稳的一个通常是编辑/极简讲清理由并先提一个 5 分钟 v0 验证选中的方向写入 brand-spec.md顾问从该流派读 2–3 份配方文件给出具体选项设计系统声明配色/字体/间距/圆角/阴影/动效交你确认确认前不写第一行代码先交一份带占位符的 v0 草稿供你纠偏通过后才进入完整构建下次让 AI 做页面不妨什么都不指定直接说给我几个方向再从 3 个候选里挑——这往往比你自己拍一个风格名更接近想要的效果如果心里已有锚点比如Linear 感直接点名跳过推荐它也只读那一份配方开工。【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考