Creating Applications with Claude 3.7 Sonnet
How to turn ideas into functional applications without advanced programming knowledge
The universe of artificial intelligence is constantly evolving, and with the launch of Claude 3.7 Sonnet, we have a powerful tool in our hands to create applications quickly and intuitively. In this article, I will share my experiences with this incredible tool.
First steps with Claude 3.7 Sonnet
To start exploring the potential of Claude, the first step is to create a free account. Just go to Claude.ai and choose whether you want to register with your Google account or with a standard email. After registering, you will see an initial screen very similar to ChatGPT.
Before we start creating any application, there is an important configuration: activating artifacts. To do this, click on "Settings" and then on "Profile", and activate the "Enable Artifacts" option. This functionality is fundamental, as it will allow you to view the applications directly through the Claude web interface.
Create your first application: Pomodoro Timer
Let's start with something simple, but extremely useful: a customisable Pomodoro timer. The beauty of this process lies in its simplicity - just explain to Claude what you want, asking for a modern and elegant design, and specifying that you want to view the application directly through Claude Artifacts.
Create an application that will function as a customisable pomodoro timer. The design should be modern and elegant. Create the code so that I can view the application directly through Claude Artifacts.
In just over a minute, Claude creates the complete application code, which you can view by clicking on the "Code" tab to the right of the screen. The generated interface allows you to start the timer, reset it, schedule short and long breaks, and even includes a settings gear to modify the Pomodoro cycle time, short and long break time, and even the number of cycles until the long break.
It is interesting to note that, as the prompt was quite simple and did not specify anything technical or development preferences, Claude went directly to React as the framework of choice. This is not surprising - React is a kind of "darling" of the moment among AI enthusiasts for creating interfaces. It's like that friend who only knows how to talk about crossfit... only with components and hooks! But don't worry, you're not stuck with that. You can perfectly ask Claude to use Angular, Vue, Svelte, or even plain JavaScript with HTML in its face. Just specify it in your initial prompt, and Claude will satisfy your request with the technology you prefer.
What makes this experience even more incredible is the possibility of sharing the application. Just click on the "Publish" button, then on "Publish and copy link", and that's it! You have a link to your application that can be shared with anyone. When opening the link, the user will receive a message indicating that this is an artifact generated for a user, and after clicking on "Don't show", they can use the application normally.
It is important to note that this is just the first version of the application, which is already quite functional. You can always continue the conversation with Claude to ask for changes, modify colours, themes and add functionalities.
Raising the level: Creating a Kanban App
For those who like organisation, a Kanban application can be an excellent tool. Claude also handles this message very competently.
Create a Kanban app, Trello style. It should be visually rich, full of icons and UI details that demonstrate that this is a meticulously planned app, with a beautiful interface. The background of the app should be black and the elements with which the user iterates should have bright colours with a neon look.
In the first version created by Claude, we have the basic Kanban interface. However, in the initial versions, functionalities such as dragging cards around the screen or adding new cards may not be present. In this case, we need to ask Claude to add these functionalities.
When working with more complex codes like this, we may face a small challenge: because we are using a free account, the length of the conversation is limited. The solution is simple: copy the generated code, create a new conversation, paste the content and ask for the desired changes.
This process can be repeated to add functionalities incrementally. For example, first ask for the drag and drop functionality, then the possibility to add new cards, and so on. Each new improvement makes the application more complete and functional.
Interactive dashboard for data visualisation
One of the most impressive applications of Claude 3.7 Sonnet is the creation of interactive dashboards for data visualisation. Imagine that you have a presentation to make, a university assignment, and you want to present the data in a creative way - Claude is perfect for that.
The process is simple: just attach a CSV or Excel file containing your data and ask Claude to create an interactive dashboard. The result is surprising - a completely interactive panel, where modifying the data changes both the numbers and the graphs in real time.
Create an interactive dashboard based on these results that can be viewed in Claude Artifacts
For this example I used this Excel file with the results of the 2024 parliamentary elections.
It should be noted that even in previous versions like Claude 3.5 Sonnet, this functionality was already quite impressive. However, with 3.7, we noticed a significant increase in the quality of the generated responses, with more interesting codes and more attractive visuals.
Interactive invitations: Creativity in communication
Another fascinating possibility is the creation of interactive invitations. For example, by asking Claude to create an invitation to a book launch event or birthday party, providing details such as the date, time and visual preferences, you can generate an interactive invitation with elements such as a countdown, location map and space for RSVP.
Create a web app that will serve as an invitation for the celebration of the 21st anniversary of Yes Marketing. The date will be December 20, 2025. Time 20:00. The web app must be interactive and visually impactful, using a structure that refers to simplicity. Insert elements with which users can click and interact. The UI should be visually rich, with elements that denote that the app was meticulously planned. The background of the app should be white and the visual elements should be in shades of blue, as the company's visual identity is in these shades. The event location will be the O Faroleiro restaurant, in Guincho, in Cascais - create a section to show the location indications with Google Maps. The app should be possible to be viewed in Claude Artifacts.
Even if the initial result is not exactly what you had in mind (usually due to a lack of clear specifications in the initial prompt), the interactive elements work perfectly, and you can always ask for later adjustments. As in the other examples, this invitation can be published and shared through a link.
3D Games: Fun and possibilities
To demonstrate Claude's versatility, we can even create a simple 3D game. With a prompt as basic as create a 3D car game that is playable through Cloud Artifacts, Claude generates a small Top Gear-style game, where you can control the car, accelerate, move around, and even "die" when you crash.
Although it seems like just a curiosity, the practical applications are diverse: companies can create marketing actions that involve minigames, teachers can develop educational games to make teaching more fun, and students can create quizzes and flashcards to facilitate learning.
Landing pages: From idea to prototype
Claude also stands out in creating websites and landing pages. With a simple prompt asking for a modern landing page and providing an animation code (which can be obtained from sites like prismic.io, Claude generates a complete landing page incorporating the requested animation.
Create a modern landing page, with all the codes and libraries contained in a single html file. Incorporate the animation below into the design. Example code: [COLLECT THE ANIMATION CODE HERE]
It is important to mention that, although it is possible to publish this landing page directly through Claude, the ideal is to use Claude as a prototyping tool. After having the code created, you can adjust it and host it on a service more appropriate for professional websites.
Claude Code: An advanced tool
In addition to the Claude web interface, there is a more advanced tool called Claude Code, launched together with Claude 3.7 Sonnet. This tool needs to be installed on your computer and allows for a more direct interaction with the code generated by Claude.
To demonstrate how it works, let's create a Link Tree project from scratch. First, we create a folder on the computer and open a terminal in that folder. After installing Claude Code, we can start it by simply writing claude in the terminal.
For better results, it is recommended to create a README file containing all the project instructions. We can do this using normal Claude through the website, explaining what we need and asking it to create the README file with the necessary instructions. These instructions may include visual aspects, design references, and even images for inspiration.
I am going to create a landing page, in the style of Link Tree, which will contain the links of my social networks. The background of the page should be white and the design, in general, should have a modern and technological look. The whole project will be created by an AI agent, so, I need you to create a readme.md file containing all the instructions that the agent will have to take into account in the creation of the project.
After downloading this README file and saving it in the project folder, we return to Claude Code and give the /init command. This makes Claude Code read the files in the folder, understand the project and create a claude.md file. Then, we can ask it to create the complete project, including the entire code base, dependencies and necessary libraries.
Claude Code will start making edits, creating files and requesting confirmations. After a few minutes, we will have a complete and functional project. For example, in the case of Link Tree, we will have an out-of-the-box HTML, inspired by the provided reference design.
Considerations on cost and alternatives
It is important to note that the use of Claude Code has an associated cost. For example, the creation of the mentioned Link Tree cost 33 cents of a dollar - a relatively low value for being a simple HTML file, but which can increase significantly for more complex projects involving more elaborate languages.
Claude Code works through the Claude API, where it is necessary to put credits to use the tool. Considering the high cost of the API to use Claude 3.7 Sonnet, other alternatives may be more economically viable.
One such alternative is Cursor or Windsurf, which offers access to Claude 3.7 Sonnet (including the "Thinking" version, which is even more capable) for 20 dollars per month. In addition to Claude, Cursor and Windsurf also give access to several other models, such as Deepseek, GPT-4, Mini GPT-4, among others.
Installing Claude Code
If you still want to test Claude Code, the installation is relatively simple. Just access the official Anthropic documentation, check the system requirements (in Windows, it is necessary to install WSL and Node.js), and follow the installation instructions.
npm install -g @anthropic-ai/claude-code
After installation, it will be necessary to create an account in the Anthropic console, load that account with credits to use the API, and then you can use Cloud Code as demonstrated.
Claude 3.7 Sonnet represents a significant advance in the democratisation of application creation. With a user-friendly interface and impressive results, it allows even people without advanced programming knowledge to bring their ideas to life. Whether for personal, educational or professional use, the possibilities are vast and exciting. As these tools continue to evolve, we are witnessing a true revolution in the way we interact with technology and create digital solutions.
And as is obvious, we at Yes Marketing already use practically all these tools: Cursor, Windsurf, Claude Code and more Bolt and Google Code to make the most diverse solutions for our customers, of course, each tool used in the right time and context.
