Project: Figma → Code → Linear
News/2026-03-11-project-figma-code-linear-vibe-coding-guide
Developer AI Vibe Coding GuideMar 11, 20267 min read
Verified·First-party

Project: Figma → Code → Linear

Featured:Cursor

Practical focus

Ship with AI-assisted coding

Guideline angle

When to use an AI coding agent

Project: Figma → Code → Linear

How to Ship a Production-Ready Feature Using Cursor Marketplace Plugins

Cursor’s new plugin marketplace (launched with Cursor 2.5) lets you extend the editor with pre-built capabilities by installing plugins that package skills, subagents, MCP servers, and third-party integrations. Instead of wiring every API yourself, you can drop in verified connectors for Figma, Linear, Stripe, Vercel, Notion, AWS, and 30+ others with one click.

This changes the builder workflow: you spend less time on boilerplate and more time on product logic. The guide below walks you through a reliable, vibe-coding process to scope, implement, validate, and ship a real feature that uses at least two marketplace plugins.

Why this matters for builders

Cursor Marketplace plugins turn the editor into a modular AI workbench. You discover, install, and compose capabilities the same way you install VS Code extensions—except these plugins give your AI agent real tools (read/write Figma files, create Linear tickets, call Stripe APIs, query Snowflake, etc.) while staying sandboxed.

The biggest unlock: you can now prototype production-grade workflows in hours instead of days because the heavy lifting of authentication, rate limiting, and error handling is already done by the plugin authors.

When to use marketplace plugins

Use them when you need to:

  • Connect Cursor to design tools (Figma, Notion)
  • Automate project management (Linear, Jira)
  • Add payment or database actions (Stripe, Snowflake, Databricks)
  • Give your AI agent safe access to cloud platforms (AWS, Vercel, Cloudflare)
  • Reuse community or vendor-maintained subagents instead of writing custom MCP servers
  • Ship internal tools quickly without maintaining yet another SDK wrapper

Skip them for highly custom business logic or when you need fine-grained control over every HTTP call.

The full process

1. Define the goal (30 minutes)

Start with a one-sentence outcome that is measurable.

Bad: “Make an AI that helps with design.” Good: “When I highlight a Figma component, Cursor should generate the matching React + Tailwind code, create a Linear task with the component name, and draft a PR description.”

Write this goal in a new file called SPEC.md.

Goal: Select any frame or component in Figma → ask Cursor to generate production-ready React + Tailwind code → automatically create a Linear ticket with title, description, and the generated code as attachment → update the ticket status to “In Progress”.

Success criteria:
- Works on any public Figma file I have edit access to
- Code follows our component library conventions
- Linear ticket is created in the correct team and project
- Whole flow takes <90 seconds

2. Shape the spec and prompt (15 minutes)

Open the Cursor Marketplace (Cmd/Ctrl + Shift + P → “Cursor Marketplace”).

Install these two plugins (search and click Install):

  • Figma (official)
  • Linear (official)

Create a file prompts/feature-flow.md with a strong system prompt:

You are an expert frontend engineer on our team.

Available tools:
- Figma plugin: can read selected nodes, export images, get CSS/figma properties
- Linear plugin: can create issues, add comments, attach files

Rules:
- Always use Tailwind classes that match our design system
- Prefer shadcn/ui components when possible
- Generate both the component file and a story file
- Create Linear ticket in team "ENG" with label "frontend"
- Attach the generated code as a .tsx file to the ticket

Output format: first the code blocks, then the exact Linear command you will execute.

3. Scaffold the project (10 minutes)

Use Cursor’s Composer with this starter prompt:

“Create a new Next.js 15 app with TypeScript, Tailwind, and shadcn/ui. Add a /components folder and a basic Button component using our design tokens. Include a simple page that says ‘Drop Figma component here’.”

After scaffolding, install any missing local dependencies. The marketplace plugins handle the external service connections.

4. Implement the feature (45–90 minutes)

Work in Composer mode with the two plugins enabled.

Step-by-step implementation:

  1. Open a Figma file and select a component.
  2. In Cursor, highlight the selection in the Figma plugin sidebar and type:

“Using the selected Figma node, generate a responsive React component with Tailwind. Follow the prompt in prompts/feature-flow.md.”

  1. Review the generated code. Cursor should automatically offer to run the Linear plugin action.

  2. Accept the suggested Linear command. The plugin will create the ticket and attach the code.

  3. Add a small validation step: ask Cursor to write a test that checks the component renders without crashing.

Pro tip: Keep the system prompt in prompts/feature-flow.md open in a sidebar tab. Reference it in every new chat so the model stays consistent.

5. Validate safely

Before shipping, run the following checklist:

  • Test with 3 different Figma components (simple button, complex card, icon)
  • Verify the Linear ticket was created in the right project with correct labels
  • Check that generated code passes eslint and prettier
  • Confirm no secret keys are exposed (plugins use OAuth/sandbox)
  • Ask Cursor: “Review this component for accessibility and performance issues”

Use Cursor’s new sandbox access controls (part of 2.5) to limit what the plugins can do in your workspace.

6. Ship it

Once validated:

  1. Commit the new component and updated prompt library.
  2. Push to your feature branch.
  3. Create a PR and use the Linear plugin again to link the PR to the ticket.
  4. Document the workflow in your team’s CONTRIBUTING.md so others can reuse the same prompt + plugin combination.

Copy-paste starter templates

System prompt template (save as prompts/default-agent.md):

You have access to the following Cursor Marketplace plugins: {list installed plugins}.

Project conventions:
- {paste your style guide bullets}

When I give you a task, always:
1. Use the relevant plugin to fetch latest data
2. Generate code that follows conventions
3. Create or update the corresponding Linear ticket
4. Output a short summary of actions taken

Pitfalls and guardrails

### What if the plugin fails to authenticate?

Most marketplace plugins use OAuth. If you see an auth error, go to Cursor Settings → Plugins and re-authorize the specific plugin. Never paste API keys manually.

### What if the generated code doesn’t match our design system?

The model drifts when the prompt is too vague. Solution: maintain a design-system.md file with exact token names and component examples, then always include “Reference design-system.md” in your prompts.

### What if I accidentally give the AI too much permission?

Cursor 2.5 added sandbox access controls. Before installing any plugin, review the requested permissions in the marketplace detail view. Only grant read access when possible.

### What if the Linear ticket is created in the wrong team?

Add explicit instructions in your prompt: “Always create tickets in team key ENG and project key PLATFORM”. You can also pin this as a workspace-level rule in Cursor settings.

What to do next

After your first successful plugin-powered feature:

  • Extract the best prompts into a shared cursor-prompts/ folder in your repo
  • Create a team “Plugin Kit” plugin (if you have MCP knowledge) that bundles your internal conventions
  • Try composing three plugins together (Figma + Linear + Stripe) for a full customer flow
  • Measure time saved: compare a task done with plugins vs. without

The real power comes from building a personal library of prompts that work with the marketplace plugins you use most. Treat prompts like code—version them, test them, and share them.

Sources

Start small, keep your prompts explicit, and use the sandbox controls. You’ll be shipping AI-augmented features faster than ever.

Original Source

x.com

Comments

No comments yet. Be the first to share your thoughts!