ARTICLE · 1090172
AI做的网站总像一个模子,Taste Skill想改掉这张模板脸
AI做的网站总像一个模子，Taste Skill想改掉这张模板脸
让AI做一个网站，很容易得到一张似曾相识的页面：正中间一行大标题，下面两个按钮，再往下是三张大小相同的功能卡片。换个产品名、改个主色，这套结构可以用在记账软件、咖啡店，也可以用在个人作品集上。页面能打开，组件也齐全，可你很难从中认出这到底是谁的网站。
Taste Skill盯上的，就是这种令人疲倦的相似。它把设计方向、版式选择、动效强度和交付检查写进一套供AI编程助手读取的规则，让模型在写页面之前，先回答一个通常被跳过的问题：这个网站究竟要让什么人，看懂什么，接着做什么？
截至2026年9月28日，skills.sh的项目页面显示，design-taste-frontend的安装计数为52.83万。这说明它已经获得相当多关注，不过安装次数并不等于独立用户数，更不能直接证明页面效果。比热度更值得弄明白的，是它能改变哪些设计决策，以及你该怎样提出一个足够明确的需求。
先弄清它是什么，才不会把工具用错地方
Taste Skill是一组开源的前端设计技能，代码仓库由Leonxlnx维护。这里的Skill，可以理解为编程助手在处理特定任务时读取的工作说明。它通常包含适用场景、操作顺序、设计约束和检查要求。真正理解需求、编辑代码、启动项目的，仍然是你所使用的AI编程助手。
这层区别决定了它的使用方式。你不会得到一个独立的网页设计软件，也不是按下按钮就能领取一套已经上线的网站。你把Skill交给支持它的助手，再提供项目和需求，由助手参照这些规则完成实现。模型的能力、项目现状、参考素材和你给出的信息，都会影响结果。
目前默认的design-taste-frontend对应v2实验版，主要面向落地页、作品集和网页改版。原来的v1仍然保留，安装名称为design-taste-frontend-v1。主技能明确收窄了范围：复杂仪表盘、数据表格和多步骤产品界面，并不在它当前的主要目标内。准备做一个有权限管理、审批流和大量表格的企业后台时，不能仅凭它擅长营销页面，就推断它也覆盖完整的产品设计。版本和范围可以在项目仓库中查看。
对个人开发者、小团队和需要频繁做活动页面的人，它的价值很具体：把原本需要反复追问的设计细节，提前放进工作过程。诸如主按钮是否突出、留白是否有目的、各段内容是不是反复套用同一种结构，都有了可以讨论的依据。它提供的是一套有偏好的设计指导，使用者仍要判断这些偏好是否适合自己的读者。
同样是做网站，需求写法会把结果带向两个方向
假设我们要为一家花艺工作室制作周末体验课报名页。这是一个用于说明方法的虚构案例，没有真实报名数据，也没有进行页面效果实测。
如果只说“帮我做一个高级、有设计感的花艺网站”，助手可以自由发挥的空间非常大。它可能把花束照片铺满第一屏，再加一句“让美好自然发生”。看上去像一个品牌网站，却没有回答想报名的人最关心的事：零基础能不能参加、什么时间上课、费用包含什么、作品能不能带走。
我更愿意先把这些信息写出来，再讨论视觉。可以给出这样的需求：
为一家社区花艺工作室制作周末体验课报名页。读者主要是第一次参加花艺课的成年人，他们需要先确认课程适不适合自己，再查看时间、地点和费用。页面气质自然、清楚、有生活感。使用我提供的真实课堂与花材照片，保留现有绿色标志。首屏说清课程内容，并让人能直接查看场次。课程日期、价格和名额从提供的资料读取；缺失内容标记待补充，不编造学员评价和报名人数。移动端优先，避免大段滚动动画。先说明你的设计方向和三个参数，再开始实现。
这段需求没有指定每个圆角的大小，却给出了足以影响页面结构的信息。因为读者是新手，“课程会做什么”应该比老师的品牌宣言更早出现；因为目的是报名，场次入口就不该藏在长篇介绍之后；因为有真实课堂照片，设计可以围绕人物和操作过程组织，不必用泛泛的花朵装饰填满空白。
官方提示指南也把页面类型、产品、读者、气质、参考和应避免的方向放在前面。我的建议是再补上一项：读者完成决定需要哪些事实。它能把“高级感”这种难以检验的要求，转成更明确的页面任务。
参考网站同样要说明参考的是哪一部分。喜欢某个摄影师网站，可能是喜欢它的照片比例和文字节奏，并不代表报名页也需要隐藏导航、全屏转场。你可以直接告诉助手：“参考这张页面的图文关系，课程信息保持清晰直给。”这种限定通常比连续堆叠“极简、现代、精致、惊艳”更有用。
三个参数很好记，难的是知道什么时候该调低
Taste Skill把一些设计倾向归纳成三个1到10之间的参数。当前主技能中的默认值是设计变化8、动效强度6、视觉密度4。它们是起点，需求和上下文可以覆盖，不是设计质量的评分。具体定义见主技能文件。
DESIGN_VARIANCE决定版式愿意偏离常规多少。 数值较低时，更偏向稳定、对称和容易预测的布局；数值较高时，可以尝试不对称、错位和更强的视觉个性。对于花艺课报名页，适度变化足够了：课程介绍与照片可以有大小对比，但场次、价格和报名入口应当保持稳定。不能为了让页面“有设计”，把读者需要反复查看的内容拆散到四处。
MOTION_INTENSITY决定动效的活跃程度。 它涉及页面进入、悬停、滚动和组件变化时的表现。摄影作品集可以用较强的转场建立观看节奏，社区课程页面则没有必要让每张照片都追着鼠标移动。一个明确的按钮反馈、一次克制的内容出现，往往已经能让操作显得完整。调低动效不是放弃设计，而是在为使用场景做取舍。
VISUAL_DENSITY决定同一片空间里呈现多少信息。 低密度更舒展，高密度更紧凑。留白太少，报名页像一张塞满文字的通知；留白太多，用户为了找日期和价格要滑过数屏。密度要围绕信息关系来调：同一个场次的时间、费用和剩余名额应靠近，课程故事和详细交通说明可以留到后面。
如果由我为这个虚构案例设定第一轮方向，会从变化5、动效3、密度4开始，并要求助手解释每个数值怎样落到页面上。这只是一个起始方案，不是官方预设。看完实际页面后，如果所有区域仍像同一张卡片，可以提高版式变化；如果手机上找场次费劲，应先调整内容位置和密度，而不是继续加动画。
最容易走偏的做法，是把三个参数全部拉高，然后期待效果“更专业”。它们表达的是方向。动效更强可能更吸引注意，也可能延迟操作；版式更自由可能更鲜明，也可能让阅读顺序难以判断。每次改参数，最好同时说清你希望解决的具体问题。
安装并不复杂，关键是让助手实际读到它
项目给出的安装方式使用Skills命令行工具。在有Node.js和npm环境的终端中，可以按名称选择主技能：
npx skills add Leonxlnx/taste-skill --skill design-taste-frontend这条命令的用途是安装技能规则，不会替你创建业务项目。安装过程中应确认它被放入自己实际使用的助手和作用范围；不同助手对技能的发现、展示和调用方式可能不同。安装完成后，在会话中明确要求使用design-taste-frontend，并让助手先给出对当前需求的设计理解，比只看到“安装成功”更能说明规则已经进入这次任务。
接下来把工作目录、现有技术栈、素材位置和页面需求一起交给它。已有项目尤其要说明哪些内容必须保留。对于完全新建的项目，也要讲清需要的是静态展示、报名表单，还是连接真实后端的业务流程。一个看起来完整的表单，可能仍只完成了前端；是否提交到正确服务，需要另外验证。
现在默认安装的是v2实验版，项目的更新记录明确保留了这一状态。如果教程展示的规则与你安装后的内容不同，应先确认版本；需要复现旧方案时，再考虑选择v1。记录所用版本或仓库提交，也方便以后解释为什么同样的需求生成了不同结果。
仓库里还有其他用途的技能。redesign-existing-projects更偏向检查并改进现有页面；GPT Taste等变体有各自的规则取向；涉及图片生成的条目也有不同工作目标。初次使用先选一个与任务相符的入口就够了。把多套审美规则同时塞进会话，很容易让助手在“极简留白”“内容紧凑”“强烈动效”之间来回摇摆。项目当前有哪些条目、分别怎样安装，以官方文档为准。
它怎样让页面不再像模板拼装
Taste Skill对居中的通用首屏、三张等宽功能卡片、随手添加的渐变等常见模式有很强的抵触。这种鲜明态度，是它容易被记住的原因。但真正值得借鉴的部分，是让页面中的选择彼此一致，而不是凑齐一份“我没有使用这些元素”的清单。
拿花艺课页面来说，第一屏只需要让读者知道这是怎样的一堂课，并找到查看场次的入口。往下可以用一张真实课堂照片配一段课程说明，再把学习步骤写成自然的过程，随后集中展示场次信息。老师介绍、交通和常见问题各有不同内容，未必要塞进同样的矩形容器里。版式变化来自内容本身的差别，页面才不会像在轮流展示组件库。
官网列出的Floria示例可以作为观察图文比例和页面气质的入口。看示例时，值得追踪的是图片怎样承担主题、文字怎样建立层级、按钮怎样获得注意。一个精致的示例能提供方向，却无法替自己的产品回答“用户究竟来这里找什么”。
字体也需要结合真实内容看。英文网站的大字号标题和紧凑字距，换成长一些的中文句子，可能马上挤成三四行。选了有个性的英文字体，中文部分还可能落到另一套默认字体上，整页气质随之改变。做中文站时，我会把最终要用的中文标题、较长的课程名和手机屏幕一起放进预览，而不是拿短英文占位词判断排版已经完成。
配图则决定页面有没有属于自己的细节。一束普通素材花束，能够说明“这是花艺”；老师如何帮助新手修剪花枝、学员最终带走什么作品，才能说明“这是怎样的一堂课”。如果暂时没有这些材料，就保留待补充位置。把无关图片铺得很满，或者让模型编出整齐的好评和漂亮的报名数字，都不能弥补真实信息的缺口。
还有一个常被忽略的环节是状态。按钮按下后发生什么，提交失败能否重试，加载时是否给出反馈，键盘移动到操作区时有没有清楚的焦点提示，这些细节不一定出现在宣传截图里，却会影响真实使用。项目的改版技能把这类检查纳入审视范围。对一个要公开使用的网站，它们理应与字体、色彩和间距一起完成。
改现有网站，先决定什么值得留下
从零做演示页，可以大胆试。给一个已经有人使用的网站改版，顺序就不一样了。假如花艺工作室已经在公众号里放了报名链接，老用户习惯从“课程安排”找到场次，视觉升级时顺手换掉路径、改掉导航名称，可能让原本顺畅的流程出现断点。
我会先让助手列出三类东西：已经有效的内容、明确存在的问题，以及这次必须保留的部分。比如保留绿色标志和课程照片，解决手机上场次难找的问题，同时保持已有报名地址、表单字段和提交方式不变。这样，设计讨论会围绕一个可以核对的目标展开，而不至于变成整站推倒重来。
改动也可以分轮进行。先把课程时间和价格放到更容易理解的位置，再统一文字层级和间距，最后判断是否需要增加动效。每轮都看真实页面，而不是只看助手描述了多少“优化”。如果第一次调整已经解决用户找不到报名入口的问题，下一步未必是继续做得更复杂。
对AI给出的建议，同样要做内容判断。某些设计规则倾向于用看起来更自然的数字和文案消除占位感，但一个网站上的人数、评价、成绩和客户名单都应有真实依据。没有资料就写明待补充，不能把“更像真的”当成“是真的”。这件事不会因为安装了设计Skill而自动得到保证。
怎样判断它有没有帮上忙
如果想比较使用前后的差别，可以用同一份需求、相同素材和同一技术栈，分别生成不加载与加载Skill的两个版本。这是一种建议的比较方法，本文没有执行这组对照，也不预设哪个版本一定胜出。
先看读者能否迅速回答几个问题：页面提供什么，是否适合我，关键信息在哪里，下一步怎么做。对于花艺课，能清楚找到日期、费用和报名方式，比“有多少种转场”更接近实际目标。再看文字是否读得舒服、照片是否切到主体、手机上有没有横向溢出，以及按钮和表单是否真的完成了预期操作。
评价时最好给出能执行的反馈。“还不够高级”会让助手继续猜；“手机首屏看不到课程是什么，照片占得太高，请把课程说明和场次入口提前”就明确得多。又比如，与其说“留白再大一点”，不如指出“场次标题和下一组日期挨得太近，分不清属于哪一场”。你描述的是阅读中遇到的困难，助手才能据此修改，而不是不断换一种装饰。
我对Taste Skill最感兴趣的地方，是它让前端生成中的审美选择变得可讨论。三个参数、设计方向和检查要求，让“好看一点”有机会变成更具体的协作。但它那份强烈的反模板态度，也需要保留一点距离：三张等宽卡片有时就是最清楚的比较方式，渐变也可能属于一个品牌长期使用的视觉语言。把这些全部删掉，再统一换成另一套流行风格，网站仍然可能长得一样。
因此，我会把它用于快速建立第一轮有方向的页面，再用真实内容和实际使用把页面改到位。花艺工作室的读者最终应该看见的，是自己将参加怎样的一堂课，在哪里、什么时候参加，怎样报名。页面有了这份具体，审美才有地方落脚。