SuperDesign

• Tarvitset tekoälyagentin, joka luo UI-koodia (HTML/CSS/Tailwind), joka näyttää viimeistellyltä ja modernilta – ei mallipohjamaista.
• Rakennat laskeutumissivuja, koontinäyttöjä tai komponenttiraskkaita käyttöliittymiä ja haluat strukturoidun suunnitteluprosessin, jota noudatetaan automaattisesti.
• Haluat yhtenäisen teemoituksen vaalean/tumman tilan välillä moderneja väritekniikoita, kuten oklch(), käyttäen.
• Tarvitset saavutettavia, mobiili ensin -periaatteella rakennettuja, responsiivisia asetteluja, joissa on asianmukainen semanttinen HTML valmiiksi.

• Työskentelet natiivissa mobiiliympäristössä (iOS/Android) — nämä ohjeet ovat verkkokeskeisiä.
• Projektisi käyttää jäykkää suunnittelujärjestelmää (esim. Material Designin tiukka noudattaminen), joka on ristiriidassa täällä tarjottujen mielipiteellisten teemarakenteiden kanssa.

Jokainen käyttöliittymä käsitellään järjestyksessä: asettelusuunnittelu, teemasuunnittelu, animaatiosuunnittelu ja toteutus. Tämä estää hyppäämisen suoraan koodiin ennen kuin rakenne ja visuaalisuus on otettu huomioon, mikä johtaa yhtenäisempiin lopputuloksiin.

Taito välttää tietoisesti vanhentuneita yleisiä väripaletteja (kuten Bootstrap-sininen) ja edistää oklch()-funktion käyttöä havainnoinnin kannalta yhtenäisiin, moderneihin värimäärityksiin. Valmiit teemamallit tummalle tilalle (Vercel/Linear-tyyli), Neo-brutalismille ja Lasimorfismille sisältyvät pakettiin valmiiden CSS-muuttujien kera.

Tarjolla on käsinpoimittu luettelo Google Fonts -fonteista sans-serif-, monospace-, serif- ja display-kategorioissa, sekä CDN-valmis integraatio Lucide-kuvakkeille ja Flowbite-komponenteille — mikä poistaa arvailun typografiavalinnoista.

Tiivis merkintäjärjestelmä mikrovuorovaikutusten suunnitteluun (esim. button: 150ms [S1→0.95→1] press) pitää animaatiot harkittuina. Sisääntulo-animaatioille, hover-tiloille, painikkeen painallukselle ja sivusiirtymille on määritelty suositellut ajoitusvälit.

Ohjeet pakottavat semanttisen HTML:n käytön, asianmukaisen otsikkohierarkian, ARIA-tunnisteet, vähintään 4,5:1 värikontrastisuhteen sekä näppäimistönavigointituen — varmistaen, että tulokset täyttävät esteettömyyden perustason vaatimukset ilman lisäkehotteita.

Korttien, painikkeiden, lomakkeiden ja navigoinnin opinionated-parhaat käytännöt ovat sisäänrakennettuja — kattaen varjosyvyyden, kosketuskohteiden koon, kohdistustilat, lataus- ja poistetut käytöstä -tilat sekä kiinnitetyn otsikon käyttäytymisen.

Pyydä agenttiasi rakentamaan SaaS-laskeutumissivu, ja SuperDesign varmistaa, että se noudattaa jäsenneltyä asettelua (ylätunniste → hero-osio → ominaisuudet → alatunniste), valitsee modernin fonttiparin, soveltaa yhtenäistä väriteemaa ja luo mobiililähtöisen responsiivisen CSS:n — kaikki ilman manuaalista suunnitteluohjausta.

Kun luodaan prototyyppiä analytiikka- tai hallintakojetaululle, taito ohjaa agentin ensin hahmottelemaan asettelun rautalankamallina, soveltamaan yhtenäistä välistystä ja hienovaraisia korttivarjoja sekä lisäämään hover- ja animaatiotilat — tuottaen prototyypin, joka näyttää tuotantovalmiilta.

Käytä tätä taitoa luodaksesi yhtenäisen kokoelman painikkeita, lomakekenttiä ja navigointikomponentteja, jotka jakavat samat suunnittelutunnisteet (CSS-muuttujat väriä, pyöristystä ja varjoa varten) ja läpäisevät saavutettavuustarkistukset.

Kun rakennetaan käyttöliittymää, jonka on tuettava sekä vaaleaa että tummaa tilaa, SuperDesign-taidon CSS-muuttujien lähestymistapa ja oklch()-värisuositukset auttavat agenttia tuottamaan teematietoisen järjestelmän alusta alkaen, sen sijaan että tumma tila lisättäisiin jälkikäteen.