用途：用于新页面、组件或明确的视觉改版，前提是存在已知的主要用户操作；若是孤立缺陷修复，除为解决问题所需，应保留周边设计。
主要能力：该技能把前端设计与实现结合，要求先明确设计方向再写代码。核心要求包括有意的美学方向、技术正确性（真实可运行的 HTML/CSS/JS 或框架代码）、视觉记忆点、克制的统一性；已有产品约束优先，可复用成熟设计系统。
必要用法：代码前须明确定义目的、语气（如粗野主义、编辑杂志、奢华精致、复古未来、工业实用等，最多混合两种）、差异化锚点（“去掉 logo 后如何被认出”），以及排版、配色、空间构图、动效、质感与深度的执行选择。配色仅用 CSS 变量，动效需克制且高影响。输出结构应包括设计方向摘要、设计系统快照、完整可运行实现与验证说明。验证需说明检查过的主要操作、响应式宽度、键盘/焦点行为、对比度及加载/错误状态，并给出观察结果与剩余缺口。
可选 DFII 评分：DFII =（Impact + Fit + Feasibility + Performance）− Consistency Risk，各维度 1–5，算术范围 -1 至 +19；它只是主观讨论辅助，不具验证过的预测力，也不是认证或发布门槛。
适用场景：需要明确设计观点的页面或组件、视觉刷新、需要同时兼顾品牌与可达性的前端实现。可与其他技能配合，如页面转化、文案、营销心理学、品牌一致性、A/B 测试。
限制：视觉独特性不能证明可用性或转化效果；截图无法验证键盘顺序、异步行为、屏幕阅读器输出或网络失败状态；减少动效偏好、本地化和真实内容长度都可能改变设计，需按产品需要测试。不得为了外观替换既有组件、未检查许可就下载字体或素材、为美学隐藏控件或削弱对比度，也不得把渲染截图称为可运行或可上线的成品。