Garden Skills 设计方向顾问：AI 网页风格怎么选，3 个跨流派方向说清楚

Garden Skills 设计方向顾问：AI 网页风格怎么选，3 个跨流派方向说清楚

【免费下载链接】garden-skillsConardLi's open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skills

你跟 AI 说"帮我做个页面，好看就行，风格我说不清"。它大概率会回你一个熟悉的组合：Inter 字体、蓝色按钮、紫粉渐变，像全公司都用同一个模板。Garden Skills 里的 web-design-engineer 技能内置了设计方向顾问（Design Direction Advisor）模式，就是专门解决这类"风格怎么选"的问题。

一句话说清这个顾问是干嘛的

它是 web-design-engineer 技能里的兜底模式：你说不清要什么风格时启用。别的工具会反过来问"你喜欢冷色还是暖色"，它直接给你一份菜单，上面列 3 道明显不同的"菜"，你夹哪道都行。不审问品味，只给选项，这就是定位。

为什么直接给选项，而不是问你一堆品味问题

问品味问题有个死结：用户连"简约风"都未必说得清，十个问题问完，答案还是一团浆糊。顾问模式的做法是把选择题直接抛给你——从六大流派里挑 3 个方向，且 3 个必须分属 3 个不同流派。差异肉眼可见，选择才有意义。

每个方向都带 4 要素：

1. 一个具名设计师或工作室锚点，比如"Pentagram 式信息架构"，而不是"简约风"这种空话
2. 2–3 行"为什么适合你的场景"
3. 3–4 个标志性视觉特征，配色、字体、布局、动效各点一下
4. 可选项：一件知名的参考作品

一条硬规则写在技能文件里：3 个推荐绝不能来自同一个流派。同流派的 3 个方向用户分不出差别，顾问机制直接失效。

六大设计流派速查表

流派定义和推荐话术模板在 references/design-directions.md 里，每个流派还附了一段"推荐时说这几句"的样例文案。

选定之后你拿到什么：从风格到配方

你选中的流派，会变成后续所有设计步骤的上下文，并写进项目里的brand-spec.md。后面每一步决策都以这份文件为准，不会做着做着跑偏。

接下来顾问不会停在"选流派"。它会从 25 份风格配方的目录里，挑出该流派下的 2–3 个具名方案给你确认。每份配方对应一个真实品牌或设计师，写满可以直接用的数值：配色值、字体、间距阶梯、圆角/阴影/动效特征，外加"签名式细节"。以 linear.md 为例：

• 底色#08090A，带暖调的近黑，不是纯黑
• 强调色 Linear 紫#5E6AD2，全页占比不超过 5%
• 边框是 1px 发丝线，圆角最大 16，阴影"几乎不存在"
• 签名细节：键盘快捷键 chips、等宽字体代码块

也就是说，"风格"在这里落地成了一页可对照的数值清单，AI 照着执行，你照着验收。配方目录和三重索引（按流派、按适用场景、按明暗模式）见 style-recipes/INDEX.md。

哪些情况下顾问会自动让位

三种情况会自动切入顾问模式：

1. 需求极模糊："帮我做个好看的东西""我不知道想要什么风格"
2. 没有任何设计上下文，你也提供不了参考素材
3. 你主动开口："推荐个风格""给我几个方向"

反过来，出现下面任一情况，顾问直接跳过：你已经给了 Figma、截图或品牌参考；你点名了"Linear 风格""Aesop 感觉"这类具体锚点——技能会直接读对应的那一份配方文件开工。机制细节见 SKILL.md 的 Fallback 一节。

三条红线：用 AI 做页面时别做的事

INDEX 里有一组贯穿全部 25 份配方的反模式清单，最值得记的是这三条：

• ❌别在一页里混搭两个配方。"Linear 的骨架加 Aesop 的点缀"通常被读成"混乱"，而不是"原创"。混搭只在用户明确提出、且你能说清两者为何合拍时才成立。
• ❌粗野主义、Y2K 这类风格，要么全力投入，要么别选。半吊子执行出来的效果是"没做完"，不是"先锋"。
• ❌别擅自加 AI 默认装饰。配方说无阴影就别加阴影，说无渐变就别加渐变。每多加一笔默认装饰，页面就往趋同均值上滑一分。

走一遍：一次完整对话

场景："帮我做个开发者工具的落地页，风格没想法。"

1. 顾问给出 3 个方向：Linear 式现代工具美学（暖黑底 + 发丝边框 + 单一紫色强调）、Pentagram 式信息架构（排版即视觉主体）、Are.na 式粗野主义（系统字体、无圆角、直给）。
2. 每个方向附两三行"为什么适合开发者工具"，加上 3–4 个标志性视觉细节。
3. 你选 1 个；也可以混合 2 个，但要说清混合理由，顾问会先把混合方案复述一遍确认。
4. Agent 读取对应配方，输出完整设计系统声明：配色、字体、间距、圆角、阴影、动效。你确认后，它才写第一行代码——确认前动不了。
5. 第一版是带占位符的 v0 草稿，先给你纠偏方向；v0 通过后再进入完整构建。

方向、系统、草稿，每一步都卡一个确认点。方向错了代价最小，所以它被放在最前面。

相关资料在哪找

"我说不清要什么"本来是一道开放题。Garden Skills 设计方向顾问把它变成了一道选择题：3 个方向里挑 1 个，剩下交给配方。

【免费下载链接】garden-skillsConardLi's open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skills