When the Design Team Is Just You and an AI: Building a Figma UI Kit, Design System, and Clickable Prototype with Prompts
You have a product idea, a Figma account, and no designer. The founder expects a clickable prototype by Friday, and the developer is already asking for a component library. Hiring a UI/UX designer is expensive and slow, and freelance marketplaces return 40 portfolios that all look like the same dribbble shot. This is where well-crafted UI/UX prompts change the game: an LLM will not draw pixels, but it will produce the design reasoning, token structures, component specs, and Figma-ready artifacts that normally take a designer days.
The trick is understanding what an LLM is actually good at. It cannot see your canvas, but it reasons brilliantly about layout hierarchy, spacing scales, color contrast (WCAG 2.2), Auto Layout constraints, and the JSON behind Figma Variables. According to the W3C, WCAG 2.2 became a W3C Recommendation in October 2023 — and an LLM can check your color pairs against its contrast rules in seconds. Figma's own documentation (help.figma.com) confirms that Variables and the REST API are the right integration points for programmatic design work.
Below are 10 prompts organized by difficulty — basic, advanced, expert — each with a task, the prompt itself, and an example result. Copy them, adapt them, and stop treating design as a blocker.
Basic: from blank file to structured artboard
1. The UX brief decompressor
Task: turn a vague product idea into a structured UX brief before you touch Figma.
Prompt:
You are a senior product designer. I have a raw idea: "[IDEA]".
Produce a UX brief with: 1) primary user and 2 top jobs-to-be-done;
2) 3 key screens and the single action each must drive;
3) information hierarchy per screen (H1/H2/body);
4) a list of 5 edge cases (empty, error, loading, long text, no permission);
5) success metric per screen. No fluff, bullet points only.
Example result: for a booking app, the model returns three screens (Search, Result, Confirmation), flags "no results" and "payment declined" as edge cases, and maps each screen to one CTA. You paste this into a Figma page named "Brief" and never lose context again.
2. The spacing and type scale generator
Task: get a consistent 8pt grid and modular type scale instead of random numbers.
Prompt:
Generate a design token set for a [B2B SaaS / mobile app] UI.
Use an 8pt spacing scale (4, 8, 12, 16, 24, 32, 48, 64).
Type scale: 1.25 ratio, base 16px, produce sizes and line-heights for
Display, H1-H3, Body, Caption. Output as a Markdown table and as
Figma Variables JSON with collections: spacing, radius, typography.
Example result: a table plus a JSON block you import via the Figma Variables plugin. This is the seed of your whole design system — see the next section.
Advanced: tokens, components, and accessibility
3. The design-system token architect
Task: define semantic color tokens with light/dark modes.
Prompt:
Act as a design systems engineer. Create semantic color tokens for
surface, on-surface, primary, primary-hover, danger, success, border.
Provide light and dark values in hex. For every text/background pair,
compute WCAG 2.2 contrast ratio and flag anything below 4.5:1 for
body text and 3:1 for large text. Output a table: token
| light | dark | ratio | pass/fail.
Example result: the model flags on-surface-muted #8A8A8A on white as 3.5:1 — you darken it to #6B6B6B (5.7:1). This single prompt prevents the most common accessibility bug in handoff.
4. The Auto Layout component spec
Task: describe components so precisely that a Figma beginner can build them.
Prompt:
Write a component spec for a [Button / Input / Card]. Include:
variants (size, state, hierarchy), Auto Layout direction, padding,
item spacing, min-width, constraints, and interactive states
(default/hover/focus/disabled). Give exact px values from this scale: [SCALE].
Output as a spec table plus a checklist for QA in Figma.
Example result: a table with padding: 12px 20px, gap: 8px, min-width: 120px, plus a checklist ("focus ring uses 2px offset"). Designers call this "component documentation"; you just generated it.
5. The accessibility audit prompt
Task: catch contrast, target-size, and focus-order problems before the developer does.
Prompt:
Audit this UI description against WCAG 2.2 AA: [DESCRIBE SCREENS].
Check: contrast, touch target size (min 24x24 CSS px per 2.5.8),
focus visible, text spacing, and consistent navigation.
Return findings as a table: issue
| WCAG criterion | severity | fix.
Example result: flags "icon-only close button 16px" as a 2.5.8 violation and suggests 24px. You now have an audit trail for your prototype.
Expert: prototypes, handoff, and Figma automation
6. The clickable prototype flow generator
Task: turn a screen list into a prototyping plan.
Prompt:
I have these screens: [LIST]. Design a clickable prototype flow for
Figma. For each transition specify: source frame, hotspot, trigger
(On click / On drag), navigation type (Navigate to / Back / Open overlay),
animation (Smart Animate / Dissolve) and duration. Output a table.
Example result: a transition matrix you follow literally in Prototype mode. Saves the trial-and-error of guessing which animation "feels right."
7. The design-to-dev handoff prompt
Task: generate a handoff document developers actually read.
Prompt:
Create a handoff doc for [SCREEN/COMPONENT]. Include: token names
(not raw hex), spacing values, states, responsive breakpoints
(360/768/1280), edge cases, and a CSS variables snippet matching the tokens.
Example result: a Markdown doc with a --color-primary: #2563EB; block and breakpoint table — the gap between Figma and code shrinks to a copy-paste.
8. The Figma REST API explorer
Task: pull real file data programmatically, per Figma's official REST API docs (figma.com/developers/api).
Prompt:
Using the Figma REST API, write a Python script that fetches a file's
node tree and lists all components and their names. Use the endpoint
GET /v1/files/:file_key/nodes with header X-Figma-Token.
Handle pagination and print a component inventory.
Example result: a working requests snippet that prints every component name — your design system inventory, generated on demand.
9. The design critique prompt
Task: get a second opinion on hierarchy and cognitive load.
Prompt:
Critique this screen description: [DESCRIBE]. Evaluate visual hierarchy,
Gestalt principles (proximity, similarity, closure), F-pattern reading,
and cognitive load. Give 5 concrete fixes ranked by impact.
Example result: suggests grouping related fields, reducing competing CTAs, and increasing whitespace — actionable, not vague.
10. The design system changelog prompt
Task: keep the system maintainable as you iterate.
Prompt:
Generate a changelog entry for a design system update. Format:
version
| date | changed | added | deprecated | migration note.
Include a semantic versioning suggestion (major/minor/patch).
Example result: a clean v1.2.0 entry with a note that button-secondary is deprecated in favor of button-tonal — the kind of rigor that keeps a system from rotting.
The takeaway
An LLM will not replace a designer's taste, but it will replace the tedious 70%: token math, component specs, contrast checks, flow tables, and handoff docs. Start with the brief decompressor (prompt 1) and the token generator (prompt 2), then graduate to the API and accessibility prompts. The pattern is always the same: problem → structured prompt → Figma-ready result. Your Figma file stops being a blank canvas and becomes a documented system — even if the team is just you and an AI.
If you want to go deeper into prompt engineering for design and product work, explore the courses on asibiont.com — text-based, practical, and built for people who ship.
Comments