企业官网建设流程全解析

AI 网页总是同一个味？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

garden-skills 是 ConardLi 维护的开源 AI 技能集合，其中的 web-design-engineer 技能内置了设计方向顾问（Design Direction Advisor）模式。它解决一个很常见的窘境：你想让 AI 做页面，却说不出想要什么风格。面对这种需求，它不会追问一串品味问题，而是直接摆出 3 个来自不同设计流派的候选方向；你选完，再一路落到具名的风格配方文件，把"好看点"这种模糊要求拆成一系列可执行的设计决定。

不知道要什么风格？顾问先给你这 3 个差异化方向

当需求模糊到"帮我做个开发者工具的落地页，风格随缘"这种程度，顾问的动作很直接：不问你喜欢什么颜色，而是端上 3 张明显不同的方向卡片。以开发者工具落地页为例，典型的一组是：

• Linear 式现代工具美学：暖色近黑底、1px 发丝边框、单一紫色强调，面向技术用户，"严肃但有设计感"
• Pentagram 式信息架构：排版就是视觉主体，标题扛重活，其余元素全部退后，机构级可信度
• Are.na 式粗野主义：系统字体、无圆角、无阴影，直给生猛，天然劝退"大众脸 SaaS"审美

每张卡片背后，按 SKILL.md 的规格都有 4 个必备件：

1. 一位具名的设计师或工作室做锚点（说"Pentagram 式信息架构"，而不是含糊的"简约风"）
2. 2–3 行为什么适合你的场景（结合受众、目的、品牌成熟度）
3. 3–4 个标志性视觉特征（配色、字体、布局、动效里各挑硬细节）
4. 可选：一件知名参考作品

这套机制和传统做法的区别在于：不是让你描述品味，而是让 3 个一眼分得开的选项替你下判断——差异足够大，选择才成立。

六大设计流派对照表：判断哪个方向适合你的场景

顾问的卡片池来自 6 大设计流派，完整定义、各流派锚点清单和推荐话术模板都写在 references/design-directions.md。速查如下：

⚠️ 有一条硬性规则：3 个推荐绝不能来自同一个流派。同一行的 3 张卡片长得太像，你根本分不出差别，选择就变成走流程。

另外，顾问不允许拿"简约""现代""干净"这类词当方向名——它们是 AI 默认词汇，不是方向。每张卡片必须锚在具名设计师或工作室上，"为什么适合你"那段也不能省，推荐不是让你做无提示的选择题。

触发条件一览：什么需求唤醒顾问，什么需求直接跳过

顾问模式在 SKILL.md 里被定义为"fallback"路线，触发与跳过的边界划得很清楚：

点名锚点时，主工作流只会读那一个文件：说"做成 Linear 风格"就打开 references/style-recipes/linear.md，其余 24 份配方一律不碰。

选定流派之后：从"方向"落到 25 份风格配方

你选中的流派会被写进项目的brand-spec.md，成为后续所有步骤的设计上下文；随后顾问会从该流派的配方目录里挑 2–3 个具名方案请你确认。

配方目录共 25 份文件，每一份都锚定一个真实品牌或设计师，里面是可以直接搬走的硬数值：配色 hex、字体与字重、间距阶梯、圆角/阴影/动效特征，外加 3–5 个让配方"可辨认"的签名式细节和"不适用场景"边界。以 Linear 配方为例：

• 底色#08090A：带暖调的近黑，不是纯黑
• 强调紫#5E6AD2：占比不超过屏幕 5%
• rgba(255,255,255,0.06)的 1px 发丝边框，分隔每个面板
• 圆角封顶 16，阴影"几乎不存在"
• 键盘快捷键 chips、等宽字体代码块等标志性细节

完整目录在 references/style-recipes/INDEX.md，提供按流派 / 按适用场景 / 按明暗模式的三重索引，以及一份跨配方的反模式清单。还有个效率细节值得注意：整个目录约 1400 行，单份配方约 50 行——逐份加载才是设计意图，一次性全读正是这种拆分要防止的反模式。

定了配方之后最容易踩的 3 个坑：混搭、半吊子、私自加 AI 味

INDEX 的反模式清单里，最值得记的三条：

1. 别在一页里混搭两个配方——"Linear 的骨架加 Aesop 的点缀"通常读起来是混乱，不是原创。混搭只有在用户明确要求、且你能书面说清两者为何成立时才允许
2. 粗野主义 / Y2K 必须全力投入——半吊子 Y2K 像"坏了的现代站"，半吊子粗野主义像"设计没做完"。二选一：全力以赴，或换配方
3. 别加自己的 AI 默认装饰——配方说"无阴影"就别加微妙阴影，说"无渐变"就别铺渐变网格，说"无 emoji"就别贴一个。每加一笔 AI 味，配方的辨识度就被稀释一分

同份清单还禁止拿 Inter/Roboto 顶替配方指定的字体（排版占一份配方身份的大头），以及把配方给的限定色板"补齐"成更多颜色——限制本身就是配方。更完整的 AI 设计失败模式与修复方法，见 references/failure-patterns.md。

从模糊需求到第一行代码：设计方向顾问的完整流程

把整条链路串起来，一次完整的顾问模式运行是这样的（仍以"开发者工具落地页，风格随缘"为例）：

1. 摆出 3 张卡片——来自 3 个不同流派，每张带具名锚点、适配理由、签名细节
2. 你选定一个——也可以混搭两个，但要说明理由，顾问会先把混合方向用文字复述确认
3. 输出设计系统声明——Agent 读出对应配方，把配色 / 字体 / 间距 / 圆角 / 阴影 / 动效写进一份 Markdown 声明，🛑Checkpoint 1：真正等你确认后才写第一行代码
4. 交 v0 草稿——占位符 + 核心布局，让你尽早纠偏语气与方向，确认后才进入完整构建（Checkpoint 2）
5. 完整构建——组件、状态、动效补齐

第 3 步之前还有一道功课：按 references/design-calibration.md 先写一份紧凑的 Design Read（产出物类型、受众、视觉语言家族、模式、约束），再给 5 个旋钮打 1–10 分——视觉变异度、动效强度、信息密度、素材依赖度、品牌保真度。这 5 个分数必须影响真实决策（版式变化、动效预算、每屏内容量），而不是装饰性标签。

先定方向、再声明系统、最后出草稿，三步逐步收敛。等你坐下来的时候，"好看点"已经变成一组可以点头、可以打回的决定。

相关文件路径导航

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