frontend-design

用途：frontend-design 是一个前端设计类技能，目标是在构建组件、页面、应用或界面时，产出具有辨识度、可直接用于生产的前端界面，并刻意规避千篇一律的“AI 生成感”审美。用户通常提供前端需求：一个组件、页面、应用或界面，并可能附带其目的、受众或技术约束等背景信息。\n\n设计思考：在编码之前先理解上下文，并确定一个明确的美学方向。包括四个方面：目的（该界面解决什么问题、由谁使用）、基调（选择一个极端方向，例如极简、极繁混乱、复古未来、自然有机、奢华精致、玩具感、杂志编辑风、粗野主义、装饰几何、柔和粉彩、工业实用等）、约束（框架、性能、可访问性等技术要求）、差异化（什么让它令人难忘）。要点是选定一个清晰的概念方向并精确执行，强烈的极繁与克制的极简都可行，关键在于意图明确而非强度。\n\n实现要求：随后实现可运行代码（HTML/CSS/JS、React、Vue 等），要求达到生产级且功能可用、视觉醒目且令人难忘、具有统一而清晰的美学观点、每个细节都经过细致打磨。\n\n前端美学准则：\n- 排版：选择美观、独特、有趣的字体，避免 Arial、Inter 等通用字体；用一款有辨识度的标题字体搭配精致的正文字体。\n- 色彩与主题：坚持统一的审美，使用 CSS 变量保持一致；主色加锐利点缀优于平均分布的保守配色。\n- 动效：用动画实现效果与微交互；HTML 优先纯 CSS 方案，React 在可用时使用 Motion 库；聚焦高影响力时刻，例如一次编排良好的页面加载配合错落显现（animation-delay），比零散的微交互更令人愉悦；使用带惊喜感的滚动触发与悬停状态。\n- 空间构图：采用出人意料的布局、非对称、重叠、对角流动、打破网格的元素；大量留白或受控的密集排布。\n- 背景与视觉细节：营造氛围与纵深，而非默认纯色；加入与整体审美匹配的语境化效果与纹理，如渐变网格、噪点纹理、几何图案、层叠透明、戏剧化阴影、装饰性边框、自定义光标、颗粒叠加等。\n\n禁止事项：不要使用常见的“AI 生成”审美，例如被滥用的字体族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色（尤其是白底紫色渐变）、可预测的布局与组件模式、缺乏语境特征的模板化设计。应当创造性地诠释并做出出人意料的、真正贴合语境的选择，不同设计之间要有差异，在浅色与深色主题、字体与审美之间变化，避免在多次生成中收敛到雷同选项。\n\n复杂度匹配：实现复杂度需与美学愿景匹配——极繁设计需要包含大量动画与效果的精细代码；极简或精致设计则需要克制、精确，以及对间距、排版和微妙细节的用心打磨。\n\n使用方式：该技能随 praxstack/skills-and-personas 提供，具体调用方式、配置文件与安装命令暂未提供。适用场景：需要 UI/UX 设计、Web 组件、页面、落地页等前端设计与实现的任务。限制：以上为技能定义层面的说明，实际可用性、依赖环境与效果暂未提供。