SuperAPI AI 工具集

svelte-design

前端与建站

查看项目

更新于 10-15 20:07

技能介绍

用途:该技能用于指导创建具有独特设计品质、可直接运行的生产级 Svelte/SvelteKit 前端界面,避免常见的通用化 AI 审美,并充分利用 Svelte 的响应式能力与 SvelteKit 的全栈特性。

主要能力:在编码前先确定明确的美学方向,包括用途、基调、技术约束与差异化记忆点;随后实现具备渐进增强、视觉突出、风格统一且细节精炼的 Svelte/SvelteKit 代码。设计上强调排版(避免 Arial、Inter 等通用字体,搭配特色展示字体与精致正文字体)、色彩与主题(用 CSS 变量保持一致性,主色加锐利点缀)、动效(优先使用 Svelte 内置过渡与 actions,重视页面加载的编排式呈现)、空间构成(非对称、重叠、打破网格)以及背景与视觉细节(渐变网格、噪点纹理、几何图案、层叠透明、装饰边框、自定义光标等)。

使用方式:用户提供组件、页面、应用或界面需求及背景信息。技能会依据项目需要选择组件库:shadcn-svelte(组件位于 src/lib/components/ui/,主题在 src/app.css 定制)、Skeleton UI(内置主题系统,适合仪表盘与表单)、Melt UI(无头组件,便于完全自定义)、或基于 Tailwind CSS 从零构建。关键定制文件包括 src/app.css、tailwind.config.js、src/lib/components/ui/* 与 src/routes/+layout.svelte。可运用响应式语句、slot 组合、事件处理、stores、actions、class: 与 transition: 指令以及表单 actions 实现渐进增强。

适用场景:需要打造有辨识度、非模板化观感的 Svelte/SvelteKit 界面,如组件、页面、应用与设计系统。

限制:资料未提供具体安装命令、收费方式、平台支持范围或效果保证;实现复杂度需与美学愿景匹配,极简设计应克制精确,极繁设计才需大量动画与效果。