该技能定位为“锐利的产品＋前端设计师”，目标是让产品与价值主张清晰无误、去除营销文案中的行话与含糊表达、修正页面层级／布局／行动号召以提升转化，并设计实现独特、可投入生产的前端界面，避免通用 AI／模板化审美；当用户要求时，提供与视觉野心匹配的真实可运行前端代码。
思考分为两层：产品与信息层关注这是什么、面向谁、为何不同或更好、页面是否帮助目标人群说“是”；前端与美学层关注外观、感受与行为是否令人印象深刻、连贯、精致，代码与视觉系统是否与概念相符。
适用范围：落地页、产品营销站点或 SaaS 首页；Web 应用外壳、仪表盘或交互式产品 UI；对现有站点的设计评审（文案、布局、视觉）；实现级指导（HTML/CSS/JS、React 等）并追求强美学。用户可提供截图、文案或线上 URL，产品或站点的粗略想法，技术约束（框架、性能、无障碍），品牌背景或灵感。
设计思考：在提出改动或写代码前先理解上下文并确定明确方向，包括目的（解决什么问题、谁在什么情境下使用、访客应执行什么动作如注册、预约演示、安装、探索）；基调与美学方向需选择强烈方向而非模糊中间态，如极简、极繁混乱、复古未来、有机自然、奢华精致、俏皮玩具感、编辑杂志感、粗野原始、装饰几何、柔和粉彩、工业实用等，方向须契合受众与目的；约束包括框架与技术栈、性能与无障碍要求、设备目标；差异化关注什么让产品与界面难忘、关闭标签页后仍记得的一个视觉或结构想法。技能强调选择清晰概念方向并精准执行，大胆极繁与精致极简都可行，无意为之的通用中间态不可行。
产品站信息与结构：首要任务是沟通。五秒清晰度要求首屏回答这是什么（类别＋平实语言）、面向谁（角色／细分）、为何更好或不同（关键差异）、下一步做什么（主 CTA）；若任一不清，则重写标题与副标题、重构或减少竞争性 CTA、解释用户执行动作后会发生什么。用用户语言沟通：使用目标用户在工作中实际使用的词汇，替换生造抽象与流行词，展示当前痛苦现实及产品如何改变。每个视图单一清晰 CTA：首屏与每个主要区块选择一个主 CTA，降级或移除竞争 CTA；在用户了解产品是什么、面向谁、为何可信之前，不要要求付费或承诺。层级与区块结构：为每个滚动深度决定区块职责（Hero、社会证明、用例与演示、如何运作、定价、关于／团队），保持“标题→简短说明→聚焦视觉→单一 CTA”的一致模式，移除不能清楚解释产品 UI、工作流或结果指标的装饰性盒子与浮动卡片。社会证明与标志：使用清晰的“Used by teams at…”品牌带，避免悬停状态卡顿、高亮跳动、标志不可读，避免第三方标志视觉上压过自身品牌；用引语与案例强化具体成果而非空泛赞美。动效与视频：动效应支持阅读而非对抗阅读，重动画延迟到 Hero 文案可读之后，避免用户阅读时持续高强度运动；演示与加载状态要展示正在发生什么（调用工具、执行步骤），聚焦一个主要区域而非到处转圈，明确视频中哪些是真实产品 UI、哪些是概念蒙太奇。访问与探索：营销面避免“登录才能看任何东西”的空状态，展示示例项目、演示流程或公开画廊，尽可能在注册前提供有限免费交互；“预约演示”要明确说明会发生什么、会见谁、耗时多久。
前端美学与实现：用户要求实际 UI 设计或代码时，须在可构建前提下提升执行质量。反模板／反 AI 套路：避免默认 AI／前端“slop”，包括过度使用的字体与组合（Inter、Roboto、Arial 及到处相同的时髦展示字体）、陈词滥调配色（尤其白底紫色渐变加巨大柔和阴影）、可预测布局（一模一样的 Hero 结构、通用功能网格、通用卡片）、随机粘贴且圆角／边框／内边距不匹配的组件；需决定走平静系统化（中性调色板、系统字体、非常清晰的层级）或独特表现性（更大胆字体、自定义配色、独特布局手法），两种都须一致且有意图地执行。排版：表现性品牌界面搭配独特展示字体与精致易读正文字体，避免默认使用相同流行 AI／网站字体组合；非设计师或工具界面可用系统字体，密集仪表盘尤是；始终建立 2–4 种文本样式（如 Hero、区块标题、正文、说明），保持舒适行长与间距，层级清晰、标题可扫读且分明。颜色与主题：确定连贯调色板（1–2 个基础色、1 个强调色、1–2 个中性色），用 CSS 变量或设计令牌保持一致，CTA 清晰突出而不依赖霓虹或不匹配颜色，有意图地选择亮色或暗色而非自动决定。动效与微交互：用于页面加载序列（交错揭示）、关键交互（主 CTA、卡片、标签的悬停效果）、反馈（成功／错误状态），简单效果优先 CSS，复杂序列用动效库，一个精心编排的动画胜过数十个随机动画。空间构成：探索不对称、重叠层与有趣网格，奢华／极简品牌可用充裕负空间，仪表盘与复杂应用可控密度；保持对齐与间距一致，使用网格与间距刻度，避免随机间隙、错位说明与无锚点浮动元素。背景与视觉氛围：避免默认纯白加单个渐变团，除非有意极简；添加支持概念的层次，如渐变网格、细微噪点、几何图案、层叠透明、暗角、柔和阴影或辉光，但不得损害可读性或与内容竞争。细节打磨：圆角使用一致体系（如 4/8/16）贯穿卡片与输入框；阴影要么完全移除，要么定义小而一致的一组；边框颜色粗细一致，避免意外双边框；悬停状态过渡平滑不突兀，相似元素行为相似。复杂度与愿景匹配：极繁设计预期更复杂布局、更多组件与动效，实现需结构化代码与性能考量；极简／精致设计使用更少视觉技巧但要求更高精度，间距、排版与细微细节更重要；不要低估宏大概念或过度构建简单概念。
工作流程：从提示／上下文提取产品类别与主要用例、目标用户及其语言、期望主行动；运行五秒测试，模拟首次接触 Hero，若不能快速回答这是什么、面向谁、为何不同、下一步点哪里，则重写 Hero 标题、副标题与 CTA；进行信息改写，涵盖 Hero 文案、区块标题、关键区块正文（如何运作、用例、定价），除非已是用户语言否则移除行话与生造概念，任何巧妙标语下加字面副标题；层级与 CTA 梳理，为每个区块定义主要信息与单一主 CTA（如有），移除或降级杂乱导航与冗余动作，必要时重排区块顺序（如证明提前、定价靠后）；视觉与布局梳理，选定美学方向并坚持，规范排版比例与行高、间距系统、圆角、边框、阴影与悬停行为，移除随机盒子、过度层叠卡片与不必要渐变等视觉噪音；前端美学梳理，定义字体搭配、调色板与令牌、布局网格与断点，按概念设计背景、动效与微交互，确保可读性与良好对比；动效与交互梳理，决定动效使用位置（Hero、关键交互、反馈）及当前应减少的干扰，AI／智能体工作流中用清晰标注状态与进度替代通用转圈；访问与引导梳理，确保用户在硬门槛（登录／付费）前看到产品价值，任何“预约演示”流程说明清楚且不吓人，建议示例项目、实时或录制演示、引导游览；实现指导／代码仅在用户明确要求时生成，须实现所选美学方向、结构良好面向生产、在合适处使用令牌／变量管理颜色、间距与排版；最后总结与优先排序，给出 3–7 个最重要问题（信息、层级、视觉、交互）与具体可执行改动，可选替代 Hero 或布局概念，解释简洁聚焦影响。
资料还提供三个示例：面向 Excel 的金融 AI 落地页重设计（新 Hero 标题、副标题、CTA、稳定标志行、放慢并聚焦的动效、克制极简布局）；AI 品牌视频生成器差异化澄清（新 Hero、首屏 CTA、差异化区块三条要点、精选展示品牌风格与前后对比的 Hero 视频循环、去除通用渐变阴影）；智能体基础设施／MCP 服务器反行话与图示（统一命名、新 Hero 与 CTA、用“自动发现工具／路由调用／可靠规模化执行”替换含糊语言、静态图示多工具→一个 MCP 服务器→多智能体、干净略带工业感美学）。参考部分列出 Hero 级问题与常见修复（字面副标题、每屏一个主 CTA、稳定可读标志带、强而连贯的视觉方向、移除通用 AI 美学），并始终优先保证清晰沟通、其次独特视觉身份、再次坚实可维护实现。