Figma AI fungerer kun så godt som de instruktioner, du giver den. Vage prompts producerer generiske layouts, du skal bygge op fra bunden. Specifikke prompts — med skærmtype, sektioner, komponenter, rammestørrelse og mellemrum — producerer rutinemæssigt 70–85% produktionsklart output i ét forsøg. Disse 15 skabeloner er struktureret til Figmas 2026 AI-stak: Design Agent, Figma Make, Skills, og de gratis funktioner (auto layout, omdøb lag, erstat indhold), der koster nul kreditter.
Kopiér enhver skabelon, udskift de kantede pladsholdere med dit produkt, og kør den gennem den gratis Prompt Optimizer, hvis du vil have strammere begrænsninger. For et-klik optimering inde i ChatGPT, Claude og Gemini, mens du udarbejder agent-instruktioner, tilføjer TresPrompt ICCSSE-stil struktur til din sidebjælke.
Nøglepunkt
Enhver stærk Figma AI prompt nævner fire ting: hvilken skærm du bygger, hvilke publicerede komponenter der skal bruges, rammestørrelsen og mellemrumsregler. Tilføj negative begrænsninger ("brug ikke unavngivne rammer," "ingen lorem ipsum"), og agenten holder op med at gætte. Skills koder disse mønstre, så du ikke behøver at skrive dem igen hver session.
Design Agent Skabeloner (Skærme på Canvas)
1
Mobil indstillingsside
Opret en mobil indstillingsside (390×844) med:
1. Konto — avatar, navn, email, rediger knapper
2. Notifikationer — toggles til email, push, SMS
3. Udseende — dark mode toggle, skriftstørrelse vælger
4. Sikkerhed — skift adgangskode, 2FA toggle
5. Footer — destruktiv log ud knap, app version tekst
Brug kun publicerede komponenter. Auto layout: 16px element mellemrum, 32px mellem sektioner. Section Header komponent til gruppe labels.
2
Dashboard oversigt (desktop)
Opret et desktop analytics dashboard (1440×900) med:
- Top nav: logo, søgning, bruger menu
- Venstre sidebar: 5 nav elementer, aktiv tilstand på "Oversigt"
- Hoved: 4 KPI kort i en række, linjediagram nedenunder, nylig aktivitet tabel (5 rækker)
Brug design system variabler til farve og mellemrum. Card komponent til KPI'er. Table komponent til aktivitet. Brug ikke placeholder diagram data labels som "Serie 1."
3
Onboarding flow (3 rammer)
Opret 3 mobile onboarding skærme (390×844), venstre til højre:
1. Velkommen — overskrift, undertekst, primær CTA "Kom i gang"
2. Tilladelser — liste notifikationer + lokation med toggles
3. Succes — checkmark illustration område, "Du er klar" CTA
Brug Primary Button og Secondary Button komponenter. Fremskridt indikator der viser trin 1/3, 2/3, 3/3. Konsistent 24px vandret padding på alle rammer.
4
Tom tilstand + fejl tilstand
Opret to mobile rammer (390×844):
Ramme A — Tomme søgeresultater: ikon område, overskrift "Ingen resultater", brødtekst, sekundær "Ryd filtre" knap
Ramme B — Fejl: advarselsikon, "Noget gik galt", primær "Prøv igen", tertiær "Kontakt support"
Brug publicerede Empty State og Alert komponenter hvis tilgængelige. Centreret indhold, max bredde 280px for tekstblok.
5
Tilgængelige indstillinger (agent + a11y)
Opret en mobil indstillingsside (390×844) med tilgængelighedskrav:
- Interaktive elementer minimum 44×44px touch targets
- Tekstkontrast minimum 4.5:1 (brug design system tekstfarver)
- Overskrift hierarki H1 → H2, ingen oversprungne niveauer
- Toggles inkluderer synlige tekstlabels (ikke kun-ikon)
- Fejl tilstande bruger farve OG tekst (ikke kun farve)
Brug publicerede komponenter. Auto layout 16px / 32px mellemrum.
📬 Får du værdi af dette?
Ét handlingsanvisende AI-indsigt om ugen. Plus en gratis prompt pakke når du tilmelder dig.
Tilmeld dig gratis →
Figma Make Skabeloner (Prototype / Kode)
6
Marketing landing (Make)
Byg en enkelt-side marketing site fra denne Figma ramme:
- Hero: overskrift, underoverskrift, email capture + CTA
- 3 funktions kolonner med ikoner
- Social proof logos række
- Footer med links
Match mellemrum og farver fra den valgte ramme. Mobil-responsiv. Ingen eksterne biblioteker medmindre specificeret i ramme noter.
7
Interaktiv prototype (Make)
Opret en klikbar prototype fra rammer [list ramme navne]:
- Klik på "Tilmeld dig" navigerer til registrerings formular ramme
- Submit viser succes toast tilstand
- "Tilbage" returnerer til forrige skærm
Brug komponenter fra filen. Bevar hover tilstande på primære knapper. Tilføj ikke nye skærme der ikke er i design filen.
Skills Skabeloner (Genanvendelige Agent Instruktioner)
Gem disse som Skills markdown filer, så agenten følger team konventioner hver gang.
8
Skill: /indstillingsside
Ved oprettelse af indstillingsskærme:
- Brug altid Section Header + grupperet liste mønster
- Inkludér footer med app version (caption stil) og destruktiv log ud
- Mobil standard 390×844 medmindre bruger specificerer desktop
- Brug Toggle komponent til boolean indstillinger, aldrig brugerdefinerede checkboxes
- Mellemrum: 16px inden for grupper, 32px mellem grupper, 24px skærm padding
9
Skill: /data-tabel
Ved oprettelse af tabeller:
- Brug Table/Header og Table/Row komponenter
- Inkludér sorter ikon kolonne kun hvis bruger spørger
- Række højde 48px minimum for touch
- Afkort lang tekst med ellipsis, wrap aldrig mere end 2 linjer i celler
- Tom tilstand under tabel hvis nul rækker
Gratis Funktioner (Nul Kreditter)
10
Erstat Indhold (batch)
Erstat alt lorem ipsum i den valgte ramme med realistisk [B2B SaaS / e-commerce / sundhedspleje] tekst. Navne: mangfoldige, plausible. Adresser: US format. Produktnavne: fiktive men professionelle. Hold tegn antal lignende til pladsholdere så layout ikke går i stykker.
11
Omdøb lag (handoff prep)
Omdøb alle lag på denne side ved hjælp af mønster: [Sektion]/[Komponent]/[Tilstand]
Eksempel: Indstillinger/NotifikationRække/Standard
Omdøb ikke låste baggrund rammer. Spring skjulte lag over.
MCP + Kode Handoff Prompts (Claude Code / Cursor)
12
React fra Figma ramme
Læs den valgte Figma ramme via MCP. Generér en React komponent ved hjælp af [Tailwind / vores Shadcn bibliotek]:
- Match mellemrum og farver fra design tokens i filen
- Brug semantisk HTML (nav, main, section)
- Inkludér responsive breakpoints ved 768px og 1024px
- Eksportér som SettingsPage.tsx med typede props til bruger data
Hardkod ikke hex værdier — brug token navne fra Figma variabler.
Udforskning & Sammenligning Skabeloner
13
Tre layout retninger
Generér 3 forskellige layout tilgange til [skærmtype] på desktop 1440×900:
A — sidebar navigation
B — top fane navigation
C — kort-baseret hub
Samme indhold i alle tre. Brug publicerede komponenter. Placér rammer side om side med 80px mellemrum. Mærk hver ramme "Retning A/B/C" i lille caption tekst.
14
Design system audit prompt
Gennemgå den valgte side og list:
- Komponenter ikke fra det publicerede bibliotek (flag som "løsrevet")
- Farver der ikke bruger variabler
- Tekst der ikke bruger tekst styles
- Auto layout gaps der ikke er 4/8/16/24/32
Output som en tjekliste i ramme noter. Ret ikke automatisk — rapportér kun.
15
Forfin gennemgang (andet prompt)
På den genererede ramme, anvend kun disse rettelser:
1. Øg lodret mellemrum mellem sektioner til 32px
2. Skift primær knap til Button/Primary/Large variant
3. Tilføj hjælpe tekst under email felt: "Vi deler aldrig din email"
4. Justér alle ikoner til 24×24 i liste rækker
Omstrukturér ikke layoutet. Tilføj ikke nye sektioner.
Sådan Kæder Du Skabeloner
Produktions workflow: Skabelon 13 (udforsk) → vælg retning → Skabelon 1 eller 2 (fuld skærm) → Skabelon 15 (forfin) → Skabelon 11 (omdøb) → Skabelon 12 (MCP til kode). Hvert trin bruger en fokuseret prompt i stedet for én kæmpe instruktion der forvirrer agenten.
For det fulde Figma AI økosystem (Agent, Make, MCP, Skills, Sites), se vores komplette 2026 guide. For trin-for-trin agent opsætning, se hvordan man bruger Design Agent. For kredit budgettering, se Figma AI kreditter forklaret.
Ofte Stillede Spørgsmål
Virker disse på den gratis Figma plan?
Skabeloner 10–11 (Erstat Indhold, omdøb) virker på gratis planer. Design Agent og Make kræver betalte planer og beta adgang. MCP virker med enhver plan der kan aktivere Dev Mode / MCP for dit sæde.
Skal jeg indsætte hele skabelonen eller forkorte den?
Start med den fulde skabelon. Når du ser hvilke linjer agenten ignorerer, forkort. Kortere prompts virker kun efter du ved hvilke begrænsninger dit design system faktisk har brug for.
Kan jeg bruge det samme prompt til Make og Design Agent?
Nej — Make forventer byg/prototype sprog og forbruger kreditter anderledes. Brug Design Agent skabeloner til canvas lag og Make skabeloner til interaktivt output. At blande dem producerer forvirrede resultater.
Hvordan gemmer jeg prompts som Skills?
Kopiér skabeloner 8–9 ind i Skill markdown filer i dit teams Skills bibliotek. Aktivér med /skill-navn i agent panelet. Opdatér Skills når dine komponent navne ændres — se vores Skills guide.
Oplysning: Nogle links i denne artikel er affiliate links. Vi anbefaler kun værktøjer vi personligt har testet og bruger regelmæssigt. Se vores fulde oplysningspolitik.