Frontend Design 高质感前端设计技能
让 AI 生成避开“AI 味”模板审美、可直接用于生产环境的高品质前端界面，覆盖组件、页面、海报与完整 Web 应用。
该技能为纯提示词型设计指导，不请求任何权限、不执行脚本、无外部副作用或敏感数据流，风险面极小；扣分在于其建议引入外部字体/Motion库等依赖时未说明供应链与来源验证，且frontmatter写'Complete terms in LICENSE.txt'与仓库MIT许可证文件名不完全对应，来源归属依赖未经验证的发布者。
SKILL.md自身指令自洽、无矛盾，作为提示词技能不存在可运行性问题；扣分在于纯静态评估无法复现关键路径，技能无任何针对自身的测试或异常输入处理说明，失败反馈完全依赖宿主模型。
description明确列出触发场景（组件、页面、海报、样式美化）并给出正反例，语义触发较清晰；扣分在于未声明能力边界与非适用范围（如复杂可访问性审计、性能优化），环境适配信息缺失，未评估中文内容支持或大陆网络可达性（如外部字体加载）。
文档结构清晰，设计原则分层组织（设计思考→美学指南→反模式），可读性好；扣分在于无技能自身版本号/更新日志，许可证引用文件名与仓库实际LICENSE不符，无FAQ、已知限制或维护责任说明。
核心任务（生成有设计感的前端代码）在提示词层面指导充分，避免AI同质化美学的目标明确；扣分在于静态评估无法验证产出可直接使用，设计质量为定性主张，缺乏代表性输出证据，边际价值依赖宿主模型能力。
仅仓库主材料可审计，CI与测试针对clawteam CLI而非本技能路径，技能本身的效果主张（'避免AI slop'）无可复核证据；扣分在于无第三方对技能产出的验证，事实与推断无法分离核实。
- 本技能为纯提示词指导，其设计效果主张未经任何执行验证，仅为静态审阅结论。
- frontmatter引用'LICENSE.txt'，仓库内实际为MIT的LICENSE文件，许可条款引用不精确。
- 技能建议使用外部字体与Motion库，未提示供应链/加载来源检查；在大陆网络环境加载外部字体资源可能不可达，使用前请自行确认。
- 技能自身无版本号与更新日志，后续变更难以追踪。
- 发布者未经注册表验证，归属信息以仓库内容为准。
这个 Skill 能做什么，适合哪些场景？
这是 HKUDS/ClawTeam 仓库（Agent Swarm Intelligence 项目，MIT 许可）内捆绑的四个技能之一，位于 .agents/skills/frontend-design/。它不是一个代码库工具，而是一套纯指令型设计方法论：引导 AI 在写代码前先做设计思考——明确用途、选定大胆的美学方向、识别差异化记忆点——再输出生产级可运行的 HTML/CSS/JS 或 React 代码。技能内置详细的美学准则，涵盖字体搭配、配色主题、动效编排、空间构图与背景细节，并明确列出应避免的“AI 通用审美”（如 Inter/Roboto 字体、白底紫渐变等）。它适用于任何支持 Agent Skills 标准的客户端，无需额外依赖或脚本。
读取用户提出的前端需求（组件、页面、应用、海报或界面美化任务，可含用途、受众与技术约束）；引导一轮设计思考，从“极简/极繁/复古未来/奢华/野兽派”等方向中确定一个明确的美学概念；然后生成可直接运行的生产级代码（HTML/CSS/JS、React、Vue 等），落实具体设计准则：独特而有性格的字体搭配（明确禁用 Inter、Arial 等通用字体）、用 CSS 变量管理的主色+锐利点缀配色、以 CSS 动画或 Motion 库实现的加载/滚动/悬停微交互、非对称与破格的空间布局，以及渐变网格、噪点纹理、自定义光标等氛围细节。每次生成被要求做出不同选择，避免跨任务收敛到同一种风格。
- 开发者需要快速产出一个不落俗套的落地页或产品官网，且希望代码可直接上线而非原型草稿
- 团队在用 Claude Code 等 CLI 智能体搭建全栈应用时，希望其中前端部分自动具备设计品质而非千篇一律的模板观感
- 设计师或独立开发者想让 AI 美化现有 Web UI，同时指定或不指定美学方向（如野兽派、杂志编辑风）
- 需要生成海报、仪表盘或单个 React 组件，并要求有明确的视觉记忆点
- 维护多个项目的设计者希望每次生成的界面风格多样，避免不同项目输出雷同的设计
这个 Skill 有哪些优点和局限？
- 准则非常具体可执行：明确列出字体选择、配色结构、动效编排和布局手法，而非空泛的“要有设计感”
- 明确反模式清单（禁用 Inter/Roboto、白底紫渐变、千篇一律的组件模式），直击 AI 生成界面的通病
- 强调每次生成风格多样化，适合需要不同视觉方向的多项目场景
- 纯指令、零依赖：没有脚本、命令或平台锁定，移植到任何 Agent Skills 客户端零成本
- 强调输出可直接运行的生产级代码，并要求实现复杂度与美学愿景匹配
- 只有指导方针，没有可复用的模板、组件库或脚本，效果高度依赖模型自身的执行水平
- SKILL.md 未附 LICENSE.txt 内容，仅注明“完整条款见 LICENSE.txt”，仓库级许可为 MIT 但技能自身的许可文件未在来源中展示
- “避免通用 AI 审美”的效果没有量化评估或测试证据，属于主观质量目标
- 提到可使用 Motion 库（React）等，但未说明版本或安装方式
- 该技能与 ClawTeam 的 swarm 编排能力无直接关联，README 中的多智能体功能不属于此技能
如何安装这个 Skill？
该技能随 ClawTeam 仓库分发。安装 ClawTeam 会自动为检测到的客户端安装其捆绑技能：pip install clawteam，或运行仓库中的 scripts/install_clawteam.sh（安装到 ~/.clawteam/.venv 并链接 clawteam 命令）。README 提到安装脚本会为检测到的客户端安装捆绑技能，但未单独说明 frontend-design 技能的手动安装路径；如需手动安装，可参照 Agent Skills 惯例将 .agents/skills/frontend-design/ 文件夹复制到对应客户端的技能目录（如 ~/.claude/skills/frontend-design），此具体步骤来源未明确记载。
如何使用这个 Skill？
在支持技能的客户端中，当前端需求出现时技能会被触发。典型触发提示例如：“用这个技能帮我做一个暗色调、杂志编辑风格的 SaaS 落地页”或“美化这个 React 组件的 UI”。技能是纯指令型：无需运行任何命令，AI 会先做设计思考再输出代码。若在 ClawTeam 团队中使用，也可作为 swarm 中前端成员的能力加成，但 SKILL.md 本身未包含 ClawTeam 特定的编排指令。
这个 Skill 与同类方案有什么区别？
来源中未直接点名同类竞品。可间接类比的是不带此技能时 AI 默认生成的前端输出——技能明确将自己定位为对“通用 AI 审美”（Inter 字体、紫渐变、模板化布局）的矫正方案，但未提供具体对比项目。