Building an AI-Powered E-Commerce Platform: A Developer’s Guide to Claude’s Rules, Skills, MCP, and Subagents
The e-commerce landscape is evolving rapidly, and so are the tools developers use to build within it. AI is no longer a future concept reserved for tech giants; it’s becoming more practical day by day for developers. But here’s the thing: AI doesn’t replace developers; it amplifies them. Much like compilers have once transformed how code was written without making programmers obsolete, AI now accelerates how we think, design, and build.
In this blog, we will walk through how to develop an Amazon-like e-commerce platform by leveraging Claude’s four core pillars: Rules, Skills, MCP Servers, and Subagents.
What this blog will cover:
- The four key pillars that power intelligent system behaviour.
- A brief of rules, skills, MCP & subagents.
- How can these techniques be integrated into a real-world architecture?
- Key system E-commerce modules powered by AI.
Contrary to the common belief “AI is revolutionary but scary as it’s going to replace humans”, we believe that it’s actually the opposite – AI is just another tool. Let’s take the example of compilers (tools that increase developer productivity without actually replacing developers). In the same way, AI helps you increase the “thought output” of your mind, rather than replacing human thinking or judgment.
Understanding the Importance of Skills in Claude
Skills teach Claude how to complete a specific task in a repeatable way, for example, creating documents with the branding guidelines of your organization or analyzing data by leveraging the workflows, or automating personal tasks.
A skill is a folder that contains:
– SKILL.md: Instructions in Markdown with YAML frontmatter
– Scripts: Executable code (Python, Bash, etc.)
– References: Documentation loaded as needed
– Assets: Templates, fonts, icons used in output.
Claude loads these folders dynamically to improve performance on key tasks. Think of skills as a rulebook. When you provide it with a prompt, the skill will run in the background, ensuring Claude’s responses stay aligned with the standards and preferences of your project.
However, a skill is only useful if it’s accurate; any skill that is not relevant to your current work should be disabled. This helps Claude to handle skill loading progressively, disabling unused skills, keeping token usage lean, and keeping the overall setup clean.
From Requirements to Implementation With Vibe Coding
The process of building any software involves a lot of steps, including drafting requirements, designing architecture, breaking work into tasks, and keeping everything aligned as the project grows. The process remains the same; what has changed is that the process developers are handling the same for faster and better results. With Vibe Coding, the team is changing how developers approach development. They are leveraging AI tools to generate requirement files, map architectural designs, and divide work into tasks. This is transforming the traditional way of writing everything from scratch.
Step 1: Build the Requirement File
Describe the business model to Claude, and he will assess you by bringing all the requirements together. However, the first draft is never perfect, and it requires some changes here and there. For example, removal of unit tests, JWT tokens, and session-based auth is not necessary for a POC.
Step 2: Architectural Design
When the requirement file is in place, it helps Claude to produce an architectural design that maps out how the services and APIs will connect and interact with each other. By using tools like Mermaid, you can generate a visual representation for the same.
Step 3: Task Breakdown
Claude takes the design and splits it into actionable tasks. It’s necessary to go through each of them because Claude can also add tasks that are not relevant.
Follow Claude’s rules for better context management
To save yourself from spending more or wasting tokens its essential to keep Claude focused. There are two rules you need to set to ensure the following:
- Enforce concise responses, ask about the broken API, and Claude will look at just that API, not the entire codebase.
- Set generic rules to restrict certain actions, including running Git push commands without checking with the user first, which helps protect branches from getting corrupted.
- Designing an E-Commerce Platform
You can build an Amazon-like e-commerce platform without depending on paid tools using ChatGPT. Let’s see how! If you dont have access to the paid version of Claude Code, then dont worry, there is a practical workaround:
Feed your requirements into ChatGPT, command it to generate a solid initial prompt, take that prompt and use it as a base to build out individual pages, such as login, homepage, and authentication, all made possible by Vibe Coding.
Spotting and Refining Vibe-Coded Designs
If you are going to leverage Vibe Coding, then a few points need to be kept in mind, because the output usually follows a predictable pattern. Vibe Coding can’t pull live images; it uses emojis instead. If you come across any website that’s using emojis instead of images, their are possible changes that it comes from Vibe Coding.
Another way of spotting is through the colour palette; AI depends heavily on gradient colours, most commonly in shades of blue and purple. So if you dont want it to look like every other AI- generated UI, it’s best to spell out the exact colour codes in the prompt rather than depending on the AI model for the same.
From ChatGPT Prompt to Design in Stages
When you have a well-refined prompt ready, it can be easily moved into stages – a Google platform built for generating UI design patterns. You just need to enter a prompt and leave the rest to the stages.
Exporting to Figma
Once the screens are generated, export everything into a Figma file. To make this transformation smoother and hassle-free, use a Figma plugin called Stitch to Figma. This Figma file can be connected to Claude Code through an MCP server.
Using Figma with MCP Servers
Here comes the developer side of things, bringing the Figma file into a development workflow by leveraging MCP servers.
How to Connect MCP Servers to Claude Code (Step-by- Step Process)
Claude Code is built to perform more than just assisting with coding; it can analyse the entire codebases, plan multi-step changes, and execute tasks across files. MCP servers enable you to plug any third-party tool directly into your local system.
What you need before getting started:
- Claude Code is installed and working
- An MCP server
- Credentials and access
- A clear use case
- A safe environment for testing
Setting Up MCP Servers
Depending on your operating system, whether macOS or Windows, the integration is easy. On Ubuntu, it requires more than manual work; you need to update the Claude.md file and write the configuration as a JSON array, including tokens for each tool you wish to connect.
Generating a Figma Token
To connect to Figma, the first step is to generate an access token. Go to Figma settings, open the security section, and create a new token. Edit its name, set an expiry date, and ensure you grant it full access. This token allows Claude Code to read every element from your Figma file – such as buttons, spacing, colours, and any other design property.
Configuring the Tokens in Ubuntu
Add configurations for both the Jira and Figma configurations to your MCP server setup. For Jira, you need the Jira URL, your token, and your email address. For Figma, add the Figma token key.
Figma to Code
With the Figma MCP server connected, any developer can enable a Figma file to convert it directly into code. Save time by automating the inspection process, paste a prompt into Claude Code, and it reads the Figma file through the MCP server, pulling in every detail from the login page, buttons, colour codes, attributes, and more.
Jira MCP Server- Planning Code Changes
By simply copying a Jira ticket and pasting it into Claude Code with a prompt asking it to plan which files need to be updated, Claude connects to your Jira instance, reads the ticket, and lays out exactly which files need to be changed and what needs to be done. Once the plan aligns with your needs, you can ask Claude to go ahead and implement it. The changes will be directly applied to your existing codebase.
How to control Claude Code Through Telegram
You can build a Telegram bot that can be connected directly to Claude Code, allowing you to interact with your codebase remotely, even when you are away from your system.
Set up the Bot
Create a new bot, give it a name, and start setting up on Telegram. Add a few numbers at the end to avoid conflicts with existing bot names. Telegram will generate an endpoint token that gets copied and configured into Claude Code to link them together.
Suggestion: Don’t give full auto-access to the bot for an entire session. By restricting the entire access, you will prevent Claude from generating changes that are not needed. It’s important to get approvals for keeping your codebase safe.
What the Bot Actually Does?
When you connect your bot, the Telegram bot gives you a simple way to converse with your project from wherever you want. For example, if you are in a meeting, and you want to check something. All you need to do is open the Telegram channel and ask Claude directly, “What is the status of my current task?” or “Make the following changes in the code”, and Claude will do it. However, you need to have your system on, VS Code needs to be open, and the project should be loaded in the active session.
How to Keep the Context Lean with Intelligent Rule Injection
Contrary to the common belief of keeping everything upfront, all the rules, all the context, at the beginning of the session, here is a different approach. Build general rules to be situationally aware. Claude is instructed to recognise what kind of change is being made and only ask for the rules that actually apply.
Client-side change? It prompts for client rules. Server-side? It asks for those instead. The main reason is tokens; every rule you load into a session takes up context. When you load everything every time, and you’re using tokens on things that might not be needed. So, inject only three rules that are required for the specific task, which allows Claude to focus on things that are needed.
Build A Fully Working POC in Minutes
The POC covers the entire journey of users, including account registration, login, product browsing, adding items to cart, and checkout. Nothing overcomplicated, but everything worked exactly as expected. So with the right setup, the workflow handles itself.
Wrap It Up
Building a fully functional e-commerce POC: complete with user registration, login, product browsing, cart management, and checkout- is no longer a weeks-long endeavour. With the right AI-assisted workflow, it becomes a matter of hours.
The key takeaway isn’t just the speed; it’s the structure. When you pair Claude’s Skills for repeatable task execution, Rules for focused context management, MCP Servers for seamless tool integration, and a controlled automation setup like a Telegram bot, you end up with a development workflow that’s both powerful and disciplined.
