Fes servir temes per mantenir coherents els colors i l'arrodoniment de les cantonades a totes les pantalles de Flowstep

Un tema és una paleta de colors compartida i un arrodoniment de cantonades per a les teves pantalles. Cada fitxer té un tema i una aparença (clara o fosca), i les pantalles s’estilitzen amb els tokens del tema. Si edites un tema, totes les pantalles que el fan servir se n’adapten, de manera que el teu equip treballa amb un sol conjunt de decisions en lloc de repetir els colors en cada prompt. Els temes que creïs o generis es desen a la teva organització i apareixen a Themes a Home, de manera que qualsevol fitxer de l’organització els pot fer servir.

​

Tria un tema per a un fitxer

Tria el tema i l’aparença de les pantalles noves des del compositor de prompts dins d’un fitxer. El botó de tema no està disponible a la caixa de prompts de Home.

​

Deixa que Flowstep dissenyi un tema

Quan un fitxer encara no té cap tema (un fitxer nou amb el tema deixat en Automatic), Flowstep dissenya un tema personalitzat juntament amb les primeres pantalles que genera. Mentre treballa, veuràs un pas Designing theme al xat. Flowstep construeix el tema a partir de:

• Els colors que esmentis al teu prompt
• Els colors de les teves directrius de disseny
• Els colors de marca dels adjunts i dels enllaços que enganxis
• El producte i l’ambient que descrigui el teu prompt, quan no hi hagi res més concret en què basar-se

El tema rep un nom curt, una paleta completa per a clar i fosc, i un pas d’arrodoniment. Es desa a la teva organització sota Themes a Home, i el fitxer el fa servir per a totes les pantalles que es generin a partir d’aleshores. Quan un fitxer ja té un tema, Flowstep no n’en dissenya un altre pel seu compte. Per obtenir un tema nou, torna a triar Automatic al menú de temes: la següent generació en dissenya un de nou i el fitxer s’hi queda. Si Flowstep no pot dissenyar un tema, el fitxer recorre a un dels temes integrats.

​

Canvia el tema d’una pantalla

Per reestilitzar una sola pantalla sense tocar la resta del fitxer:

1. Selecciona la pantalla al llenç.
2. Al menú que hi ha sobre la pantalla, fes clic al botó Theme.
3. Tria un dels temes de la teva organització o un tema integrat, o canvia entre Light i Dark.

Canviar de tema torna a pintar la pantalla a l’instant. Canviar entre Light i Dark demana a la IA que reestilitzi la pantalla, igual que una edició amb IA. El menú no està disponible mentre hi ha una generació en curs.

​

Edita un tema

Obre un tema des de la secció Themes de Home. L’editor de temes mostra una vista prèvia en directe del tema, amb Theme settings a la dreta. Fes servir els botons Light i Dark de dalt per canviar la vista prèvia, i fes clic al nom del tema per canviar-li el nom.

• Colors — cada grup de colors té una mostra per a clar i una per a fosc: Primary, Secondary, Accent, Muted, Destructive, Background, Card, Popover, Border, Input, Ring, Charts i Sidebar. Fes clic en una mostra per editar-ne els colors (per exemple, els colors de farciment i de text d’un grup) amb el selector de colors o amb un valor hexadecimal.
• Radius — tria un pas d’arrodoniment (Square, Slight, Balanced, Soft o Round), o tria Custom i arrossega Base radius per definir-ne un de propi.

Les teves edicions es desen com a esborrany, de manera que les pantalles no canvien mentre treballes. Quan estiguis a punt:

• Fes clic a Publish per actualitzar totes les pantalles que fan servir el tema. Flowstep ho confirma amb el missatge «Published. Screens using this theme are updating.» (Publicat. Les pantalles que fan servir aquest tema s’estan actualitzant.)
• Fes clic a Reset changes per descartar els canvis no publicats. Les pantalles que fan servir el tema no es veuen afectades.

Per eliminar un tema, fes clic a Delete theme a la part inferior de Theme settings, o a la icona de paperera que hi ha al costat del tema a la llista Themes de Home. Un tema eliminat ja no s’ofereix als menús de temes, però les pantalles que ja l’utilitzen conserven el seu aspecte, de manera que res del llenç canvia.

​

Enllaça colors i cantonades al teu tema

Els colors i les cantonades poden apuntar a un token de tema en lloc d’un valor fix. Un valor enllaçat segueix el tema de la pantalla, de manera que quan el tema canvia (un tema diferent, una edició publicada o un canvi entre clar i fosc), els colors i les cantonades enllaçats s’actualitzen amb ell. Colors: al panell Fill o Border, fes clic a la mostra de color. A la pestanya Token, cerca o tria un token dels grups Theme, Base o Tailwind. Fes servir la pestanya Custom per a un color exacte. Un color enllaçat mostra el nom del seu token al panell, i encara pots ajustar-ne l’opacitat. Cantonades: al panell Corners, fes clic a una previsualització de cantonada. A la pestanya Token, tria un pas (per exemple, md o lg); a la pestanya Custom, escriu un valor exacte en píxels. Una cantonada enllaçada mostra el nom del seu token, i en canviar l’arrodoniment del tema es torna a arrodonir. Per convertir un valor enllaçat en un de fix, fes clic a Detach from token. El color o la cantonada conserva el seu aspecte actual però ja no segueix el tema.

​

Cal saber

• Les pantalles conserven el seu propi tema: cada pantalla recorda el seu tema i la seva aparença. Canviar el tema del fitxer només afecta les pantalles que generis a continuació; fes servir el menú Theme de cada pantalla per reestilitzar les existents.
• Només versions publicades: les pantalles mostren la versió publicada d’un tema. Els esborranys només són visibles a l’editor de temes fins que publiquis.
• Els enllaços de tokens es mantenen en les edicions: els colors del tema que s’utilitzen dins d’ombres, filtres i degradats continuen enllaçats al tema quan Flowstep edita o regenera una pantalla.
• Passos d’arrodoniment que no s’escalen: els tokens de cantonada none i full són sempre quadrats i totalment arrodonits, independentment de l’arrodoniment del tema.