Frontend Design 视觉设计指导
帮助你为网页界面建立独特、明确且不模板化的视觉方向。
该技能仅提供前端设计指导，没有声明工具调用、文件访问、外部网络、凭据处理或破坏性操作，符合低权限和低外部影响；但未规定用户确认、数据流、回滚或敏感内容处理，且技能自身仅引用许可证而未说明具体条款，因此扣分。
内容结构一致，覆盖设计计划、批评、构建、响应式、键盘焦点和减少动效等关键路径；但没有脚本、测试、依赖说明、异常输入处理或明确的失败反馈。静态评估上限内给分，因关键路径不可复现而扣分。
明确面向创建或重塑网页界面的设计任务，并给出主题、受众、页面目标、非模板化和可访问性方向；但缺少明确触发条件、非适用范围、输入输出契约、中文语言支持和中国大陆网络环境说明，因此扣分。
信息按主题和流程分层，包含设计令牌、ASCII 线框、文案原则、已知质量要求和可维护性提示；但安装/依赖、参数命名、示例产物、FAQ、版本、变更记录和维护更新路径不完整，许可证仅指向仓库条款，故扣分。
能够为网页视觉方向提供可直接执行的审美决策框架，涵盖配色、字体、布局、标志性元素、文案和可访问性；但产出高度主观，没有代表性结果、验收标准或与手工设计及替代方案的比较证据，仍需较多实现和审查，故扣分。
技能正文是可审计的一手规范文本，关键建议可逐条追踪；但没有提交测试、CI 覆盖、第三方执行记录或独立复现证据，因此仅给有限静态可验证分数。
- 该技能是设计指导而非可验证的实现流程；使用时应补充具体需求、验收标准和实现后的可访问性与响应式测试。
- 许可证、版本、变更记录和维护更新责任未在技能文件中明确，采用前应核实仓库条款和后续维护状态。
- 技能未提供中文文案或中国大陆网络环境适配说明，中文产品和受限网络场景需要人工评估。
它能做什么 & 适用场景
这是一个用于网页界面设计与重塑的指导型技能，强调根据具体主题做出有意图的视觉选择。它覆盖配色、字体、布局、文案、动效、响应式设计、键盘焦点和减少动效等方面。技能要求先进行设计构思、规划和批评，再进入实现，并重点检查方案是否落入常见的生成式设计套路。它适合需要鲜明视觉身份的界面项目，但不会替代具体项目中的设计判断或实现工具。
它要求设计者先明确产品主题、受众和页面目标，再制定包含4至6个颜色、至少两类字体、布局概念和独特记忆点的设计计划，并用文字和ASCII线框进行比较。随后检查方案是否过于通用，必要时修改，再按修订后的计划编写代码。它还指导设计者处理界面文案、错误状态、空状态、响应式布局、键盘焦点和减少动效偏好。
- 前端开发者开始制作新网页，需要先确定配色、字体和布局方向。
- 产品团队重塑已有界面，希望减少模板化视觉并建立清晰的品牌个性。
- 设计师为主题明确但视觉方向开放的页面寻找具体的设计切入点。
- 界面作者需要为按钮、错误提示和空状态编写清晰、一致的文案。
- 前端团队希望在实现前通过线框、批评和迭代检查设计方案。
优缺点一览
- 提供从主题定位到实现前批评的完整设计流程。
- 明确覆盖配色、字体、布局、文案和动效等关键决策。
- 强调避免常见的奶油色衬线、黑底亮色和报纸式布局默认套路。
- 要求关注移动端、键盘焦点和减少动效等实现质量问题。
- 内容主要是设计原则和流程，不包含可直接复用的组件、脚本或资产。
- 设计结果依赖使用者对主题和视觉取舍的判断。
- 源材料没有提供测试套件、示例项目或具体框架适配说明。
- 单个技能的安装与启用方式未在源材料中说明。
如何安装
源材料说明的是 Claude Code 整体的安装方式，而不是单个技能的安装或启用方式。安装 Claude Code 可使用：MacOS/Linux 执行 curl -fsSL https://claude.ai/install.sh | bash，或执行 brew install --cask claude-code；Windows 可执行 irm https://claude.ai/install.ps1 | iex，或执行 winget install Anthropic.ClaudeCode。技能位于 plugins/frontend-design/skills/frontend-design/SKILL.md；源材料未说明如何单独复制、注册或启用该技能。
如何使用
在支持该技能的客户端中，将其作为设计指导应用于新建或改版网页界面。可以从类似“为这个产品制定一套不模板化的网页视觉方案，先给出配色、字体、布局和独特记忆点，再进行批评和修改”的请求开始。源材料未提供专用斜杠命令、参数或调用语法。