Jonlitwack

A Designers Guide to the Perfect Development Setup

Jun 9, 2014
4 minute read

Hey designers! 👋 If you’re used to tools like Figma and Sketch, setting up a development environment might feel like landing on a new planet. Don’t worry! This guide will walk you through setting up your Mac with everything you need to start coding with Cline, using friendly tools that will feel familiar to your design workflow.

Why Do We Need All This Stuff?

Before we dive in, imagine you’re setting up a new design workstation. You’d need:

  • Your design tools (like Figma)
  • Your font management
  • Your color profiles
  • Your asset libraries

Coding needs a similar workspace setup. Each tool we’re installing has a specific purpose, just like your design tools do. Let’s break it down!

Part 1: Making Your Command Line Beautiful 🎨

Installing iTerm2

What is it? Think of iTerm as “Figma for the command line” - it’s like the default Terminal app that comes with your Mac, but with better design and customization options.

Why you’ll love it:

  • Customizable colors and themes
  • Split screen capabilities (like artboards!)
  • Better typography and spacing
  • Can save your preferences and layouts

How to install:

  1. Download iTerm2 from iterm2.com
  2. Drag it to your Applications folder
  3. Open it (it will look plain at first - we’ll make it pretty soon!)

Making iTerm Beautiful (Optional but Fun!)

  1. Open iTerm Preferences (⌘ + ,)
  2. Go to “Profiles” → “Colors”
  3. Try some themes like:
    • Solarized Dark (easy on the eyes)
    • One Dark (like VS Code’s popular theme)
    • Dracula (if you like purple!)

Part 2: Installing Our Package Manager 📦

What’s Homebrew?

Think of Homebrew like the App Store for developers. It’s how we’ll install most of our tools safely.

Why we need it:

  • Keeps everything organized (like your layer groups in Figma)
  • Makes installing/uninstalling things clean (no leftover files)
  • Updates everything with one command

Installation:

  1. Open iTerm
  2. Copy and paste this command:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  1. Press Enter and wait for it to finish
  2. IMPORTANT: After it’s done, you’ll see some yellow text with commands to copy
  3. Copy and paste those commands into iTerm too (they make Homebrew work)
  4. Type brew help - if you see a list of commands, you’re good to go!

Part 3: Setting Up Your Code Editor 👩‍💻

Installing VS Code

Visual Studio Code is like Figma for code - it’s where you’ll spend most of your time.

Why you’ll love it:

  • Clean, minimal interface
  • Great color themes
  • Shows you mistakes before they break things
  • Lots of helpful extensions

Installation:

  1. In iTerm, type:
brew install --cask visual-studio-code
  1. Open VS Code from your Applications folder
  2. Install the Cline extension:
    • Click the Extensions icon on the left sidebar (it looks like four squares)
    • Search for “Cline”
    • Click Install

Making VS Code Designer-Friendly

Let’s set up some things that will make VS Code feel more familiar:

  1. Install these extensions:
    • “Material Icon Theme” (makes file icons pretty)
    • “One Dark Pro” (popular color theme)
    • “Prettier” (automatically formats your code)

Part 4: Installing Development Tools 🛠️

Python

What is it? A programming language that Cline needs to work.

Installation:

  1. In iTerm, type:
brew install python
  1. Verify it worked by typing:
python3 --version

You should see a number like “3.11.0”

Node.js

What is it? Another programming language tool that helps with web development.

Installation:

  1. In iTerm, type:
brew install node
  1. Verify it worked by typing:
node --version

Part 5: Setting Up Cline 🎉

Now that we have all our tools installed, let’s get Cline ready:

  1. Open VS Code
  2. Use the Command Palette (⌘ + Shift + P)
  3. Type “Cline: Initialize”
  4. Follow any prompts that appear

Common Questions & Solutions

“It says ‘command not found’”

  • Solution: Try closing and reopening iTerm
  • This refreshes your settings (like when you have to restart Figma)

“I get a permissions error”

  • Solution: Add “sudo” before the command that failed
  • Example: sudo npm install
  • It will ask for your Mac password (like when you install apps)

“VS Code isn’t recognizing Cline”

  1. Close VS Code completely
  2. Reopen it
  3. Try the command again

Maintenance Tips

Just like keeping your design files organized:

  • Once a week, run brew update to update your tools
  • Keep VS Code updated through the App Store
  • Use folders to organize your code projects

Next Steps

Now that you’re set up:

  1. Try creating your first project with Cline
  2. Explore VS Code’s color themes
  3. Practice some basic terminal commands
  4. Join the Cline community for designers

Need Help?

  • Use the VS Code command palette (⌘ + Shift + P) to explore Cline commands
  • Check out the Cline documentation
  • Ask in the design community!

Remember: Everyone starts somewhere! If you run into trouble, take a screenshot of any error messages - they’re like developer design specs and help others help you!

Happy coding! 🎨✨