Building a Simple Calculator with Claude Cowork

Introduction

One of the best ways to learn Claude Cowork is by building a small project. In this guide, we will create a simple calculator while learning how to use Projects, Skills, Artifacts, and Claude's coding capabilities.

If you are new to Claude Cowork do not worry. You can still follow these steps. Make a working calculator application with Claude Cowork. Just follow along with the steps, for Claude Cowork. You will have a calculator application that works.

Step 1: Create New Project

First, create a new Project inside Claude Cowork.

Project Name:

Simple Calculator

Projects help organize all conversations, files, instructions, and generated work related to a specific task.

You can describe your goal inside the project:

I want to build a simple calculator that can perform addition, subtraction, multiplication, and division.

Now Claude understands the overall objective of the project.

Step 2: Create a Skill

Skills tell Claude how it should perform the work.

Create a Skill called:

Frontend Web Developer

Skill Instructions:

Generate clean HTML, CSS, and JavaScript. Create beginner-friendly code and Keep the design simple and responsive and Add comments where necessary.

This skill ensures Claude follows consistent coding guidelines throughout the project.

Step 3: Ask Claude to Generate the Calculator

Now open the project chat and provide the following prompt:

create a simple calculator using HTML, CSS, and JavaScript.

Requirements:
- Addition
- Subtraction
- Multiplication
- Division
- Responsive design
- Clean UI

Generate the complete code.

Claude will generate the calculator code.

Step 4: Review the Artifact

Since this is a complete application, Claude may create it as an Artifact.  The Artifact panel allows you to:

• View the generated code
• Edit the code
• Ask Claude for improvements
• Iterate without losing context

At this stage, you already have a working calculator.

Step 5: Improve the Design

Now continue improving the project.

Prompt:

Make the calculator look modern.

Requirements:
- Rounded buttons
- Better spacing
- Professional layout
- Mobile-friendly design

Claude will update the Artifact while preserving the existing functionality.  This demonstrates the iterative workflow of Artifacts.

Step 6: Add More Features

Let's make the calculator more useful.

Prompt:

Add the following features:

- Clear button
- Delete button
- Decimal support
- Keyboard input support

Claude updates the project and adds the requested functionality.

Step 7: Save the Final Version

Once satisfied:

• Save the Artifact
• Keep it inside the project
• Reuse it later as a reference

The project now contains:

Project
 ├── Requirements
 ├── Conversations
 ├── Skill
 └── Calculator Artifact

Everything remains organized in one place.

Step 8: Open in VS Code

If you want to continue development locally:

Ask Claude:

Separate the calculator into:

- index.html
- style.css
- script.js

Claude will generate the files individually.  Copy them into VS Code and run the application in your browser.

Step 9: Continue Improving

Now you can keep building.

Examples:

Add dark mode.

Add scientific calculator functions.

Add calculator history.

Convert it into a React application.

Because Claude already knows the project context, future improvements become much easier.

What We Used

During this small project, we used several Claude Cowork features:

• Projects
• Skills
• Artifacts
• Claude Coding Support
• Iterative Workflow