不知道要什么风格Garden Skills 设计方向顾问帮你 3 步锁定设计方向【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skills做 AI 网页设计这件事最尴尬的开场往往不是需求太复杂而是太模糊。你说「帮我做个好看的东西」AI 只能接住「做个网页」接不住「好看」。Garden Skills 仓库里的web-design-engineer技能内置了设计方向顾问Design Direction Advisor模式就是专门解决这种 AI 生成网页风格怎么选的问题你不说风格它主动给你 3 个明显不同的方向让你挑。你说不清「好看」的时候AI 也在装懂这个场景你肯定熟悉「帮我做个落地页要好看一点。」AI 接到这句话后大概率会吐出 Inter 字体、蓝色主按钮、圆角卡片、紫粉渐变、emoji 当图标。技术上没错但视觉上和它昨天生成的 100 个页面长得一样。问题出在两头AI 的默认审美高度趋同而你作为用户恰恰说不清自己不喜欢什么、想要什么——大多数人只会说「再高级一点」。3 个差异化方向是怎么挑出来的设计方向顾问的核心逻辑很直接不问你 10 个品味问题而是端上 3 个来自不同设计流派的方向让你选。它从一个6 大设计流派的库里挑方向每个方向必须包含 4 个要素一位具名的设计师或工作室参考——比如「Pentagram 式信息架构」而不是笼统的「简约风」2–3 行为什么适合你的场景3–4 个标志性视觉特征配色、字体、布局、动效可选一件知名的参考作品6 大流派速查信息架构 vs 粗野主义流派气质代表锚点最适合信息架构理性、层级分明Pentagram、Tufte、VignelliB2B、数据产品编辑/极简留白、安静质感MUJI原研哉、Apple、Aesop高端、生活方式现代工具/SaaS发丝细节、单一强调色Linear、Vercel、Raycast开发者、AI 工具动效/实验大胆、生成式Field.io、Active Theory、Resn发布时刻、品牌大片粗野主义反设计、不加修饰Balenciaga、Are.na差异化、亚文化温暖人文亲切、有机、手作感Mailchimp、Stripe Press教育、社区、健康⚠️ 这里有一条硬性规则3 个推荐绝不能来自同一流派。同流派里挑 3 个你根本分辨不出差异选择本身就失去了意义。什么时候会触发什么时候会跳过顾问模式在以下情况切入需求真的很模糊「帮我做个好看的东西」、「我不知道想要什么风格」没有任何设计上下文你也提供不了参考素材你主动开口「推荐个风格」、「给我几个方向」反过来如果你已经提供了 Figma、截图或品牌参考或者直接点名了「Linear 风格」、「Aesop 感觉」顾问模式直接跳过进入正式工作流。选定流派后AI 会读哪份配方你选中的方向会成为后续所有设计的上下文并被记录到项目里的brand-spec.md之后的每个决策都引用它。接着顾问会从该流派对应的**风格配方Style Recipe**目录里挑 2–3 个具名方案让你确认。整个目录共25 份配方每份对应一个真实品牌或设计师写清配色值、字体、间距阶梯、圆角、阴影、动效和「签名式细节」。以 references/style-recipes/linear.md 为例配方里写得很死底色#08090A——带暖调的近黑而非纯黑强调色 Linear 紫#5E6AD2占用像素不超过 5%发丝级 1px 边框rgba(255,255,255,0.06)分隔每个面板圆角分 6 / 12 / 16 三档永不大于 16阴影「几乎不存在」阴影绝不用彩色间距阶梯固定在 4 / 8 / 12 / 16 / 24 / 40 / 64 / 96这些数字不是拍脑袋是直接从 Linear 官网页面里提取的设计 token。全部配方的目录、按流派/场景/明暗的三重索引在 references/style-recipes/INDEX.md。从「不知道」到「开始写代码」的完整流程假设你说「帮我做个开发者工具的落地页但我不知道要什么风格」一次典型对话大概长这样顾问给出 3 个方向比如Linear 式现代工具美学暖黑底 发丝边框 单一紫强调、Pentagram 式信息架构排版即视觉主体、Are.na 式粗野主义系统字体、无圆角、直给每个方向附两三行「为什么适合开发者工具」的说明和标志性视觉细节你选一个或混合两个并说清理由AI 读出对应配方文件输出完整的设计系统声明配色/字体/间距/圆角/阴影/动效等你确认后才开始写第一行代码先给一个带占位符的 v0 草稿供你纠偏——方向错了这时候改成本最低确认后进入完整构建这就是「先方向、后系统、再草稿」的三步收敛。避坑清单配方用错的三种姿势 这些坑在 references/failure-patterns.md 和 INDEX 的反模式清单里都有对应① 一页里混搭两个配方→ 现象「Linear 的骨架加 Aesop 的点缀」。为什么是坑混搭读起来像混乱不是原创两个配方各自的设计语言会互相拆台。正确做法一次只实例化一个配方真要混搭先书面确认理由比如「Aesop 的色板落在 Pentagram 的网格上」这种说得通的结构。② 粗野主义 / Y2K 半投入→ 现象只用了系统字体但圆角和阴影都还留着。为什么是坑这类风格的辨识度全来自「不加修饰」做到一半读起来像「没做完」而不是「有态度」。正确做法要么全要素投入要么直接换一个配方。③ 擅自加 AI 默认装饰→ 现象配方说无阴影你「为了立体感」加了柔和投影。为什么是坑每加一笔 AI 味辨识度就向平均值回归一分25 份配方的意义就是抗这种均值回归。正确做法配方说无阴影就别加阴影说无渐变就别加渐变——限制本身就是配方。相关文件导航文件一句话说明SKILL.md技能主文件含顾问模式机制与完整工作流design-directions.md6 大流派定义、具名锚点与推荐话术style-recipes/INDEX.md25 份配方目录与三重索引design-calibration.mdDesign Read 与五个校准旋钮failure-patterns.mdAI 设计失败模式与修复方法README.md技能说明与快速上手更想深挖某个流派的锚点细节读 references/design-directions.md想直接上手体验可以先看 demo/web-design-demo/ 里带技能与不带技能的对比页面。把「我不知道要什么风格」从一个死胡同变成一道选择题3 个流派各异的候选方向 → 1 个具名设计锚点 → 1 份可落地的风格配方——模糊的审美偏好最终都变成了可执行的设计决定。下次让 AI 帮你做页面不妨什么都不指定直接说「推荐几个方向」往往比你自己拍脑袋更接近想要的效果。【免费下载链接】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），仅供参考