SuperAPI AI 工具集

common-ui-design

设计与创作

查看项目

更新于 10-15 22:13

技能介绍

用途:在编写任何前端代码之前,先为界面确定明确的美学方向,用于构建网页组件、页面、界面、仪表盘或应用。该技能将设计思考列为强制前置步骤,优先级为 P0。

主要能力:要求先回答三个问题——界面解决什么问题、面向谁;从一组极端风格中选定一种基调(如极简、极繁、复古未来、杂志编辑、奢华精致、粗野原始、玩具般俏皮、有机自然、装饰艺术、工业实用);并指出用户会记住的一个差异化点。强调刻意性而非强度,极繁与极简均可。

设计维度:字体上要求搭配有辨识度的展示字体与精致正文字体,避免系统默认字体,生产环境通过 next/font、@font-face 或 Google Fonts API 自托管,而非 CDN link。配色上主张主色加锐利强调色,使用 CSS 自定义属性(如 --color-primary、--color-accent)保持一致,并明确选择深色或浅色。动效上主张一次精心编排的入场(错峰揭示、animation-delay)优于零散微交互,CSS 优先使用 @keyframes、transition、animation-delay,React 复杂序列可用 Motion 库。空间构图上鼓励有意打破网格,采用不对称、重叠、对角流动,并选择充裕留白或受控密度。背景与深度上建议使用渐变网格、噪点纹理、分层透明、颗粒叠加,阴影与装饰边框需匹配所选基调。

反模式:避免 Inter/Roboto/Arial/system-ui 等通用字体;避免白底紫色渐变这一被过度使用的 AI 风格;避免零散动画;避免无意图的布局;避免重复同一套美学。

限制:资料未提供具体安装命令、代码示例、收费方式或平台支持信息,暂未提供。