用途：把内容、视觉和交互落实为可用界面，让目标受众看得懂、能操作、能完成任务，并获得与内容相称的审美体验。对修改请求直接实现，用户明确要求审查时保持只读。
触发场景：设计或优化前端界面、界面不够专业、制作支持图片音频视频的交互展示（GSAP）、为现有官网增加资源入口并验证桌面与手机访问路径、审查交互案例集但不改动站点。
不适用：仅创建安装 Skill 或发布已完成页面、品牌定位与商业叙事及营销转化、只调后端并发与启动架构与请求封装或 CSS 清理与独立媒体剪辑。
使用方式：每次读取 skill.yaml 和 Profile contract，从请求、项目现状、Skill records、共享 preferences、brand/user Profile 与安全默认值解析上下文；显式请求优先。可用环境变量指定 Profile 来源，仅消费 Manifest 声明的字段。读取 Profile 命令：python3 scripts/profile_store.py read --skill-id lov-frontend-design --pretty；仅当用户明确表达跨任务偏好时用 profile_store.py record --confirm 保存并报告保存路径。秘密、素材原件和个人绝对路径不得写入可分发 Skill。
核心方法分六步：找到真实界面与验收路径（读项目规则、Git 状态、目标路由、相邻页面、共享组件与已有数据，保留其他工作，区分小改、完整设计与独立展示）；设计理解顺序与操作语义（按 Interaction contract 区分导航、动作、状态与切换，复用现有组件与状态模型，标题按钮说明与 Caption 调用 lov-branding-consistency 审校）；按情境确定视觉方向（已有产品沿用 token、组件、字体与布局，新作品用一句话说明方向理由，检查中文断行、数字、长英文与真实宽度）；实现完整用户路径（用现有技术栈，独立静态展示可用 HTML/CSS/JS，媒体任务完整读取 Motion and media，GSAP 不作为内容可见性的唯一开关）；在真实界面检查并修复（按 Acceptance 覆盖状态与操作，先内容交互可访问性再动效，浏览器不可用时报告静态结果与运行待验项）；简洁交付（给出页面文件、主要变化、已验证路径与剩余限制，不展示内部 brief 与自评）。
输出：项目原生代码、真实素材引用、明确内容层级与一致操作状态、媒体文件来源记录、构建检查与浏览器验证、本地与线上状态区分。
限制：不假定拥有浏览器、媒体生成或部署能力；字体选择服从可读性、授权、加载与项目现状；仅在当前授权范围内部署；具体平台与收费信息暂未提供。