Creating Templates Using AI: Complete Guide

This guide walks you through creating design templates using AI tools such as GitHub Copilot, Cursor AI, and Figma. Follow the detailed steps and tips below to streamline your template creation workflow.

---

1. Using GitHub Copilot for Template Generation

If you are working with GitHub Copilot, you typically don’t need additional configuration. However, if Copilot is not responding as expected, you can enhance its capabilities by linking your instruction file:

Update Copilot Settings

1. Open VS Code Settings as JSON:

   • Go to: Settings → Open Settings (JSON)

2. Add the Instruction File Setting:

    {
        ....
        "github.copilot.chat.codeGeneration.instructions": [
            {
                "file": "../.github/copilot-instructions.md"
            },
        ]
    }

• Make sure the path to your copilot-instructions.md file is correct.

---

2. Using Cursor AI for Template Generation

If you prefer Cursor AI, follow these steps:

1. Copy the contents of the ./.github/copilot-instructions.md file.
2. Create a new rule in Cursor AI and paste the copied content.
3. Use this rule when generating any template within Cursor AI.

Tip: For best results, use the Claude Sonnet 4 model with your prompts.

---

3. Generating Templates Using Prompts Only (No Figma Needed)

To generate a template using prompt-based AI (without Figma):

Use this format:

template_title: [Template Name]
design_prompt: [Clear and detailed design prompt goes here.]

Example:

template_title: Cross Promotion
design_prompt: Design a screen where we will promote Surerank in Suremails. Please add a description about the benefits of Surerank and add a plugin install and activate link as well.

Note: The more specific your prompt, the better the result!

---

4. Generating Templates with Figma Mockups

You can create templates directly from Figma designs using the Figma Context MCP extension.

Setting Up MCP

1. Visit: [ Figma Context MCP GitHub ]
2. In VS Code, create a .vscode directory in your project.
3. Inside .vscode, create a mcp.json file and paste your configuration.

4. Generate a Figma API Key:

   • Go to Figma Dashboard → Profile → Settings → Security
   • Click Generate new token
   • Assign read-only permission for required scopes
   • Click Generate, copy, and use the API key in your MCP config.

---

Generating a Template from Figma

1. Select the part of the Figma mockup you want to convert to code.

2. Use the following format for your prompt:

   template_title: [Template Title]
   design_prompt:
   Convert this Figma: [Paste Figma link here]
   

3. Press Enter to generate. For minor changes, you can edit manually or use AI to adjust as needed.

---

📹 Video Tutorial

For a step-by-step visual guide, watch this tutorial: https://d.pr/v/XnwXwZ

---

Happy Template Building! For best results, always provide clear, detailed prompts and leverage the latest AI models where possible.