Eksempel: Tekstbaseret UI Generator

Dette værktøj genererer en tekstbaseret brugergrænseflade baseret på beskrivelse. Fuld kildekode er givet til dig, så du kan prøve det af.

Vi er fortalere for AI-drevet udvikling, som praktiseres af https://eastagile.com. For at støtte dette bruger vi AI til at hjælpe os med at udvikle brugergrænseflader. Dette værktøj genererer en tekstbaseret brugergrænseflade baseret på beskrivelse og en (valgfri) anmodning om visse brugergrænsefladeelementer. Prompten til værktøjet beder om designelementer samt passende UI-tekst. Dette eksempel præsenteres som et konkret og praktisk eksempel på et værktøj, som man kunne skabe og implementere i hele dit team. Her er et eksempel på dets brug. Brugerinput:

Genereret output:

Du tilføjer dit tilpassede værktøjs json inde i Genstudio.

Her er den faktiske json, som du ville opdatere i en fil (dvs. text-based-ux-designer.json).

{
"version": "0.1",
"metadata": {
"avatar": "",
"creator": {
"name": "Inspireret af Khoa Tran",
"email": "admin@eastagile.com",
"organization": "East Agile"
},
"timestamp": "2023-06-01T10:00:00Z",
"variables": [
{
"name": "Funktion Beskrivelse",
"type": "text",
"default": "",
"description": "En kort beskrivelse af funktionen eller funktionaliteten."
},
{
"name": "UI Komponenter",
"type": "text",
"default": "Alt passende og konventionelt",
"description": "Den type brugergrænsefladekomponenter (f.eks. radioknap, multi-vælg liste)."
}
],
"parameters": {
"top_p": 1,
"max_tokens": 1024,
"temperature": 0.7,
"presence_penalty": 0,
"frequency_penalty": 0
},
"avatar_type": "base64",
"description": "Dette værktøj genererer en tekstbaseret brugergrænseflade baseret på din beskrivelse og de angivne brugergrænsefladekomponenter.",
"prompt_name": "Tekstbaseret Brugergrænseflade Generator",
"usage_notes": "Giv en beskrivelse af, hvilken slags grænseflade, funktion eller app du ønsker at generere (Funktion Beskrivelse) og enhver specifik type brugergrænsefladeelementer, du ønsker at bruge (UI Komponenter). Denne applikation er designet til at støtte AI-drevet udvikling (AiDD), som praktiseres af East Agile https://eastagile.com.",
"model_version": [
"gpt-3.5",
"gpt-4",
"claude",
"palm"
],
"expected_output": {
"type": "text"
}
},
"model_prompt": "Generer en tekstbaseret brugergrænseflade med formulering til følgende funktion eller funktionalitet:\n\nFunktion Beskrivelse: {{Funktion Beskrivelse}}\nBrugergrænsefladeelementer: {{UI Komponenter}}.\n\nFølg venligst disse bedste praksisser for at skabe effektiv UX-skrivning:\n1. Gør det brugbart: Prioriter funktionalitet og brugervenlighed over smart sprog eller ukonventionelt design.\n2. Gør det hjælpsomt: Giv nyttige oplysninger, der vejleder brugerne og hjælper dem med at nå deres mål.\n3. Gør det tilgængeligt: Brug simpelt, klart sprog og konventionelle designelementer, der gør det nemt for alle brugere at forstå, herunder dem med handicap.\n4. Gør det klart: Undgå jargon og tvetydighed; brugerne skal kunne forstå indholdet og UI hurtigt og nemt. Når det er muligt, bør UI-affordancer være åbenlyse uden at skulle læse tekst.\n5. Gør det passende: Overvej den kulturelle baggrund og konteksten for dine brugere, hvis det er angivet, og sikre, at indholdet er inkluderende og respektfuldt.\n6. Brug aktiv stemme: Opfordr brugerne til at handle ved at bruge aktivt, direkte sprog.\n7. Skriv positivt: Fokuser på bekræftende udsagn og undgå negative sætninger, medmindre det er absolut nødvendigt.\n8. Vær kortfattet: Hold sætninger korte og præcise, og eliminér unødvendige ord og sætninger.\n9. Udfør konstant A/B-testning: Test og forfin indholdet løbende for at sikre, at det er effektivt og brugervenligt.\n10. Hold brandstemmen og tonen konsistent: Sørg for, at indholdet stemmer overens med den overordnede brandpersonlighed og opretholder en konsekvent tone gennem hele brugeroplevelsen.\n11. Brug handlingsorienteret sprog: Opfordr brugerne til at handle ved at bruge sprog, der er klart, direkte og fokuseret på specifikke opgaver.\n12. Oprethold kontekstuel relevans: Giv relevant kontekst for at sikre, at indholdet er let lokaliserbart og oversætteligt til forskellige sprog og kulturer.\n\nGenereret UX-skrivningsindhold:\n"
}

Du kan oprette dit eget ikon og indtaste det som en base64 tekstblok i denne json. Ellers vil et pænt standardikon blive brugt.

Last updated 8 days ago

{ "version": "0.1", "metadata": { "avatar": "", "creator": { "name": "Inspireret af Khoa Tran", "email": "admin@eastagile.com", "organization": "East Agile" }, "timestamp": "2023-06-01T10:00:00Z", "variables": [ { "name": "Funktion Beskrivelse", "type": "text", "default": "", "description": "En kort beskrivelse af funktionen eller funktionaliteten." }, { "name": "UI Komponenter", "type": "text", "default": "Alt passende og konventionelt", "description": "Den type brugergrænsefladekomponenter (f.eks. radioknap, multi-vælg liste)." } ], "parameters": { "top_p": 1, "max_tokens": 1024, "temperature": 0.7, "presence_penalty": 0, "frequency_penalty": 0 }, "avatar_type": "base64", "description": "Dette værktøj genererer en tekstbaseret brugergrænseflade baseret på din beskrivelse og de angivne brugergrænsefladekomponenter.", "prompt_name": "Tekstbaseret Brugergrænseflade Generator", "usage_notes": "Giv en beskrivelse af, hvilken slags grænseflade, funktion eller app du ønsker at generere (Funktion Beskrivelse) og enhver specifik type brugergrænsefladeelementer, du ønsker at bruge (UI Komponenter). Denne applikation er designet til at støtte AI-drevet udvikling (AiDD), som praktiseres af East Agile https://eastagile.com.", "model_version": [ "gpt-3.5", "gpt-4", "claude", "palm" ], "expected_output": { "type": "text" } }, "model_prompt": "Generer en tekstbaseret brugergrænseflade med formulering til følgende funktion eller funktionalitet:\n\nFunktion Beskrivelse: {{Funktion Beskrivelse}}\nBrugergrænsefladeelementer: {{UI Komponenter}}.\n\nFølg venligst disse bedste praksisser for at skabe effektiv UX-skrivning:\n1. Gør det brugbart: Prioriter funktionalitet og brugervenlighed over smart sprog eller ukonventionelt design.\n2. Gør det hjælpsomt: Giv nyttige oplysninger, der vejleder brugerne og hjælper dem med at nå deres mål.\n3. Gør det tilgængeligt: Brug simpelt, klart sprog og konventionelle designelementer, der gør det nemt for alle brugere at forstå, herunder dem med handicap.\n4. Gør det klart: Undgå jargon og tvetydighed; brugerne skal kunne forstå indholdet og UI hurtigt og nemt. Når det er muligt, bør UI-affordancer være åbenlyse uden at skulle læse tekst.\n5. Gør det passende: Overvej den kulturelle baggrund og konteksten for dine brugere, hvis det er angivet, og sikre, at indholdet er inkluderende og respektfuldt.\n6. Brug aktiv stemme: Opfordr brugerne til at handle ved at bruge aktivt, direkte sprog.\n7. Skriv positivt: Fokuser på bekræftende udsagn og undgå negative sætninger, medmindre det er absolut nødvendigt.\n8. Vær kortfattet: Hold sætninger korte og præcise, og eliminér unødvendige ord og sætninger.\n9. Udfør konstant A/B-testning: Test og forfin indholdet løbende for at sikre, at det er effektivt og brugervenligt.\n10. Hold brandstemmen og tonen konsistent: Sørg for, at indholdet stemmer overens med den overordnede brandpersonlighed og opretholder en konsekvent tone gennem hele brugeroplevelsen.\n11. Brug handlingsorienteret sprog: Opfordr brugerne til at handle ved at bruge sprog, der er klart, direkte og fokuseret på specifikke opgaver.\n12. Oprethold kontekstuel relevans: Giv relevant kontekst for at sikre, at indholdet er let lokaliserbart og oversætteligt til forskellige sprog og kulturer.\n\nGenereret UX-skrivningsindhold:\n" }