AI 网页总是同一个味garden-skills 设计方向顾问模式指南3 选 1 快速定风格【免费下载链接】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 技能内置了设计方向顾问Design Direction Advisor模式。它解决一个很常见的窘境你想让 AI 做页面却说不出想要什么风格。面对这种需求它不会追问一串品味问题而是直接摆出 3 个来自不同设计流派的候选方向你选完再一路落到具名的风格配方文件把好看点这种模糊要求拆成一系列可执行的设计决定。不知道要什么风格顾问先给你这 3 个差异化方向当需求模糊到帮我做个开发者工具的落地页风格随缘这种程度顾问的动作很直接不问你喜欢什么颜色而是端上 3 张明显不同的方向卡片。以开发者工具落地页为例典型的一组是Linear 式现代工具美学暖色近黑底、1px 发丝边框、单一紫色强调面向技术用户严肃但有设计感Pentagram 式信息架构排版就是视觉主体标题扛重活其余元素全部退后机构级可信度Are.na 式粗野主义系统字体、无圆角、无阴影直给生猛天然劝退大众脸 SaaS审美每张卡片背后按 SKILL.md 的规格都有 4 个必备件一位具名的设计师或工作室做锚点说Pentagram 式信息架构而不是含糊的简约风2–3 行为什么适合你的场景结合受众、目的、品牌成熟度3–4 个标志性视觉特征配色、字体、布局、动效里各挑硬细节可选一件知名参考作品这套机制和传统做法的区别在于不是让你描述品味而是让 3 个一眼分得开的选项替你下判断——差异足够大选择才成立。六大设计流派对照表判断哪个方向适合你的场景顾问的卡片池来自 6 大设计流派完整定义、各流派锚点清单和推荐话术模板都写在 references/design-directions.md。速查如下流派气质代表锚点最适合信息架构理性、数据驱动、层级分明Pentagram、Edward Tufte、Vignelli、Bloomberg TerminalB2B、数据产品、需要机构级信任的场景编辑 / 极简留白、精致字体、安静的质感原研哉MUJI、Apple HIG、Dieter RamsBraun、Aesop、Monocle高端、生活方式、声誉型 B2C现代工具 / Builder SaaS发丝级细节、暖黑底、单一强调色、等宽字体 chipsLinear、Vercel、Raycast、Notion开发者工具、AI 工具、B2B SaaS动效 / 实验大胆、生成式、感官冲击Field.io、Active Theory、Resn发布时刻、品牌影片、awwwards 向作品粗野主义 / 生猛反设计、诚实、故意不加修饰Are.na、Balenciaga、Bloomberg Businessweek 封面差异化、反叛文化、强表达的声音温暖人文亲切、有机、手作感Mailchimp早期、Stripe Press、Headspace教育、社区、健康类、亲民 B2C⚠️ 有一条硬性规则3 个推荐绝不能来自同一个流派。同一行的 3 张卡片长得太像你根本分不出差别选择就变成走流程。另外顾问不允许拿简约现代干净这类词当方向名——它们是 AI 默认词汇不是方向。每张卡片必须锚在具名设计师或工作室上为什么适合你那段也不能省推荐不是让你做无提示的选择题。触发条件一览什么需求唤醒顾问什么需求直接跳过顾问模式在 SKILL.md 里被定义为fallback路线触发与跳过的边界划得很清楚情形走向帮我做个好看的东西、我不知道要什么风格触发顾问模式没有任何设计上下文你也提供不了参考素材触发顾问模式主动开口推荐个风格、给我几个方向触发顾问模式已提供 Figma、截图或品牌参考跳过直接走主工作流点名方向如Linear 风格、Aesop 感觉跳过直接读对应配方文件小修改或明确的工具调用如把这个 HTML 转 PDF跳过点名锚点时主工作流只会读那一个文件说做成 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 的反模式清单里最值得记的三条别在一页里混搭两个配方——Linear 的骨架加 Aesop 的点缀通常读起来是混乱不是原创。混搭只有在用户明确要求、且你能书面说清两者为何成立时才允许粗野主义 / Y2K 必须全力投入——半吊子 Y2K 像坏了的现代站半吊子粗野主义像设计没做完。二选一全力以赴或换配方别加自己的 AI 默认装饰——配方说无阴影就别加微妙阴影说无渐变就别铺渐变网格说无 emoji就别贴一个。每加一笔 AI 味配方的辨识度就被稀释一分同份清单还禁止拿 Inter/Roboto 顶替配方指定的字体排版占一份配方身份的大头以及把配方给的限定色板补齐成更多颜色——限制本身就是配方。更完整的 AI 设计失败模式与修复方法见 references/failure-patterns.md。从模糊需求到第一行代码设计方向顾问的完整流程把整条链路串起来一次完整的顾问模式运行是这样的仍以开发者工具落地页风格随缘为例摆出 3 张卡片——来自 3 个不同流派每张带具名锚点、适配理由、签名细节你选定一个——也可以混搭两个但要说明理由顾问会先把混合方向用文字复述确认输出设计系统声明——Agent 读出对应配方把配色 / 字体 / 间距 / 圆角 / 阴影 / 动效写进一份 Markdown 声明Checkpoint 1真正等你确认后才写第一行代码交 v0 草稿——占位符 核心布局让你尽早纠偏语气与方向确认后才进入完整构建Checkpoint 2完整构建——组件、状态、动效补齐第 3 步之前还有一道功课按 references/design-calibration.md 先写一份紧凑的 Design Read产出物类型、受众、视觉语言家族、模式、约束再给 5 个旋钮打 1–10 分——视觉变异度、动效强度、信息密度、素材依赖度、品牌保真度。这 5 个分数必须影响真实决策版式变化、动效预算、每屏内容量而不是装饰性标签。先定方向、再声明系统、最后出草稿三步逐步收敛。等你坐下来的时候好看点已经变成一组可以点头、可以打回的决定。相关文件路径导航想看什么路径25 份风格配方、三重索引、反模式清单skills/web-design-engineer/references/style-recipes/INDEX.md顾问模式的触发/跳过规则技能主文件skills/web-design-engineer/SKILL.md六大流派定义、锚点清单、推荐话术skills/web-design-engineer/references/design-directions.mdAI 设计失败模式与修复方法skills/web-design-engineer/references/failure-patterns.md设计校准Design Read 与五个旋钮skills/web-design-engineer/references/design-calibration.md技能说明文档skills/web-design-engineer/README.md【免费下载链接】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），仅供参考