aiux
PatternsPatternsNewsNewsAuditAuditResourcesResources
Overview

Setup

  • Install GitHub Copilot
  • Your First Code Suggestion
  • Workspace Setup for Designers

Core Features

  • Autocomplete & Code Completions
  • Chat for Design Questions
  • Inline Code Explanations

Prototyping Workflows

  • From Design to Interactive Prototype
  • Building Responsive & Interactive Layouts

Developer Collaboration

  • Reviewing Developer Code
  • Communicating with Your Dev Team
  1. Guides
  2. /
  3. GitHub Copilot Guide for Designers
  4. /
  5. Your First Code Suggestion
SetupLesson 2 of 10

Your First Code Suggestion

2 min readGitHub Copilot for Designers

Experience the magic of AI-powered code completions. Get your first suggestion in just a few seconds.

GitHub Copilot learns from what you're typing and suggests complete code in real-time. It works best when you give it context—add a comment describing what you want to do.

Your First AI Suggestion

1

Create a New File

In VS Code, click File > New File, or press Ctrl+N (Windows) / Cmd+N (Mac)

2

Save as HTML

Save the file as "index.html" (press Ctrl+S / Cmd+S, type the name, and hit Enter)

3

Start with a Comment

Type this comment: // basic HTML page for a design portfolio

4

Press Enter and Wait

Move to the next line. Copilot will automatically suggest HTML code. You should see gray suggestion text appear.

5

Accept the Suggestion

Press Tab to accept the suggestion, or press Escape to reject it. Try a few suggestions to see what Copilot offers!

VS Code editor showing Copilot suggestion for HTML page structure in gray text
Copilot suggesting HTML structure as you type
Pro Tip: Better Comments = Better Suggestions

Copilot works best with clear, descriptive comments. Instead of "make a button," try "create a blue call-to-action button with hover effect." The more detail you provide, the better Copilot's suggestions.

← Previous LessonInstall GitHub CopilotNext Lesson →Workspace Setup for Designers
← Back to GitHub Copilot Guide for Designers overview

On this page

  • Your First AI Suggestion

aiux

AI UX patterns from shipped products. Demos, code, and real examples.

Have an idea? Share feedback

Get daily AI UX news

Resources

  • All Patterns
  • Browse Categories
  • Contribute
  • AI Interaction Toolkit
  • AI UX Audit
  • Agent Readability Audit
  • Newsletter
  • Documentation
  • Figma Make Prompts
  • Designer Guides
  • All Resources →

Company

  • About Us
  • Privacy Policy
  • Terms of Service
  • Contact

Links

  • Portfolio
  • GitHub
  • LinkedIn
  • More Resources

Copyright © 2026 All Rights Reserved.