SuperAPI AI 工具集

frontend-design

前端与建站

查看项目

更新于 10-16 01:31

技能介绍

frontend-design 是一个前端界面设计与实现技能,目标是产出风格鲜明、可投入生产的界面,避免千篇一律的通用 AI 审美。用户提供前端需求,包括组件、页面、应用或界面,并可附带用途、受众或技术约束等背景信息。

主要能力:在编写代码前先进行设计思考,明确用途、基调、技术约束与差异化亮点,选定一个清晰的概念方向并精确执行;随后实现真实可运行的代码,支持 HTML/CSS/JS、React、Vue 等,要求功能可用、视觉突出、风格统一、细节精致。

设计准则:字体上选择独特、有性格的展示字体并搭配精致正文字体,避免 Inter、Roboto、Arial 等通用字体;色彩与主题保持统一,建议使用 CSS 变量、主色加锐利强调色;动效用于效果与微交互,HTML 优先纯 CSS 方案,React 可用 Motion 库,强调单个编排良好的加载揭示、滚动触发与悬停状态;空间构图可采用不对称、重叠、对角线、打破网格、大量留白或受控密度;背景与视觉细节可使用渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰边框、自定义光标、颗粒叠加等营造氛围。

限制与注意:避免常见 AI 生成审美,如过度使用的字体族、紫渐变白底配色、可预测布局与模板化设计;不同生成结果应变换明暗主题、字体与美学方向;实现复杂度需匹配美学愿景,极简设计重在克制与精确,极繁设计才需要复杂动画与效果。具体支持框架、安装方式与平台信息暂未提供。