The idea and the challenge (00:00)
Abdul Osama (عبدول أسامة) approaches the handmade-store project as a presentation and ordering problem, not simply a website-design exercise. The artist already makes detailed custom figures. He wants visitors to see their quality, understand that a person makes them, and have a clear way to request an existing piece or imagine a new one. He frames the build as a rapid project, not as a promise that every store can be completed on the same schedule.
The idea began when the artist made him a customized figure and asked for marketing help. Her personal presentation conveyed care, but he felt the products could stand out more clearly as things customers could order. His proposed solution combines more consistent product images, a compact storefront, and a guided custom-request experience.
He mentions Claude, an AI assistant for conversation and planning; Cloudflare, a platform for hosting and operating web services; and GitHub, a service for storing code and tracking changes. GitHub is part of his backup setup, although he does not demonstrate that setup in detail.
Understanding the business and writing the first prompt (01:43)
He starts with screenshots from the artist’s Instagram account and her logo. His first prompt to Claude describes an artist living in Turkey, customers there, handmade figures, and a proposed storefront in Arabic, English, and Turkish. He explains what he sees as the marketing gap: the account feels personal rather than unmistakably like a store, while the figures deserve presentation that shows their details.
He sketches two customer routes. Someone can choose a figure she has already made and request something similar. Alternatively, they can describe an idea, optionally upload an image, see a visual concept, and then speak with the creator through WhatsApp, a messaging app, or Instagram, a social-content platform. He wants a focused build rather than a broad e-commerce system.
Claude raises issues that could block publication. Some figures appear to draw on characters owned by others, so their inclusion in a catalog needs scrutiny. Some existing posts show children’s faces, which it suggests leaving off the site. Image generation also needs an API key kept on the server rather than exposed to visitors. These are issues identified in the planning discussion; the video does not establish that every rights or image review was completed.
Building the visual identity (06:08)
Before building pages, he asks for a design system: a repeatable set of colors, type choices, icons, and interface styles. Claude works from the profile image and logo he supplied. Abdul likes the initial direction but does not treat its first output as final. He asks for a more handwritten-looking primary font to suit handmade goods and for an icon set that fits the brand. He then checks an Arabic example.
The font choice has a purpose beyond decoration. He wants the typography, colors, and eventual photography to tell the same story: these are pieces made carefully by an artist. His feedback is specific, so the tool can revise a shared visual system rather than redesign each screen independently. That system becomes a reference for later image and site work.
Moving to Claude Code (07:44)
Claude Code is a coding tool that can read project files and edit a codebase. Abdul began in a Claude chat, then needed to turn that discussion into a local project. He creates a project folder and asks for files recording the existing decisions, including project instructions, the design system, and image material. His attempted automatic handoff does not open the working environment as expected. He therefore creates a local Claude Code environment himself and selects the folder.
- Put the business description, visual decisions, and available assets in one project folder.
- Open that folder in Claude Code rather than assuming a planning conversation has already created a working site.
- Have the tool read the project and ask only the questions that might prevent progress.
He points out that starting directly in Claude Code would also have worked. The detour through chat reflects how this particular idea developed; it is not a required step in every build.
Product images and build preparation (11:05)
Once the project is open, he asks Claude Code to identify missing decisions while he gathers examples of the artist’s existing products. His image goal is a consistent studio-like presentation, based on the brand colors, with enough close detail for a product page. He discusses Magnific, an AI image tool associated with enhancing and creating imagery, and Higgsfield, an AI visual-creation tool. He also discusses image-generation APIs, although the recording does not make clear which service produced each image shown.
He asks for several views of each product and considers an additional image showing gift-style packaging. Prices and appropriate contact details are still outstanding at this point, so he does not pretend every listing is ready. Instead, he selects a few representative products to test the photography style before applying it across more of the catalog.
People buy with their eyes. — Abdul Osama
In context, he means that presentation affects how visitors perceive value. His aim is to show the artist’s existing work more clearly, not to claim that a generated image replaces the actual handmade piece.
Defining the audience and customer experience (14:47)
He tells Claude Code not to write as though the only buyers are children. An adult might commission a memorable gift for a child; another adult might want a figure reflecting a personal interest. His own customized figure serves as his example of the latter. That distinction affects the copy, product presentation, and order flow: a customer may be looking for a meaningful one-off piece, not an off-the-shelf toy.
Abdul emphasizes the artist’s time and care, including the packaging he received. He wants visitors to sense that work when they reach the store. This leads him toward a landing page and small store that explain the experience, rather than an unnecessarily large site. The next design question is practical: after someone thinks, “I would like a piece like this,” how do they make a request the artist can actually follow up?
Generating ideas and receiving requests (18:55)
His proposed custom flow lets visitors type what they imagine or upload a reference image, then see a concept rendered in a style close to the artist’s products and the same studio presentation. A generated image should feel like part of the store, not like an unrelated AI result. He also wants a record of requests and generated concepts in a simple dashboard for the artist.
He distinguishes the routes through the experience:
| Visitor route | Visitor action | What the artist receives | | --- | --- | --- | | Direct contact | Starts a WhatsApp conversation | A conversation to follow up | | Existing product | Selects a listed piece and supplies contact details | A request tied to that product | | Custom idea | Describes or uploads a reference and asks for a concept | Contact details, the idea, and its generated concept |
For the custom route, he wants the visitor to enter the idea first, then provide a name and WhatsApp number just before the image-generation request. He thinks someone who has already invested effort in describing a piece may be more willing to leave their details. The artist can then review requests in an admin dashboard and follow up herself. He presents this as a conversion-flow hypothesis, not a measured increase in orders or sales.
The product-image results (22:50)
He shows early product images with a consistent background and colors, and likes how they make the pieces look more like a coherent catalog. He stresses that the figures are the artist’s actual work; the proposed improvement is how that work is shown. He also sees the images as material for both product pages and Instagram posts.
I just know what we want. — Abdul Osama
He says this while explaining that he did not write elaborate image prompts. Instead, he stated the desired presentation and judged the output against the brand direction. At this stage, the video shows a test of the image style, not a completed catalog covering all of the artist’s work.
Building the store and its languages (24:43)
He turns to the infrastructure behind the experience: admin sign-in with Google, whose accounts can be used for authentication; an image-service key associated with OpenAI, a provider of AI models and APIs; and a simple database in his Cloudflare-based setup for storing requests. He says he reused existing infrastructure and does not show its configuration because it contains personal information. The video therefore explains his build decisions rather than providing a fully reproducible infrastructure tutorial.
He wants the artist’s admin area in Arabic because that is her preferred language. For customers, he plans Arabic, Turkish, and English storefronts. His sequence is to design and approve the Arabic interface first, then proceed with the other language versions. That matters because translating a layout before its structure and copy are settled could mean repeating the work.
Reviewing the Arabic design (26:08)
As the Arabic page takes shape, he inspects the handwritten-style typography, colors, product imagery, and the opening screen visitors see first. He likes the direction but is not fully satisfied with that first section. He asks to keep the invitation to describe an idea or upload an image while giving one figure a prominent role as the featured product.
His review addresses what a visitor understands immediately: What can I make here, and what does a finished piece look like? This is more actionable feedback than saying the page simply looks good or bad. He treats approval as iterative. A promising visual direction still needs tighter copy, clearer examples, and a well-defined path toward making a request.
Managing products and improving the experience (27:30)
He expands the admin requirements so the artist can add products and change their names or prices without asking him for each update. In his proposed workflow, she uploads photos of a finished piece; the system prepares on-brand presentation images that can support a listing and Instagram content. He also describes a separate workflow for ideas not yet made: present a concept, and make the piece if a customer orders it. That distinction matters because a concept image should not be confused with a photograph of an already finished product.
He mentions GSAP, a library for animating web-page elements, as an option for restrained motion. Animation is secondary to making the products and order process clear. He returns repeatedly to consistency: a recognizable image style across the site and social posts helps the work feel like it belongs to one brand, even as the products themselves vary.
Testing requests and product pages (30:46)
He tests the experience by entering an example figure idea and checking the next step. The page asks for a name and WhatsApp number, with consent text about keeping the person’s details, idea, and image to contact them about the piece. He opens a product page, reviews its appearance, and also checks the admin area and Google sign-in.
One section of the page has become weaker after an AI-generated revision. He does not accept the regression merely because it is newer. He asks for a clearer visual explanation of the process, a better footer, and the Instagram account in that footer. The test illustrates an important part of AI-assisted building: inspect what customers actually see and do, including on mobile and desktop, and be ready to restore or improve a section that changed for the worse.
Launch and final result (32:34)
At the end, he shows a small storefront, a product page, and an admin area. He says he has tested the request path and continues refining text and other details. He prefers the new presentation to the original social-page-only experience, while acknowledging that not every product has been added and the project can keep improving. He suggests using the new product imagery in Instagram content and directing interested visitors to the store.
In numbers
- He plans customer-facing versions in three languages: Arabic, English, and Turkish.
- He asks for roughly 3–4 images per product in the presentation workflow.
- He describes some handmade pieces as taking the artist around two to three weeks to make.
- He sets an ambitious rapid-build challenge and later describes approximately an hour of work including testing; the video does not give one consistent duration for every stage.
What can you apply to your own project?
Define what makes the product worth requesting and what its current presentation is missing. Prepare brand references and real product examples, then ask the coding tool to surface blockers before building. Give customers a clear route from browsing or imagining a piece to making a request, and give the owner a manageable way to update listings and follow up. Before publication, check character and image rights, product prices, consent for customer data, and the full request flow. These are lessons from the example, not a guaranteed build time or marketing result.
Claude
Cloudflare
GitHub
OpenAI
WhatsApp
