独特前端设计指导
帮助你为界面建立有辨识度、非模板化的视觉方向。
该技能仅提供前端设计指导，不要求代码执行、外部服务、凭据或敏感数据，且强调响应式、键盘焦点和减少动效，未见红线风险。扣3分：没有明确的数据流、用户确认、变更回滚或依赖安全说明。
章节结构和设计流程基本一致，包含规划、评审、自我批评及可访问性要求。扣2分：没有测试、可复现关键路径、异常输入处理或明确的失败反馈机制，静态审查也无法验证执行结果。
明确面向新建或重塑网页界面的视觉设计，并覆盖主题、受众、页面目标、排版、布局、动效和文案。扣4分：非适用场景、触发边界和输入输出格式未充分声明；未提供中文语言适配说明，但核心功能不依赖海外服务。
文档分层清晰，包含元数据、设计原则、流程、文案指导和限制性建议；仓库提供Apache-2.0许可证及官方维护背景。扣7分：技能自身没有版本、变更记录、安装/依赖说明、FAQ、明确维护责任或更新路径。
内容可直接指导生成更具差异化的网页设计方案，并要求颜色、字体、布局和独特元素形成计划。静态上可支持核心任务。扣8分：结果高度依赖模型执行和审美判断，没有代表性成品、验收标准或第三方验证，因此无法确认只需轻量复核。
技能文本本身完整且可审计，仓库还提供固定修订版本、许可证和CI维护材料。扣6分：没有覆盖该技能关键路径的测试套件、真实执行记录或独立交叉证据；静态证据不足以支持更高分。
- 这是静态审查，未执行技能或验证其生成的界面质量。
- 该技能偏设计理念和流程，未规定稳定的输出格式、验收标准或失败处理。
- 使用者仍需自行核查可访问性、响应式实现、字体许可、动效性能和品牌/内容准确性。
它能做什么 & 适用场景
这是一个面向前端界面设计的指导型 Skill，重点处理视觉方向、配色、字体、布局、动效和界面文案。它要求设计先扎根于具体主题、受众和页面目标，再形成具有明确取舍的设计方案。它还强调审查常见的 AI 设计默认风格，并保留一个可解释的审美风险。适合需要设计判断和实现规划的人，但不是可执行的代码工具或自动化测试工具。
在 brief 不完整时，确定具体主题、受众和页面唯一任务；规划包含 4–6 个命名颜色值、多个字体角色、布局描述、ASCII 线框图和独特签名元素的设计 token 系统；检查方案是否落入常见模板风格并要求修订；指导英雄区、结构标记、动效、响应式布局、键盘焦点、减少动效和界面文案的设计；提供面向实现的设计判断，但来源未显示它会运行命令、调用外部服务或生成文件。
- 前端开发者在开始制作一个缺少明确视觉方向的新页面时，用它建立配色、字体和布局方案。
- 设计师需要重塑已有界面、摆脱模板化风格时，用它审查并强化视觉识别。
- 产品团队需要为一个主题明确但 brief 不完整的页面确定受众和核心任务时，用它补齐设计前提。
- 需要编写按钮、错误状态和空状态文案的团队，用它统一界面语言和用户视角。
- 希望兼顾移动端、键盘焦点和减少动效体验的网页项目，用它作为设计检查清单。
优缺点一览
- 把主题、受众和页面目标纳入视觉决策，而不是只提供通用样式建议。
- 要求输出可讨论的颜色、字体、布局和签名元素方案，并进行一次反模板化审查。
- 覆盖文案、响应式设计、键盘焦点和减少动效等实现质量问题。
- 前置要求和内容较通用，没有显示出平台专属 frontmatter、脚本或外部服务依赖。
- 来源未显示它会直接编写、运行或测试代码，采用者仍需自行实现和验证。
- 没有提供现成组件、设计令牌文件、脚本或测试套件的证据。
- 它强调承担审美风险，可能不适合需要严格遵循既有品牌系统的项目。
- 安装时所需的确切 marketplace 插件名未在所给材料中明确说明。
如何安装
该 Skill 位于仓库的 plugins/frontend-design/skills/frontend-design/SKILL.md。README 说明可通过 Claude Code 插件系统安装：/plugin install {plugin-name}@claude-plugins-official；来源未在所给材料中明确列出该插件的最终 marketplace 名称，因此具体名称需在 /plugin > Discover 中确认。
如何使用
将该 Skill 放入兼容 Agent Skills 的客户端后，在设计或重塑界面时提供具体 brief，例如："为面向独立音乐人的活动发布页面建立独特视觉方向，先给出颜色、字体、布局、ASCII 线框和一个可解释的审美风险，再检查方案是否落入通用默认风格。" 来源未规定额外命令、参数或触发语法。