尧图网页设计 
1. 为什么 Cursor 写的前端总有一股塑料味你有没有过这种体验在 Cursor 里敲一句「帮我写个 SaaS 落地页」几秒钟代码就出来了npm run dev一跑页面确实能看——但就是哪里不对劲。紫蓝渐变铺满首屏卡片圆角一律rounded-2xl按钮 hover 的时候往上弹一下、阴影放大一圈图标全是 emoji 轮着上。功能没毛病可整体透着一股廉价感像某个模板站批量导出的 demo。这不是你的 prompt 写得差也不是模型不行。问题出在训练数据的分布上AI 编码工具见过的前端代码里Tailwind 默认色板、组件库官方示例、各种「10 分钟搭一个 landing page」的教程占了绝大多数。这些素材本身就是高度同质化的模型学完之后默认审美自然就停在这个水平线上。你让它自由发挥它就会把训练集里最高频的那套组合原样吐出来——高饱和渐变、大圆角、弹跳动效、emoji 图标四件套齐活。Taste Skill 这个项目就是冲着这个毛病去的。它不是一个框架也不是 npm 包而是一组SKILL.md规则文件。你把它丢进项目里Cursor 在生成前端代码时会读取这些规则相当于给 AI 立了一套设计规范哪些配色不许用、哪些动效不许加、图标该怎么处理。核心机制就俩字——反套路把 AI 最爱偷懒的那几招全列成黑名单逼它走更克制的路线。这篇会带你把SKILL.md的骨架搭起来讲清楚它在 Cursor 项目里该放哪、怎么被读取最后用一段生成前后的对比验证让你确认规则真的生效了。适合正在用 Cursor 写前端、又不想每次手动改样式的开发者。2. 把审美约束沉淀成 SKILL.md 规则文件先说清楚 Taste Skill 的定位。它解决的是「视觉风格层面的输出收敛」不碰代码质量、不碰组件拆分、不碰项目结构。你指望它帮你把components/目录规划好那是另一回事。它的价值在于把「什么算好看」这件本来很主观的事拆成一条条 AI 能执行的硬规则。项目提供了多套SKILL.md对应不同场景。default-v2是通用默认版适合大多数项目default-v1规则稍松早期版本gpt-taste专门针对 GPT 系列模型的审美偏好做纠正image-to-code适合从截图还原代码redesign用于重构已有页面。风格向的还有soft柔和、minimalist极简、brutalist粗野主义、output输出导向、stitch拼接。另外带三个出图专用规则imagegen-web、mobile、brandkit配合 AI 生成设计稿或品牌视觉用。规则文件的结构其实很朴素本质就是 Markdown 里写清楚「禁止项」和「推荐项」。AI 读进去之后生成代码时会尽量避开黑名单里的写法。下面是我整理的一份SKILL.md骨架你可以直接拿去改# Taste Skill - default-v2 ## 配色规则 - 禁止使用高饱和渐变背景如 from-purple-500 to-blue-500 - 禁止在同一页面使用超过 3 种主色 - 优先使用中性色打底zinc / slate / stone 系列 - 强调色只用于 CTA 按钮和关键状态面积不超过页面 10% ## 圆角与阴影 - 卡片圆角统一为 rounded-lg8px或 rounded-xl12px禁止混用 - 禁止 rounded-3xl 以上的超大圆角 - 阴影只用 shadow-sm / shadow-md禁止 shadow-2xl - 禁止彩色阴影 ## 动效规则 - 禁止 animate-bounce / animate-ping / animate-pulse 用于装饰 - hover 动效只允许颜色变化、透明度变化、轻微位移≤2px - 过渡时长统一 150ms-200ms禁止超过 300ms - 禁止同时叠加多个动效 ## 图标与装饰 - 禁止用 emoji 充当功能图标 - 图标统一使用 lucide-react 或 heroicons - 禁止无意义的装饰性插画堆砌 - 禁止在按钮文字里塞 emoji ## 排版 - 正文行高 1.6-1.75 - 标题与正文对比度要明确禁止全站同一字重 - 段落最大宽度 65-75ch - 禁止居中对齐超过 3 行的正文这份骨架的关键在于「可执行」。像「禁止高饱和渐变」这种AI 能直接对应到具体的 Tailwind 类名「hover 位移 ≤2px」也是可量化的。规则越具体模型遵循度越高。反过来如果你写「要好看一点」「要高级感」那等于没写。放置路径有两个选择。第一种放在项目根目录文件名就叫SKILL.mdCursor 在项目上下文里能读到。第二种放进.cursor/rules/目录这是 Cursor 专门放规则文件的地方优先级更高。我实测下来放.cursor/rules/里效果更稳因为它不依赖模型主动去翻项目文件。# 方式一项目根目录 your-project/ ├── SKILL.md ├── src/ └── package.json # 方式二Cursor rules 目录推荐 your-project/ ├── .cursor/ │ └── rules/ │ └── taste-skill.md ├── src/ └── package.json如果你用的是 Cursor 的图形界面也可以在Settings Rules里直接粘贴规则内容效果和放文件一样。不需要装任何依赖不需要改构建配置纯文本规则。3. 在 Cursor 里落地配置的完整步骤光有规则文件还不够得让 Cursor 真的把它当回事。下面是我踩过坑之后整理的一套流程按顺序走一遍就行。第一步确认你的 Cursor 版本支持项目级规则。打开Settings搜Rules看有没有Project Rules这一栏。有的话说明支持.cursor/rules/目录。没有的话就退回用根目录SKILL.md的方式。第二步把规则文件放进去。如果你用的是default-v2直接复制内容到.cursor/rules/taste-skill.md。注意文件名不要带空格用连字符。第三步在 Cursor 的 Chat 或 Composer 里显式引用规则。虽然 Cursor 会自动读取 rules 目录但为了确保生效可以在 prompt 开头加一句请严格遵循 .cursor/rules/taste-skill.md 中的设计规则生成以下页面。第四步给一个具体的生成任务。别用「写个落地页」这种模糊指令越具体越好。比如用 React Tailwind 写一个 SaaS 产品落地页包含 - 顶部导航栏logo 3 个链接 登录按钮 - Hero 区标题 副标题 主 CTA 次 CTA - 三列功能卡片 - 底部 footer 严格遵循 taste-skill 规则不要用渐变背景不要用 emoji 图标。第五步生成完之后检查几个关键点。打开浏览器 DevTools看背景是不是纯色或极淡的渐变看按钮 hover 是不是只有颜色变化看图标是不是 SVG 而不是 emoji。如果这三点都对了说明规则生效了。这里有个细节要注意Cursor 读取规则文件是有 token 上限的。如果你的SKILL.md写得太长比如超过 2000 字可能会被截断。所以规则要精炼别把设计系统文档整篇搬进去。我一般控制在 800-1200 字之间。另外如果你项目里已经有成熟的设计系统比如公司内部的组件库那 Taste Skill 的规则可能会和它冲突。这时候要做的是调整优先级把公司设计系统的规则放在SKILL.md前面Taste Skill 作为补充。或者干脆只保留不冲突的部分比如动效和图标规则。4. 验证规则是否真的生效规则放进去了怎么确认它真的在起作用我设计了一个简单的对比验证流程你可以跟着做一遍。先准备一个测试 prompt固定不变写一个 pricing 卡片组件三个档位基础版、专业版、企业版。 每个卡片包含档位名、价格、5 条功能列表、一个 CTA 按钮。 用 React Tailwind。第一轮在没有任何SKILL.md的情况下生成把代码保存为PricingCard.before.tsx。第二轮把SKILL.md放进.cursor/rules/重新生成同样的 prompt保存为PricingCard.after.tsx。然后对比两个文件的差异。重点看这几处检查项无规则before有规则after背景可能有渐变或彩色纯色或极淡中性色圆角rounded-2xl / 3xlrounded-lg / xl阴影shadow-xl / 2xlshadow-sm / mdhover位移 缩放 阴影仅颜色或透明度图标emoji 或缺失lucide-react SVG强调色多个高饱和色单一强调色面积小我实测下来default-v2在 Cursor 里的效果比较明显。生成的 landing page 不再无脑堆渐变背景按钮 hover 从「弹跳三下」变成克制的微动效色彩饱和度降下来整体看着舒服不少。但得说实话它不是万能的。SKILL.md本质是一堆文本规则AI 能听进去多少取决于模型对指令的遵循程度。Cursor 里效果比较明显Copilot 差一些纯靠 prompt 注入的工具可能更弱。还有一个验证技巧在 Cursor 的 Chat 里直接问它「你读取到 taste-skill 规则了吗列出其中三条禁止项」。如果它能准确复述说明规则确实进了上下文。如果它答不上来那就是路径放错了或者文件没被索引。5. 常见报错与排查清单规则文件这东西看着简单实际用起来坑不少。下面是我遇到过的几个典型问题按排查顺序列出来。问题一Cursor 完全没反应生成的代码和之前一样。先检查文件路径。.cursor/rules/目录名不能拼错是rules不是rule。文件名后缀是.md不是.mdc虽然 Cursor 也支持.mdc但格式要求不同。然后确认 Cursor 版本老版本可能不支持项目级 rules升级到最新版。最后在 Chat 里手动引用这个文件看能不能读到。问题二规则读到了但 AI 只遵守了一部分。这是最常见的情况。原因通常是规则写得太笼统或者规则之间互相矛盾。比如你写了「禁止高饱和渐变」又写了「Hero 区要有视觉冲击力」AI 就会纠结。解决办法是把规则拆细每条规则只对应一个可执行的动作。另外把最重要的规则放在文件最前面因为模型对开头内容的注意力更高。问题三生成的代码里 Tailwind 类名冲突。比如同时出现rounded-lg和rounded-2xl或者shadow-sm和shadow-xl叠在同一个元素上。这通常是 AI 在生成时没清理干净。可以在SKILL.md里加一条「每个元素只允许一个圆角类、一个阴影类禁止叠加」。如果还不行就在 prompt 里明确要求「生成后自查类名冲突」。问题四规则文件和项目已有的 ESLint / Prettier 冲突。Taste Skill 只管视觉风格不管代码格式。如果你发现生成的代码格式乱了那是 Prettier 的事和SKILL.md无关。检查一下.prettierrc配置确保tailwindcss插件正常工作。问题五换了一套风格规则但 AI 还在用旧规则。Cursor 有缓存机制。改完.cursor/rules/里的文件后重启一下 Cursor或者在 Chat 里开一个新会话。旧会话可能还带着之前的上下文。注意如果你在规则里写了「禁止使用 emoji」但 AI 还是在按钮里塞了 那可能是模型对「emoji」这个词的理解有偏差。改成「禁止使用 Unicode 表情符号字符U1F300 至 U1FAFF 范围」会更精确。6. 把规则用起来让 AI 输出稳定下来Taste Skill 的性价比在于零成本、放进去就能用。它不能替你搭项目结构不能保证代码质量10 种风格之间的差异也没那么大有些只是细节微调。但起码你的 demo 页面不会再被设计师嘲笑了。如果你想让规则真正稳定生效有几个实用技巧。第一把SKILL.md当成活文档每次发现 AI 又犯老毛病就往里加一条禁止项。第二不同项目用不同规则文件别一套规则走天下。第三定期清理规则删掉那些 AI 已经不会再犯的条目保持文件精简。规则文件只是约束输出风格真正要跑通完整的编码流程还需要稳定的模型接入。TaoToken 提供了兼容 OpenAI 接口的 API 服务你可以把它接到 Cursor 的自定义模型配置里配合SKILL.md一起用。模型对话入口在 https://taotoken.net/apiAPI Key 在 https://taotoken.net/api-keys 申请接入文档在 https://taotoken.net/doc。如果你长期用 Cursor 做编码和 Agent 任务Coding Plan 会更划算详情看 https://taotoken.net/coding-plan。最后留一个我自己的习惯每次开新项目先把SKILL.md建好再让 Cursor 写第一行代码。顺序反过来的话后面改样式的时间够你写三遍规则文件了。 AI前端美化规则 Taste Skill：用 SKILL.md 让 Cursor 告别塑料感界面
1. 为什么 Cursor 写的前端总有一股塑料味你有没有过这种体验在 Cursor 里敲一句「帮我写个 SaaS 落地页」几秒钟代码就出来了npm run dev一跑页面确实能看——但就是哪里不对劲。紫蓝渐变铺满首屏卡片圆角一律rounded-2xl按钮 hover 的时候往上弹一下、阴影放大一圈图标全是 emoji 轮着上。功能没毛病可整体透着一股廉价感像某个模板站批量导出的 demo。这不是你的 prompt 写得差也不是模型不行。问题出在训练数据的分布上AI 编码工具见过的前端代码里Tailwind 默认色板、组件库官方示例、各种「10 分钟搭一个 landing page」的教程占了绝大多数。这些素材本身就是高度同质化的模型学完之后默认审美自然就停在这个水平线上。你让它自由发挥它就会把训练集里最高频的那套组合原样吐出来——高饱和渐变、大圆角、弹跳动效、emoji 图标四件套齐活。Taste Skill 这个项目就是冲着这个毛病去的。它不是一个框架也不是 npm 包而是一组SKILL.md规则文件。你把它丢进项目里Cursor 在生成前端代码时会读取这些规则相当于给 AI 立了一套设计规范哪些配色不许用、哪些动效不许加、图标该怎么处理。核心机制就俩字——反套路把 AI 最爱偷懒的那几招全列成黑名单逼它走更克制的路线。这篇会带你把SKILL.md的骨架搭起来讲清楚它在 Cursor 项目里该放哪、怎么被读取最后用一段生成前后的对比验证让你确认规则真的生效了。适合正在用 Cursor 写前端、又不想每次手动改样式的开发者。2. 把审美约束沉淀成 SKILL.md 规则文件先说清楚 Taste Skill 的定位。它解决的是「视觉风格层面的输出收敛」不碰代码质量、不碰组件拆分、不碰项目结构。你指望它帮你把components/目录规划好那是另一回事。它的价值在于把「什么算好看」这件本来很主观的事拆成一条条 AI 能执行的硬规则。项目提供了多套SKILL.md对应不同场景。default-v2是通用默认版适合大多数项目default-v1规则稍松早期版本gpt-taste专门针对 GPT 系列模型的审美偏好做纠正image-to-code适合从截图还原代码redesign用于重构已有页面。风格向的还有soft柔和、minimalist极简、brutalist粗野主义、output输出导向、stitch拼接。另外带三个出图专用规则imagegen-web、mobile、brandkit配合 AI 生成设计稿或品牌视觉用。规则文件的结构其实很朴素本质就是 Markdown 里写清楚「禁止项」和「推荐项」。AI 读进去之后生成代码时会尽量避开黑名单里的写法。下面是我整理的一份SKILL.md骨架你可以直接拿去改# Taste Skill - default-v2 ## 配色规则 - 禁止使用高饱和渐变背景如 from-purple-500 to-blue-500 - 禁止在同一页面使用超过 3 种主色 - 优先使用中性色打底zinc / slate / stone 系列 - 强调色只用于 CTA 按钮和关键状态面积不超过页面 10% ## 圆角与阴影 - 卡片圆角统一为 rounded-lg8px或 rounded-xl12px禁止混用 - 禁止 rounded-3xl 以上的超大圆角 - 阴影只用 shadow-sm / shadow-md禁止 shadow-2xl - 禁止彩色阴影 ## 动效规则 - 禁止 animate-bounce / animate-ping / animate-pulse 用于装饰 - hover 动效只允许颜色变化、透明度变化、轻微位移≤2px - 过渡时长统一 150ms-200ms禁止超过 300ms - 禁止同时叠加多个动效 ## 图标与装饰 - 禁止用 emoji 充当功能图标 - 图标统一使用 lucide-react 或 heroicons - 禁止无意义的装饰性插画堆砌 - 禁止在按钮文字里塞 emoji ## 排版 - 正文行高 1.6-1.75 - 标题与正文对比度要明确禁止全站同一字重 - 段落最大宽度 65-75ch - 禁止居中对齐超过 3 行的正文这份骨架的关键在于「可执行」。像「禁止高饱和渐变」这种AI 能直接对应到具体的 Tailwind 类名「hover 位移 ≤2px」也是可量化的。规则越具体模型遵循度越高。反过来如果你写「要好看一点」「要高级感」那等于没写。放置路径有两个选择。第一种放在项目根目录文件名就叫SKILL.mdCursor 在项目上下文里能读到。第二种放进.cursor/rules/目录这是 Cursor 专门放规则文件的地方优先级更高。我实测下来放.cursor/rules/里效果更稳因为它不依赖模型主动去翻项目文件。# 方式一项目根目录 your-project/ ├── SKILL.md ├── src/ └── package.json # 方式二Cursor rules 目录推荐 your-project/ ├── .cursor/ │ └── rules/ │ └── taste-skill.md ├── src/ └── package.json如果你用的是 Cursor 的图形界面也可以在Settings Rules里直接粘贴规则内容效果和放文件一样。不需要装任何依赖不需要改构建配置纯文本规则。3. 在 Cursor 里落地配置的完整步骤光有规则文件还不够得让 Cursor 真的把它当回事。下面是我踩过坑之后整理的一套流程按顺序走一遍就行。第一步确认你的 Cursor 版本支持项目级规则。打开Settings搜Rules看有没有Project Rules这一栏。有的话说明支持.cursor/rules/目录。没有的话就退回用根目录SKILL.md的方式。第二步把规则文件放进去。如果你用的是default-v2直接复制内容到.cursor/rules/taste-skill.md。注意文件名不要带空格用连字符。第三步在 Cursor 的 Chat 或 Composer 里显式引用规则。虽然 Cursor 会自动读取 rules 目录但为了确保生效可以在 prompt 开头加一句请严格遵循 .cursor/rules/taste-skill.md 中的设计规则生成以下页面。第四步给一个具体的生成任务。别用「写个落地页」这种模糊指令越具体越好。比如用 React Tailwind 写一个 SaaS 产品落地页包含 - 顶部导航栏logo 3 个链接 登录按钮 - Hero 区标题 副标题 主 CTA 次 CTA - 三列功能卡片 - 底部 footer 严格遵循 taste-skill 规则不要用渐变背景不要用 emoji 图标。第五步生成完之后检查几个关键点。打开浏览器 DevTools看背景是不是纯色或极淡的渐变看按钮 hover 是不是只有颜色变化看图标是不是 SVG 而不是 emoji。如果这三点都对了说明规则生效了。这里有个细节要注意Cursor 读取规则文件是有 token 上限的。如果你的SKILL.md写得太长比如超过 2000 字可能会被截断。所以规则要精炼别把设计系统文档整篇搬进去。我一般控制在 800-1200 字之间。另外如果你项目里已经有成熟的设计系统比如公司内部的组件库那 Taste Skill 的规则可能会和它冲突。这时候要做的是调整优先级把公司设计系统的规则放在SKILL.md前面Taste Skill 作为补充。或者干脆只保留不冲突的部分比如动效和图标规则。4. 验证规则是否真的生效规则放进去了怎么确认它真的在起作用我设计了一个简单的对比验证流程你可以跟着做一遍。先准备一个测试 prompt固定不变写一个 pricing 卡片组件三个档位基础版、专业版、企业版。 每个卡片包含档位名、价格、5 条功能列表、一个 CTA 按钮。 用 React Tailwind。第一轮在没有任何SKILL.md的情况下生成把代码保存为PricingCard.before.tsx。第二轮把SKILL.md放进.cursor/rules/重新生成同样的 prompt保存为PricingCard.after.tsx。然后对比两个文件的差异。重点看这几处检查项无规则before有规则after背景可能有渐变或彩色纯色或极淡中性色圆角rounded-2xl / 3xlrounded-lg / xl阴影shadow-xl / 2xlshadow-sm / mdhover位移 缩放 阴影仅颜色或透明度图标emoji 或缺失lucide-react SVG强调色多个高饱和色单一强调色面积小我实测下来default-v2在 Cursor 里的效果比较明显。生成的 landing page 不再无脑堆渐变背景按钮 hover 从「弹跳三下」变成克制的微动效色彩饱和度降下来整体看着舒服不少。但得说实话它不是万能的。SKILL.md本质是一堆文本规则AI 能听进去多少取决于模型对指令的遵循程度。Cursor 里效果比较明显Copilot 差一些纯靠 prompt 注入的工具可能更弱。还有一个验证技巧在 Cursor 的 Chat 里直接问它「你读取到 taste-skill 规则了吗列出其中三条禁止项」。如果它能准确复述说明规则确实进了上下文。如果它答不上来那就是路径放错了或者文件没被索引。5. 常见报错与排查清单规则文件这东西看着简单实际用起来坑不少。下面是我遇到过的几个典型问题按排查顺序列出来。问题一Cursor 完全没反应生成的代码和之前一样。先检查文件路径。.cursor/rules/目录名不能拼错是rules不是rule。文件名后缀是.md不是.mdc虽然 Cursor 也支持.mdc但格式要求不同。然后确认 Cursor 版本老版本可能不支持项目级 rules升级到最新版。最后在 Chat 里手动引用这个文件看能不能读到。问题二规则读到了但 AI 只遵守了一部分。这是最常见的情况。原因通常是规则写得太笼统或者规则之间互相矛盾。比如你写了「禁止高饱和渐变」又写了「Hero 区要有视觉冲击力」AI 就会纠结。解决办法是把规则拆细每条规则只对应一个可执行的动作。另外把最重要的规则放在文件最前面因为模型对开头内容的注意力更高。问题三生成的代码里 Tailwind 类名冲突。比如同时出现rounded-lg和rounded-2xl或者shadow-sm和shadow-xl叠在同一个元素上。这通常是 AI 在生成时没清理干净。可以在SKILL.md里加一条「每个元素只允许一个圆角类、一个阴影类禁止叠加」。如果还不行就在 prompt 里明确要求「生成后自查类名冲突」。问题四规则文件和项目已有的 ESLint / Prettier 冲突。Taste Skill 只管视觉风格不管代码格式。如果你发现生成的代码格式乱了那是 Prettier 的事和SKILL.md无关。检查一下.prettierrc配置确保tailwindcss插件正常工作。问题五换了一套风格规则但 AI 还在用旧规则。Cursor 有缓存机制。改完.cursor/rules/里的文件后重启一下 Cursor或者在 Chat 里开一个新会话。旧会话可能还带着之前的上下文。注意如果你在规则里写了「禁止使用 emoji」但 AI 还是在按钮里塞了 那可能是模型对「emoji」这个词的理解有偏差。改成「禁止使用 Unicode 表情符号字符U1F300 至 U1FAFF 范围」会更精确。6. 把规则用起来让 AI 输出稳定下来Taste Skill 的性价比在于零成本、放进去就能用。它不能替你搭项目结构不能保证代码质量10 种风格之间的差异也没那么大有些只是细节微调。但起码你的 demo 页面不会再被设计师嘲笑了。如果你想让规则真正稳定生效有几个实用技巧。第一把SKILL.md当成活文档每次发现 AI 又犯老毛病就往里加一条禁止项。第二不同项目用不同规则文件别一套规则走天下。第三定期清理规则删掉那些 AI 已经不会再犯的条目保持文件精简。规则文件只是约束输出风格真正要跑通完整的编码流程还需要稳定的模型接入。TaoToken 提供了兼容 OpenAI 接口的 API 服务你可以把它接到 Cursor 的自定义模型配置里配合SKILL.md一起用。模型对话入口在 https://taotoken.net/apiAPI Key 在 https://taotoken.net/api-keys 申请接入文档在 https://taotoken.net/doc。如果你长期用 Cursor 做编码和 Agent 任务Coding Plan 会更划算详情看 https://taotoken.net/coding-plan。最后留一个我自己的习惯每次开新项目先把SKILL.md建好再让 Cursor 写第一行代码。顺序反过来的话后面改样式的时间够你写三遍规则文件了。