SuperAPI AI 工具集

frontend-design-deslop

设计与创作

查看项目

更新于 10-16 09:55

技能介绍

用途:该技能针对 AI 生成 UI 千篇一律的问题,主张“策略驱动设计”,先明确产物类型、受众与品牌形容词,再进入视觉系统与实现,同时兼顾应用级设计质量。

主要能力:分阶段推进。Phase 0 发现与定调,检查项目根目录或 docs/ 下是否已有 DESIGN.md,存在则沿用其令牌并扩展;缺失则先确定产物类型(落地页、定价页、SaaS 应用、仪表盘、电商、作品集等)、受众定位与 3–5 个品牌形容词。Phase 1 将策略转为设计系统,包括有主见的美学方向、品牌优先的字体、OKLCH 色彩、令牌表(字体、字号比例、间距、圆角、阴影、语义色)、签名式设计动作与适配器(CSS 自定义属性、Tailwind v4 @theme 或 shadcn 语义令牌)。Phase 2 应用工艺层:布局、组件全状态、动效、图标、图像、暗色模式与无障碍。Phase 3 写入 DESIGN.md 作为唯一事实来源。

使用方式:通过环境的问题工具向用户提问,一次一问、每题 2–4 个可点选项;无问题工具时用文字给出同样选项。先推断再确认,只问会改变设计系统的高信号问题。按需加载 references/ 下的参考文件,如 design-theory.md、discovery.md、typography.md、color-oklch.md、layout.md、components.md、motion.md、accessibility.md、slop-checklist.md 等。

适用场景:落地页、SaaS 应用、仪表盘、电商、作品集、文档等前端界面设计,尤其适合希望摆脱默认 AI 审美的项目。

限制:资料未提供具体安装命令、收费方式、平台支持与效果数据;技能依赖问题工具与参考文件,部分检查项需要渲染页面或浏览器截图才能完成。