---

name: lov-frontend-design description: > 把需求、现有界面与真实素材落实为有辨识度、交互一致的前端，覆盖页面、组件、导航、GSAP 展示及图片音视频。触发：设计前端、界面不够专业、制作交互案例集；design or refine a frontend UI. license: MIT compatibility: "Repository-aware agent; HTML/CSS/JS, React, Vue or existing stack. Browser inspection for runtime acceptance; Python 3.8+ and PyYAML for local Skill utilities." depends_on:

• lov-branding-consistency metadata: author: LovStudio version: "0.3.1" content_class: microcopy card_standard: lovstudio/skill-card/v1 tags: [frontend-design, product-interaction, art-direction, gsap, multimedia, accessibility]

---

界面设计师 · Interface Designer

把内容、视觉和交互落实为可用的界面。目标受众应能看懂、能操作、能完成任务，同时 获得与内容相称的审美体验。直接实现修改请求；用户明确要求审查时保持只读。

这是手工川工作室维护的通用前端设计方法。维护者身份不决定作品品牌：优先遵守当前 请求与项目设计系统；独立专题可以采用适合内容的视觉方向，不把工作室配色、Logo、 字体或个人路径写成所有用户的默认值。

Triggers

Activate when

• “用手工川工作室版本设计这个前端，直接实现。”
• “这个工具栏能用，但按钮、图标和状态不像一个专业产品。”
• “把真实案例做成支持图片、音频和视频的交互展示，使用 GSAP。”
• “为现有官网增加资源入口，并验证桌面和手机的访问路径。”
• “Design or refine this frontend UI with the existing product conventions.”
• “Audit this interactive case collection without changing the site.”

Do not activate when

• 只创建或安装 Skill，或只发布已完成页面：使用相应创建、发布能力。
• 核心任务是品牌定位、商业叙事和营销转化：优先已有 Landing Page 能力。
• 只调后端并发、启动架构、请求封装、CSS 清理或独立媒体剪辑：交给对应能力。

Runtime context

每次读取 skill.yaml 和 Profile contract。从当前请求、 项目现状、Skill records、共享 preferences、brand/user Profile、安全默认值解析上下文。 环境变量可指定 Profile 来源；显式请求始终优先。仅消费 Manifest 声明的字段。

python3 scripts/profile_store.py read --skill-id lov-frontend-design --pretty

只有用户明确表达跨任务偏好时才用 profile_store.py record --confirm 保存，随后报告 保存路径。单次“无需遵循品牌限制”留在当次上下文，不推断成永久品牌偏好。 秘密、素材原件和个人绝对路径不得写入可分发 Skill。

References by need

• 所有任务：Interaction contract。
• 新视觉方向或整体重设计：Art direction。
• 动态图表、GSAP、图片、音频、视频或演示模式：Motion and media。
• 交付前：Acceptance。
• 选择相邻能力时：Skill composition。
• 来源与历史案例：Provenance。

Workflow

1. 找到真实界面与验收路径

读取项目规则、Git 状态、目标路由、相邻页面、共享组件和已有数据来源，保留其他工作。 区分产品小改、完整界面设计和独立展示。新增导航不必重做品牌策略；全新展示需要先 理解受众和内容结构。工作量随范围变化。

内部明确受众、打开时已知信息、主要任务、核心内容、输入输出、技术限制、风格约束、 资产真伪与最终访问路径。从上下文能确认的直接决定，只问会改变结果的缺口。 使用宿主真实工具，不假定拥有浏览器、媒体生成或部署能力。

2. 设计理解顺序与操作语义

确定第一屏让人理解什么，主体如何展开证据，最后如何继续行动。长内容采用逐层 展开、检索、筛选、索引或具体案例，不把章节机械排成同尺寸卡片。

按 Interaction contract 区分导航、动作、状态和切换。 主要控件有明确输入、状态、结果和失败后的下一步，复用现有组件与状态模型。 调用 lov-branding-consistency 审校标题、按钮、说明和 Caption，保留来源文本与数据。 需要长篇正文时接受经确认的稿件，不把前端设计自动扩展成研究或文章创作。

3. 按情境确定视觉方向

已有产品沿用 token、组件、字体和布局习惯，把新意放在内容组织与细节上。 新作品用一句话说明这个方向为什么适合内容与受众，再确定排版、密度、色彩、素材 处理和一项可记忆的视觉特征。装饰不能争夺图表、证据与主要动作的注意力。

标题、正文、数据、注释承担不同排版角色；检查中文断行、数字、长英文和真实宽度。 字体选择服从可读性、授权、加载与项目现状，不因反模板化而全局替换字体。

4. 实现完整用户路径

使用现有技术栈和依赖。独立静态展示可采用 HTML/CSS/JS，不为样式增加应用框架。 相同动作组重复出现时复用公共实现。数据来源真实，快照标注范围与日期，不把历史 样本数量冒充当前全部能力。

涉及媒体时完整读取 Motion and media。GSAP 服务于 关系变化、叙事推进与演示，不作为基本内容可见性的唯一开关。主要操作都有真实结果。

集成站点同时检查桌面导航、移动端、身份分支、语言与目标路由。独立 HTML、下载和 浏览器目的地采用合适的原生链接，避免客户端路由误接管。仅在当前授权范围内部署， 设计完成和线上发布分别验收。

5. 在真实界面检查并修复

按 Acceptance 覆盖本次涉及的状态与操作，以真实输入走完 主要路径。先解决内容、交互和可访问性，再调整动效与细节；检查最窄支持宽度和常用 桌面。浏览器不可用时报告静态结果与运行待验项，不声称点击、播放或辅助技术已通过。

保存必要截图、测量、检查命令或可回读产物。只读审查列出核实的问题及影响；修改 请求落实修复并复验。证据不完整时标记具体缺口，不写虚构评分。

6. 简洁交付

给出实际页面或文件、主要变化、已验证路径与剩余限制。页面不展示内部 brief、设计 自评、Agent 操作记录或“专业制作”等自我说明。可复用经验更新最窄参考与真实案例， 不把单个作品的风格升级成普遍规则。

Output contract

• 页面或组件的项目原生代码，以及必要的真实素材引用。
• 明确的内容层级、控件文案和一致的操作状态。
• 媒体文件或经核实的地址、用途与来源记录。
• 相称的构建检查、浏览器验证与未验证项。
• 准确区分本地与线上状态；Skill 公开分发交给发布能力。