Frontend Design（Distinctive, Production-Grade）是一份面向前端设计工程师的技能说明，目标是产出令人印象深刻、工艺水准高且可直接用于生产的界面，而不是仅仅生成布局。资料强调要避免通用的“AI UI”模式，表达清晰的美学观点，把设计意图直接翻译成代码，并优先建立有意图的设计系统而非套用默认框架。
核心设计准则 每次输出必须同时满足四点：有意图的美学方向（明确命名的设计立场，如编辑式粗野主义、奢华极简、复古未来主义、工业实用主义）；技术正确性（真实可运行的 HTML/CSS/JS 或框架代码，而非效果图）；视觉记忆性（至少有一个元素能让用户 24 小时后仍记得）；整体克制（没有随意装饰，每个细节都服务于美学主题）。技能明确排除默认布局、按组件拼凑的设计以及“安全”的配色和字体。
DFII 设计可行性与影响力指数 在动手前用 DFII 评估设计方向，从五个 1–5 分维度打分：美学影响力、场景契合度、实现可行性、性能安全性、一致性风险。计算公式为 DFII =（影响力 + 契合度 + 可行性 + 性能）− 一致性风险，分值范围 -5 到 +15。12–15 为优秀可全力执行；8–11 为较强可谨慎推进；4–7 有风险需缩小范围或减弱效果；≤3 为弱，应重新考虑美学方向。
强制设计思考阶段 写代码前需明确定义：一、目的——界面要促成什么动作，是说服、功能、探索还是表达；二、基调——从粗野/原始、编辑/杂志、奢华/精致、复古未来、工业/实用、有机/自然、活泼/玩具感、极繁/混沌、极简/严苛等方向中选一个主导方向，最多混合两个；三、差异化锚点——回答“如果截图中去掉 Logo，别人如何认出它”，且该锚点必须体现在最终界面中。
美学执行规则 排版上避免系统字体和 AI 默认字体（如 Inter、Roboto、Arial 等），选择一款表现力强的展示字体和一款克制的正文字体，并将排版用于构建结构（层级、节奏、对比）。色彩与主题上确定主导色彩故事，仅使用 CSS 变量，倾向一个主色调、一个强调色、一套中性色系统，避免均衡配比。空间构图上刻意打破网格，使用不对称、重叠、留白或受控密度，把留白视为设计元素。动效要有目的、稀疏且高冲击，优先一个强有力的入场序列和少量有意义的悬停状态，避免装饰性微动效泛滥。质感与深度可按需使用噪点/颗粒叠加、渐变网格、分层半透明、自定义边框或分隔线、有叙事意图的阴影。
实现标准 代码需整洁、可读、模块化，无死样式和未使用动画，使用语义化 HTML，默认满足无障碍要求（对比度、焦点、键盘操作）。框架方面，HTML/CSS 优先使用原生特性和现代 CSS；React 使用函数组件和可组合样式；动画以 CSS 优先，仅在必要时使用 Framer Motion。复杂度需与设计匹配：极繁设计对应复杂代码（动画、图层），极简设计对应极其精确的间距与字体，不匹配即视为失败。
要求的输出结构 生成前端工作时按顺序给出：设计方向摘要（美学名称、DFII 分数、概念性而非视觉抄袭的灵感来源）；设计系统快照（字体及理由、颜色变量、间距节奏、动效理念）；完整可运行代码（仅在意图不明显处加注释）；差异化说明（明确指出“本设计通过用 X 而非 Y 来避免通用 UI”）。
反模式与检查清单 立即视为失败的反模式包括：Inter/Roboto/系统字体、紫白 SaaS 渐变、默认 Tailwind/ShadCN 布局、对称可预测的分区、过度使用的 AI 设计套路、无意图的装饰；若设计可能被误认为模板，应重新开始。定稿前操作者需检查：已声明清晰美学方向、DFII ≥ 8、有一个记忆点、无通用字体/颜色/布局、代码与设计野心匹配、可访问且性能良好。
与其他技能的集成 资料说明可与 page-cro（布局层级与转化流程）、copywriting（排版与信息节奏）、marketing-psychology（视觉说服与偏差对齐）、branding（视觉识别一致性）、ab-test-setup（变体安全的设计系统）配合使用。
需要时可询问的问题 目标受众在情感层面是谁；界面应让人感到可信、兴奋、平静还是挑衅；记忆性与清晰度哪个更重要；是否能扩展到其他页面或组件；用户在前 3 秒应感受到什么。
限制与说明 资料未提供具体的安装命令、依赖版本、收费模式或平台信息，这些内容暂未提供。该技能主要通过规则、评分和检查清单约束设计产出，其效果取决于使用者的执行，资料未给出量化的性能或转化效果数据。