Live-komponenttikirjastot, design-tokenit ja AI-skillit samasta paikasta. Ihminen selaa ja kopioi — AI saa saman sisällön markdownina ja rakentaa brändin näköistä UI:ta ilman arvailua.
Chat-widgetin tuotantokomponentit: tumma lasi terävän kuvan päällä, blur 20–40 px, pillimuodot, Forest Signal -vihreä. Dark + light -teemat.
Dashboardin komponentit: tiivis data-UI, solid-pinnat lasigradientilla + inset-kiillolla, neon-vihreä aksentti tummalla tekstillä, semanttiset statusvärit.
Sama perhe — Inter, pillit, yksi vihreä signaali, sama easing — mutta eri viritys eri pintaan.
| Revdot · sivusto & widget | Revdash · dashboard | |
|---|---|---|
| Aksentti | #51a35a Forest Signal, valkoinen teksti | #00dc82 neon, teksti #06281a |
| Canvas | #0d1b2a / #0a0b0d + valokuva | #0f0f12 + radial-vihreä glow |
| Pinnat | Läpikuultava lasi + blur(20–40px) | Solid #1a1a1e + glass-gradientti + inset |
| Radius | 18 px kortit · 12 px inputit · 999 px pillit | 14 px kortit · 10 px inputit · 99 px pillit |
| Yhteistä | cubic-bezier(.2,.8,.2,1) · Inter · negatiivinen tracking otsikoissa · hover = translateY(-1…-2px) + border kirkastuu · suomenkielinen UI | |
Mitä annat kenellekin.
Visuaaliset kirjastot selaimeen: revdot.html, revdash.html + puhtaat CSS:t revdot-components.css, revdash-components.css.
AI-skillit: revdot-taste/ ja revdash-ui/ — kummassakin SKILL.md + tokens.css + components.md. Anna koko kansio agentille.
demo-widget/ widgetin tuotantokoodi + live-demo · demo-revdash/ klikkailtava dashboard-mockup.
Kopioi promptin alku — loput on tehtäväsi kuvaus.
Rakenna [kuvaa mitä] Revdotin tyyliin. Tyyliohjeet ja komponentit — noudata näitä tarkasti, älä keksi omia värejä tai muotoja: - skills/revdot-taste/SKILL.md (säännöt ja identiteetti) - skills/revdot-taste/tokens.css (design-tokenit) - skills/revdot-taste/components.md (komponenttireseptit) - components/revdot-components.css (valmis komponentti-CSS — käytä näitä luokkia suoraan) Dashboard-UI:hin käytä vastaavasti skills/revdash-ui/ + components/revdash-components.css.