[Day 9 of 30] Turn a Figma Screen Into a User Stories or PRD

Connect Figma so the AI sees your design, or export one screen as an image. One prompt, one screen spec.

The situation

You have calendar, email, capture, and your AI can see and update the backlog. The next link in the chain is design. In practice we do design first: screens and flows live in Figma, we align with stakeholders on prototypes, and only then we slice user stories and test cases for Jira or Linear. That handoff is still manual. You look at the screen, write the story, and derive the test cases yourself. Today we close that gap. Connect Figma to your AI so it can read the design directly, point it to the screen you want, and get one artefact: the user story, acceptance criteria, and test cases. One input, one output. No re-typing from the design.

This post continues the 1% Better series. If you have not read the previous posts, you can find them here.

The 1% upgrade

Connect Figma to your AI.

• Cursor: Settings -> Cursor Settings -> Plugins. Find and install a plugin that adds the Figma MCP, then enable it and authorize access when prompted.

• Claude Code: Settings -> Connectors -> Browse Connectors, find Figma in the list, add it and authorize access when prompted.

• Once Figma is connected in either client, open the file with the screen you need. You can paste the file or frame link, or simply tell the AI which frame to use by its name or frame id in Figma — Cursor or Claude Code will fetch that design and read its contents.

• Ask for a screen spec: one user story, acceptance criteria, and test cases (e.g. happy path, edge cases, error cases; as many as the screen needs). The AI reads the design and returns the artefact. Use your Jira or Linear connection from Day 8: ask the AI to create the story in your backlog (and sub-tasks or test cases if you use them), or paste the spec into a Confluence page and adjust.

If you cannot connect Figma, export the screen as an image:

• In Figma: select the frame, then in the right panel open the Export section and export as PNG. Save the file.

• In your AI chat: attach the image and send the prompt below. Same output; the AI describes the screen from the image.

Copy-paste prompt

Figma connected: Share the link to the file and the frame you want. Tell the AI which screen(s) to use, then send the prompt below (the AI will use the design it reads from Figma).

Exported image: Attach the image in chat, then send the prompt below.

From this screen design, create a screen spec with:

1. User story: “As a [role], I want [goal] so that [benefit].”

2. Acceptance criteria: bullet points, each one testable.

3. Test cases: include at least happy path, edge case(s), and error case(s); add more scenarios if the screen suggests them.

- Happy path: main success scenario (1–2 sentences).

- Edge: boundary, empty, or unusual but valid input.

- Error: invalid input or failure path.

Format each test case as a block with a title, then two subheadings and bullet lists:

- Name: [short descriptive name]

- Steps: (subheading; under it, a bullet list of steps, one per line)

- Expected result: (subheading; under it, a bullet list of expected outcomes)

Output only the screen spec, no intro.

10-minute action

Connect Figma to your AI (or export one screen as PNG). Point the AI at the screen or attach the image. Run the prompt above. Copy the screen spec into your backlog. Tweak the role or criteria if your product needs it. Done.

Capturing habit (this week). We are practicing the Capturing Skill. Save the screen spec in your vault or attach it to the ticket so you can reuse and extend it. Do not leave useful output only in the chat.

What to do next

• Run the screen-spec prompt on one more Figma frame (or export one more screen as PNG) so the habit sticks.

• Use your Jira or Linear connection from Day 8: ask the AI to create the story from your spec in the backlog and attach or paste the acceptance criteria and test cases.

• Save one screen spec in Confluence or your notes so you have a reusable template for the next screens you turn into backlog items.

---

Paid artifact: Skills pack for design-to-backlog.

• Writing user stories from Figma screens.

• Writing test cases (Steps + Expected result) from designs.

• Building a PRD from Figma flows and frames.

Reusable skills so you go from design to spec to backlog without re-typing.