前端设计v1.0.0

免责声明：本站部分 Skill 来源于公开渠道，使用前请注意识别相关风险，内容版权归原作者所有，如 Skill 涉及版权问题，请在线反馈，核实后予以下架处理。

概述

本 Skill 面向需要高辨识度前端界面的产品落地页、数据仪表盘、个人作品集、活动营销页等场景。它强制要求「先锁定视觉方向再写代码」：从 8 种极端美学方向（极致极简、极繁主义、复古未来、有机自然、奢华精致、杂志编辑、粗野主义、工业实用）中选定一种，全程贯穿非对称布局、定制字体配对、CSS 变量主题系统与编排式动效，最终交付可直接运行的生产级代码。核心目标是消除 AI 生成界面的同质化痕迹——每一次输出都针对具体上下文做独特设计决策，而非套用默认模板。

技能包含

• SKILL.md（本文件）：技能主说明，含触发条件、设计方法论、工作流程与输出约定
• README.md：中英双语安装与使用说明
• references/zh-CN.md：完整中文版设计协议——字体配对清单、色彩主题策略、动效编排细则、空间构成指南、氛围质感代码、反 AI 味检查表与交付自检表
• references/playbook.md：完整英文版设计协议，与中文版方法论完全一致
• _icon.png / _meta.json / _skillhub_meta.json：技能包标识与元数据

核心能力

• 极端方向锁定：8 种美学方向单选机制，禁止混成模糊风格
• 定制字体配对：提供展示字与正文字的系统化配对方案，禁用 Inter / Roboto 等默认字体
• CSS 变量主题系统：统一管控颜色、字阶、间距、圆角、阴影与动效时长
• 编排式动效：优先 CSS 实现，一次编排 3–6 组 staggered 入场序列，替代零散微交互
• 氛围层构建：渐变网格、噪点纹理、几何图案、层叠透明度等质感代码，拒绝扁平色块
• 反 AI 味自检：内置对比度、焦点状态、减少动效偏好、响应式等可访问性强制检查
• 双语路由：中文输入自动调用 references/zh-CN.md，英文输入使用本文件英文主体

应用场景