用途：frontend-design 用于指导构建独特、生产级的前端界面，目标不是套用常见“AI 味”模板，而是在真实可运行的代码中体现明确的美学判断、排版、色彩、布局、动效与交互细节。资料说明适用于用户要求创建 Web 组件、页面、工件等场景。
主要能力：该技能覆盖设计上下文确认、美学方向选择与前端实现。它要求每个设计技能至少具备目标受众、使用场景、品牌个性或语气三类上下文，且强调不能从代码库反推这些信息，必须由创建者提供。获取顺序为：先检查当前指令中是否已有 Design Context；否则读取项目根目录的 .impeccable.md；若两者都没有，则必须先运行 teach-impeccable 技能，不能跳过或改从代码推断。
用法要点：设计前先确定目的、语气、技术约束与差异化记忆点，并选择一个明确方向并精确执行。实现应生产可用、视觉突出、具有统一美学观点且细节精炼。排版上建议使用模块化字阶与流体字号（clamp），搭配有辨识度的展示字体与精炼正文字体；避免 Inter、Roboto、Arial、Open Sans、系统默认字体，也不要用等宽字体充当“技术感”，不要在标题上方堆大圆角图标。色彩上建议使用 oklch、color-mix、light-dark 等现代 CSS 色彩函数，中性色向品牌色相偏移；避免灰字配彩色背景、纯黑纯白、深色底青紫渐变霓虹等常见 AI 配色，以及无意义的渐变文字。布局上通过变化间距制造节奏，可使用 clamp() 流体间距、不对称与有意破格；避免万物卡片化、卡片套卡片、同质卡片网格、英雄数字模板与全部居中。视觉细节上装饰应服务品牌；避免滥用毛玻璃、厚单边描边圆角、装饰性迷你图与通用圆角阴影；除非确无更优方案，不使用模态框。动效应聚焦高影响时刻，使用 ease-out-quart/quint/expo 等指数缓动，仅动画 transform 与 opacity；高度变化可用 grid-template-rows 过渡，避免 width、height、padding、margin 动画以及回弹或弹性缓动。交互上采用乐观 UI，渐进披露信息，设计能教学的空状态，避免重复信息和所有按钮都用主样式。响应式上建议使用 @container 做组件级响应，按上下文适配而非简单缩小，移动端不应隐藏关键功能。文案应让每个词都有价值。
限制与注意：资料未提供该技能的收费、价格、安装命令、支持平台、具体效果数据或版本信息；也未提供完整代码示例。实现复杂度需匹配美学愿景：极繁设计需要更复杂的动画与效果代码，极简或精炼设计则需要克制、精确与对间距、排版和细节的细致处理，且不应在多轮生成中反复收敛到同一套常见选择。