SuperAPI AI 工具集

frontend-design-2010s

前端与建站

查看项目

更新于 10-16 06:48

技能介绍

用途:该技能引导生成早期2010年代(约2010—2014)企业/SaaS网页的视觉风格——是真实还原那个时代的设计语言而非戏仿,目标是精致、专业、略显厚重,并充满对渐变的自信。用户提供需要构建的组件、页面或布局,可附上品牌、产品或受众背景。

主要能力:实现可运行的HTML/CSS/JS代码,要求生产级且功能完整、视觉上忠实还原时代细节、整体协调统一、默认构建完整页面(除非明确只要组件)。风格要点:使用清晰的水平条带结构(页头、主视觉、功能区、内容区、页脚),每段有独立背景;字体上标题使用粗体、大写、压缩感的展示字体(如Oswald、Bebas Neue、Anton),正文搭配干净的人文无衬线字体(如Open Sans、Lato、Source Sans Pro),导航和标签文字大写并加大字距,HTML中不大写文本而用CSS的text-transform: uppercase;页头为深色渐变,分区标题用明亮强调色,CTA按钮使用与页头对比的高饱和色,背景在白色与浅灰之间交替;色彩令牌用OKLCH定义;正文对比度不低于4.5:1,大标题不低于3:1;导航、卡片、按钮、图片等均带投影,输入框呈内凹感、按钮呈凸起感;标志性的光泽按钮为上半个透明的白色::after覆盖层,配小圆角(3—5px)、稍深边框和投影;使用CSS Grid和Flexbox实现两栏、三/四栏等布局;小视口下导航折叠为汉堡按钮(带小圆角、渐变、投影,以aria-expanded切换),移动导航面板继承页头渐变背景;图标采用拟物化细节。

使用方式:向技能提供要构建的组件、页面或布局及可选品牌背景,由技能输出对应代码;未提供配色时依据产品语境推导(企业工具深石板色、金融深海军蓝、科技深青、开发者产品深炭黑等),并搭配高能量CTA色。

适用场景:需要早期2010年代、Web 2.0或复古企业网页外观的界面设计。

限制:资料未提供具体安装命令、价格或平台信息;技能明确要求绝不产出扁平化设计(无阴影、渐变、深度),避免细字体、描边按钮和过大的圆角;配色需适配用户品牌但必须保持时代结构语法。