SuperDesign

• Du behöver en AI-agent som genererar UI-kod (HTML/CSS/Tailwind) som ser polerad och modern ut, inte mallbaserad.
• Du bygger landningssidor, dashboards eller komponenttunga gränssnitt och vill ha en strukturerad designprocess som följs automatiskt.
• Du vill ha konsekvent tematisering för ljust/mörkt läge med moderna färgtekniker som oklch().
• Du behöver tillgängliga, mobilanpassade, responsiva layouter med korrekt semantisk HTML direkt ur lådan.

• Du arbetar i en nativ mobilmiljö (iOS/Android) — dessa riktlinjer är webbaserade.
• Ditt projekt använder ett strikt designsystem (t.ex. strikt efterlevnad av Material Design) som konfliktar med de åsiktsstarka temamönster som tillhandahålls här.

Varje användargränssnitt hanteras genom Layout Design, Theme Design, Animation Design och Implementation — i den ordningen. Detta förhindrar att man hoppar direkt till kod innan struktur och estetik har övervägts, vilket resulterar i mer sammanhängande resultat.

Färdigheten undviker medvetet föråldrade generiska paletter (som Bootstrap-blått) och förespråkar oklch() för perceptuellt enhetliga, moderna färgdefinitioner. Färdiga temamönster för mörkt läge (Vercel/Linear-stil), Neo-Brutalism och Glassmorfism ingår med CSS-variabler redo att använda.

En handplocklad lista med Google Fonts inom kategorierna sans-serif, monospace, serif och display tillhandahålls, tillsammans med CDN-klar integration för Lucide-ikoner och Flowbite-komponenter — vilket eliminerar gissningsarbetet kring typografival.

Ett koncist notationssystem för planering av mikrointeraktioner (t.ex. button: 150ms [S1→0.95→1] press) håller animationer avsiktliga. Rekommenderade timingintervall för entréanimationer, hoverstatus, knapptryckningar och sidövergångar är definierade.

Riktlinjerna säkerställer semantisk HTML, korrekt rubrikhierarki, ARIA-etiketter, ett minsta färgkontrastvärde på 4,5:1 samt stöd för tangentbordsnavigering — vilket garanterar att resultaten uppfyller grundläggande tillgänglighetsstandarder utan extra instruktioner.

Välgrundade bästa praxis för kort, knappar, formulär och navigering är inbyggda — och täcker skuggdjup, touch-målstorlekar, fokusstatus, laddnings-/inaktiverade tillstånd och sticky header-beteende.

Be din agent att bygga en landningssida för SaaS och SuperDesign ser till att den följer en strukturerad layout (header → hero → funktioner → footer), väljer ett modernt typsnittpar, tillämpar ett sammanhängande färgtema och genererar mobilanpassad responsiv CSS — allt utan manuell designstyrning.

När du skapar en prototyp för en analys- eller adminpanel guidar skickligheten agenten att först skissa upp layouten som ett wireframe, applicera konsekvent avstånd och subtila kortskuggor samt inkludera hover- och animationstillstånd — vilket resulterar i en prototyp som ser produktionsklar ut.

Använd denna färdighet för att generera en sammanhängande uppsättning knappar, formulärfält och navigationskomponenter som delar samma designtoken (CSS-variabler för färg, radie och skugga) och klarar tillgänglighetskontroller.

När man bygger ett gränssnitt som måste stödja både ljust och mörkt läge, hjälper SuperDesign-färdighetens CSS-variabelmetod och oklch()-färgiktlinjer agenten att producera ett temavetet system från start, snarare än att i efterhand lägga till mörkt läge.