一、用途 design-taste-frontend 被描述为“Anti-Slop Frontend Skill（反模板化前端技能）”，面向落地页（landing pages）、作品集（portfolios）与网站改版（redesigns）三类场景。资料明确说明，它不适用于仪表盘、数据表格和多步骤产品 UI。
二、核心理念：先读需求，再落设计 该技能要求智能体不要一上手就写代码或调参数，而是先做“BRIEF INFERENCE（需求解读）”，读取以下信号：页面类型（SaaS / 消费 / 代理商 / 活动落地页、开发者 / 设计师 / 创意工作室作品集、保留式或彻底改版的改版、编辑型 / 博客）、用户使用的风格词汇（如 minimalist、calm、Linear-style、Awwwards、brutalist、premium consumer、Apple-y、playful、serious B2B、editorial、agency-y、glassy、dark tech 等）、参考信号（链接 URL、截图、点名产品、竞争品牌）、受众（B2B 采购、设计敏感消费者、浏览作品集的招聘者）、已有品牌资产（logo、颜色、字体、摄影，改版时视为起点材料），以及隐性约束（无障碍优先、公共部门、受监管行业、信任优先电商、儿童产品，这些约束优先于审美偏好）。
在生成任何代码前，需要先输出一行“Design Read”，格式为：Reading this as: <page kind> for <audience>, with a <vibe> language, leaning toward <design system or aesthetic family>。若需求确实存在分歧，只允许询问一个澄清问题，不允许多问题连问；若能从上下文自信推断，则应直接声明设计解读并继续。
三、三组核心旋钮（Three Dials） 设计解读之后需设置三个全局变量，后续布局、动效与密度决策都受其约束：
- DESIGN_VARIANCE（设计变化度）：1 = 完全对称，10 = 艺术化混沌；
- MOTION_INTENSITY（动效强度）：1 = 静态，10 = 电影感 / 物理动效；
- VISUAL_DENSITY（视觉密度）：1 = 美术馆 / 通透，10 = 座舱 / 密集数据。 基线值为 8 / 6 / 4，除非设计解读覆盖。技能给出“信号→旋钮值”的推断表与“用例预设表”，例如极简/编辑风对应 VARIANCE 5-6、MOTION 3-4、DENSITY 2-3；俏皮/实验/代理商风对应 9-10 / 8-10 / 3-4；信任优先/公共部门对应 3-4 / 2-3 / 4-5；改版-保留则匹配现有，动效 +1；改版-彻底改造则 +2 / +2 / 匹配现有。用例预设包括：SaaS 主流落地页 7/6/4，代理商创意落地页 9/8/3，高端消费落地页 7/6/3，设计师工作室作品集 8/7/3，开发者作品集 6/5/4，编辑 / 博客 6/4/3，公共部门服务 3/2/5。
四、需求到设计系统的映射 当需求对应真实设计系统时，应安装并使用官方包，不手写其 CSS，也不导入其 token 后覆盖 90%。映射示例：微软 / 企业 SaaS / 仪表盘 → @fluentui/react-components 或 @fluentui/web-components；Google 风格 / Material 产品 → @material/web + Material 3 tokens；IBM 风格 B2B / 企业分析 → @carbon/react + @carbon/styles；Shopify 应用 → Polaris；Atlassian / Jira 风格 → @atlaskit/* + @atlaskit/tokens；GitHub 风格 → @primer/css 或 @primer/react-brand；英国公共部门 → govuk-frontend；美国公共部门 / 信任优先 → uswds；本地小企业 / 代理商 MVP → Bootstrap 5.3；现代可访问 React 基础 → @radix-ui/themes；自持组件的现代 SaaS → shadcn/ui（npx shadcn@latest add ...）；Tailwind 现代 SaaS / AI 营销 → Tailwind v4 utilities + dark: variant。规则要求一个项目只用一个系统，不混用。
对于“审美风格”而非“系统”的方向（如玻璃拟态、Bento 网格、粗野主义、编辑杂志风、暗黑科技风、极光 / 网格渐变、动态字体、Apple Liquid Glass），资料说明没有单一官方包，应用原生 CSS + Tailwind + 维护中的组件库构建，并在代码注释中诚实标注哪些是借用灵感、哪些是官方材料。其中明确指出 Apple Liquid Glass 只有 Apple 平台文档，不存在官方 liquid-glass.css，Web 实现只是近似。
五、默认架构与约定 技术栈默认 React 或 Next.js，默认 Server Components（RSC）；全局状态只能在 Client Components 使用，使用 Motion、滚动监听或指针物理的组件必须是隔离的 'use client' 叶子节点。样式默认 Tailwind v4（v4 不在 postcss.config.js 用 tailwindcss 插件，改用 @tailwindcss/postcss 或 Vite 插件），已有项目要求时可用 v3。动画使用 Motion（原 Framer Motion），从 motion/react 导入，framer-motion 仍作为旧别名可用。字体始终用 next/font 或 @font-face + font-display: swap 自托管，生产环境不用 <link> 引入 Google Fonts。状态管理方面，局部用 useState / useReducer，仅避免深层 prop drilling 时才用全局状态（Zustand、Jotai 或 React context）；连续值（鼠标位置、滚动进度、指针物理、磁性悬停）必须用 Motion 的 useMotionValue / useTransform / useScroll，不能用 useState。
图标库优先级为 @phosphor-icons/react、hugeicons-react、@radix-ui/react-icons、@tabler/icons-react；lucide-react 不推荐，仅在用户明确要求或项目已依赖时可用；禁止手绘 SVG 图标；一个项目只用一个图标家族；统一 strokeWidth。Emoji 默认在代码、标记和可见文本中不鼓励，仅在用户明确要求俏皮 / 聊天风时少量使用。响应式断点标准化为 sm 640、md 768、lg 1024、xl 1280、2xl 1536；页面容器用 max-w-[1400px] mx-auto 或 max-w-7xl；全高 Hero 不能用 h-screen，必须用 min-h-[100dvh]；复杂布局用 CSS Grid 而不是 flex 百分比计算。导入任何第三方库前必须检查 package.json，缺失则先输出安装命令。
六、设计工程指令（偏差纠正） 该部分用大量规则抵消 LLM 的默认套路，包括：标题默认 text-4xl md:text-6xl tracking-tighter leading-none，正文默认 text-base text-gray-600 leading-relaxed max-w-[65ch]；无衬线字体默认不推荐 Inter，优先 Geist、Outfit、Cabinet Grotesk、Satoshi 等；衬线字体作为默认被强烈不鼓励，仅当品牌简报明确点名衬线，或审美确实属于编辑 / 奢华 / 出版 / 手稿 / 传承 / 复古并能为具体品牌说明理由时才可用；Fraunces 和 Instrument_Serif 被明确禁止作为默认；明确禁用把随机衬线词插入无衬线标题的做法，强调同一字体的斜体或粗体才是正确做法；斜体带下降笔画字母时行高至少 leading-[1.1] 并预留 pb-1 或 mb-1。颜色方面最多一个强调色，默认饱和度低于 80%，不默认 AI 紫 / 蓝光效，使用中性基色加高对比单一强调色；每项目一套调色板，同一页面强调色锁定一致；并针对高端消费类需求禁用常见的米色 + 黄铜 + 浓咖配色，给出冷奢华、森林、黑与棕褐、钴蓝 + 奶油、赤陶 + 石板、橄榄 + 砖红、纯单色 + 单一饱和色等替代方案，要求连续项目轮换不同色系。
七、适用场景与限制 适用：落地页、作品集、网站改版，以及需要避免“默认 AI 审美”的前端界面生成。限制：不适用于仪表盘、数据表格、多步骤产品 UI；资料中的各项规则均为上下文相关、不会自动触发；此外，技能描述与介绍中未提供价格、收费、平台兼容性、性能与效果的量化数据，这些内容暂未提供。