SuperAPI AI 工具集

frontend-design

前端与建站

查看项目

更新于 10-24 16:19

技能介绍

用途:该技能面向前端/UI 设计与实现工作,适用于没有现成品牌或设计系统约束的项目。目标是在编写 HTML 时兼顾美学细节与创意选择,产出具有辨识度的界面与 CSS 布局。

主要能力:提供一套设计思考框架,要求在编码前明确三个问题:界面解决什么问题、由谁使用;选择一种极端的语调方向(如极简、极繁、复古未来、自然有机、奢华精致、玩具感、杂志编辑、粗野主义、装饰几何、柔和粉彩、工业实用等);确定差异点,即什么让界面令人难忘。技能强调选定清晰的概念方向并精确执行,认为大胆极繁与精致极简都可行,关键在于有意为之而非强度。

设计准则:排版上建议选择美观、独特、有性格的字体,避免 Arial、Inter 等通用字体,可将特色展示字体与精致正文字体搭配;配色上坚持统一美学,使用 CSS 变量保持一致性,主张主色加锐利点缀优于平均分布的保守配色;动效上用于效果与微交互,HTML 场景优先纯 CSS 方案,聚焦高影响力时刻,例如一次编排良好的页面加载与错落显现;空间构图上鼓励非对称、重叠、对角流线、打破网格的元素,以及大量留白或受控密度;背景与视觉细节上强调营造氛围与深度,可用渐变网格、噪点纹理、几何图案、层叠透明、戏剧性阴影、装饰边框、颗粒叠加等。技能还建议在明暗主题、字体与美学之间变化,避免每次生成收敛到相同选择,并按美学愿景匹配实现复杂度:极繁设计需要精细动效与效果,极简设计则需要克制、精确与对间距和细节的用心。

使用方式:作为前端设计指导在实现响应式界面与 CSS 布局时参考,先完成设计思考再进入编码。具体安装命令与调用方式暂未提供。

适用场景:无品牌规范约束的网页或前端界面设计、需要鲜明视觉风格的 HTML 页面、响应式 CSS 布局创作。

限制:资料未说明支持的平台、依赖工具、性能影响或与特定框架的兼容性,暂未提供。