# Sylva Studio

> Design and build studio in Lagos, Nigeria, working with brands in Nigeria and worldwide. We make websites, web apps, e-commerce stores and custom AI workflows and tools.

Sylva Studio is led by its founder, Sylva. Every AI build starts with a fixed-price Workflow Audit of one process. Projects start with a free 30 minute call with Sylva, followed by a written proposal with scope, timeline and price. Contact: hello@sylvastudio.com. Book a call: https://cal.com/sylva-studio/30min?utm_source=sylvastudio.com&utm_medium=website&utm_campaign=book-call&utm_content=llms-full. A shorter link map is at https://sylvastudio.com/llms.txt.

## Services

### Product Design

Interfaces that help users understand, move, and take action, turning ideas into usable, scalable products.

https://sylvastudio.com/services/product-design

### AI Workflows & Tools

Custom AI tools tuned to your brand, so your team ships videos and graphics at 10x the volume, at a fraction of the cost.

https://sylvastudio.com/services/ai-workflows

### E-commerce Solutions

Scalable online stores that are easy to manage, easy to buy from, and built to convert.

https://sylvastudio.com/services/ecommerce-solutions

### Web & App Development

Fast, reliable web and application builds: clean code, modern stacks, engineered to scale.

https://sylvastudio.com/services/web-app-development

## Add-ons

### AI-Ready Website

Make your website easy for ChatGPT, Claude, Perplexity and AI agents to read and describe correctly. A fixed-price add-on for sites you already have.

**Price:** ₦400k ($300) per part: AI-ready retrofit, AI assistant, or agent-ready forms. All three ₦1M ($750). The assistant runs on the client's own AI account, usually a few dollars a month.

https://sylvastudio.com/ai-ready

## AI Workflows & Tools: systems we've built

Simulations of each system are at https://sylvastudio.com/services/ai-workflows. Try describing a job of your own at https://sylvastudio.com/try for a free pipeline sketch.

### Script to YouTube Short (OptionsLab)

**Problem:** Every short meant writing hooks, finding visuals, recording a voice, editing and captioning by hand.

**What it does:** The team drops in a script. The pipeline rewrites it into hooks in OptionsLab's own tone, makes the images and clips, voices it, captions it, and an intelligence layer cuts it all into a finished short.

**Result:** Script to finished short in under 30 minutes

**Built with:** Nano Banana, Veo, ElevenLabs, Whisper

https://sylvastudio.com/works/optionslab

### Match report from one document (The Creative Championship)

**Problem:** After every matchday someone had to type up stats, reports, subs and cards, and keep every player and club record in sync.

**What it does:** Staff upload the match's Wyscout report or just enter the scoreline. The tool works out the rest: stats, the written report, substitutions and bookings, all linked to the right players, clubs, tournament and season. No human in the loop.

**Result:** One source document, every record updated

**Built with:** Claude, WordPress, PHP

https://sylvastudio.com/works/creative-championship

### Social video editor for a law firm (Atlas Legal Practitioners)

**Problem:** Each social video needed an editor, even when only the words changed.

**What it does:** A video tool built around Atlas's look. The team changes the captions, the on-screen text and the clip, then exports in the right size and posts. Brand, timing and motion stay consistent every time.

**Result:** New video in minutes, no editor needed

**Built with:** Claude, Groq, WordPress, PHP

https://sylvastudio.com/works/atlas-practitioners

## Portfolio

### Gemynate (Fintech, 2026)

A modern fintech website for Gemynate, offering financial protection built for the way people really live.

**Challenge:** Gemynate needed a digital presence that could make financial protection feel approachable and relevant to everyday life, standing apart from the rigid, jargon-heavy feel of traditional financial services.

**What we did:** We designed a clean, confident website with plain-spoken messaging, clear product explanations, and a modern visual language that builds trust while keeping the experience simple and human.

**Deliverables:** Website design & development, Product messaging & positioning, Conversion-optimized UX, Responsive design, Launch support

https://sylvastudio.com/works/gemynate (live site: https://gemynate.com/)

### Atlas Legal Practitioners (Web Design & Development, 2026)

A polished website for Atlas Legal Practitioners, a full-service Nigerian law firm combining global insight with strong local expertise.

**Challenge:** Atlas needed a digital home that felt as sophisticated as their practice, presenting a wide range of practice areas clearly while remaining approachable to clients with straightforward legal needs.

**What we did:** We designed a refined, professional website with clear practice-area architecture, trust-building content, and a tone that positions the firm as a trusted advisor rather than a transactional service.

**Deliverables:** Website design & development, Practice area architecture, Brand visual direction, Content structure & copy support, Responsive design

https://sylvastudio.com/works/atlas-practitioners (live site: https://atlaspractitioners.com/)

### Supplement & Skin Hub (E-commerce Solutions, 2025)

A premium e-commerce website for a supplements and skincare brand, designed to educate and convert health-conscious shoppers.

**Challenge:** The brand needed a digital storefront that could showcase a wide product catalog while building trust with first-time buyers in the wellness space.

**What we did:** We designed and built a clean, content-rich e-commerce experience with strong product photography, intuitive navigation, and a seamless checkout flow that increased conversion rates.

**Deliverables:** E-commerce UX/UI design, Product page optimization, Mobile-first responsive design, Shopify development, Brand photography direction

https://sylvastudio.com/works/supplement-skin-hub (live site: https://supplementandskinhub.com/)

### The Mastermind CC (Web Development, 2025)

A full-service creative agency website for The Mastermind CC, a Lagos-based production company serving cool companies and creators.

**Challenge:** The Mastermind CC needed a digital home that matched the energy and quality of their production work, something bold, warm, and easy to navigate for clients looking to book services or rent equipment.

**What we did:** We designed a clean, contemporary website with a warm beige palette, bold typography, and clear service navigation. The site showcases their portfolio, highlights client testimonials, and makes booking meetings and renting equipment seamless.

**Deliverables:** Website design & development, Brand visual direction, Service page architecture, Equipment rental integration, Responsive mobile design

https://sylvastudio.com/works/the-mastermind-cc (live site: https://themastermind.cc)

### OptionsLab (Mobile App, 2025)

A mobile trading community app with curated trade breakdowns, gamified courses, and a feed of real traders sharing real ideas.

**Challenge:** OptionsLab needed a polished mobile experience that could combine education, trade analysis, and social networking into a single cohesive app that traders would actually use daily.

**What we did:** We designed and built a clean, engaging mobile app with structured learning paths, real trade breakdowns, a community feed, and gamified progression, making options trading accessible and sticky.

**Deliverables:** Mobile app UX/UI design, Community feed architecture, Gamified learning system, Trade journal & analytics, iOS development

https://sylvastudio.com/works/optionslab (live site: https://optionslab.app/)

### CalAssist (AI / SaaS, 2025)

An AI-powered meeting intelligence platform that captures action items, delivers pre-meeting briefs, and keeps professionals on top of their commitments.

**Challenge:** CalAssist needed a clean, trust-building website that could clearly communicate a complex AI product to busy professionals while driving sign-ups and conversions.

**What we did:** We designed a focused, conversion-optimized landing experience with clear feature breakdowns, trust signals, and a streamlined onboarding flow that makes the product's value immediately obvious.

**Deliverables:** Landing page design & development, Product messaging & positioning, Conversion-optimized UX, Responsive design, Launch support

https://sylvastudio.com/works/calassist (live site: https://calassist.ai/)

### Sylva Studio (Brand & Web, 2025)

Our own digital home: a portfolio website designed to communicate clarity, warmth, and craft.

**Challenge:** We needed a website that could represent our design philosophy while showcasing our work in a way that felt intentional, not templated.

**What we did:** We designed and built a minimal, personality-driven portfolio with smooth scroll interactions, a card-based project showcase, and a tone that speaks directly to founders looking for a thoughtful design partner.

**Deliverables:** Brand identity & visual direction, Portfolio website design, Next.js development, Scroll-driven animations, Responsive design

https://sylvastudio.com/works/sylva-studio (live site: https://sylvastudio.com/)

### ExpertNest (Mobile App, 2026)

An iPhone app that teaches AI from zero, no coding: 8 short modules, AI-tutored lessons, and a verified certificate that opens a path to paid AI roles.

**Challenge:** ExpertNest needed to make learning AI feel approachable for complete beginners, and turn a long curriculum into something people would actually finish on their phones.

**What we did:** We designed a calm, focused learning app with bite-sized lessons led by an AI tutor, clear progress through every module, and a verifiable certificate at the end, wrapped in a landing page that tells the whole story in one scroll.

**Deliverables:** Mobile app UX/UI design, AI-tutored lesson experience, Progress & certification system, Landing page design & development, iOS launch support

https://sylvastudio.com/works/expertnest (live site: https://expertnests.com/)

### The Creative Championship (Sports Platform, 2026)

A broadcast-grade home for Lagos grassroots football: live matchdays, fixtures, results, tables, squads, and the players moving on to professional clubs.

**Challenge:** The Creative Championship needed grassroots football to look and feel as big as the professional game, with a site that fans, clubs, and scouts could follow every matchday.

**What we did:** We designed and built a bold, matchday-first platform with live countdowns, fixtures and standings across competitions, club and player profiles, and match reports, all managed by the league team week to week.

**Deliverables:** Website design & development, Matchday & fixtures system, League tables & club profiles, Player stats & prospects, Content management for the league team

https://sylvastudio.com/works/creative-championship (live site: https://thecreativechampionship.com/)

### Mayoral Link Travels (Travel, 2026)

A booking-first website for an IATA-accredited travel agency based inside Murtala Muhammed International Airport, Lagos: flights, e-visas, hotels, transfers and more.

**Challenge:** Mayoral Link needed to turn an airport counter into a place people could find and trust online, with seven services that had to feel like one simple way to plan a trip.

**What we did:** We designed and built a clean, confident site with a fare search up front, clear pages for every service, popular routes from Lagos, and WhatsApp and call buttons everywhere, so every visit ends in a real conversation with an agent.

**Deliverables:** Website design & development, Flight, hotel & e-visa search, Service page architecture, WhatsApp-first enquiry flow, Responsive design

https://sylvastudio.com/works/mayoral-link-travels (live site: https://mayorallinktravels.com/)

## Blog

### An AI Read Our Website, Then Used It to Sell to Us: What AI SEO Actually Takes

https://sylvastudio.com/blog/ai-seo-what-it-takes

**The short answer:** AI SEO is mostly ordinary good website work, done on purpose for a new kind of reader. AI assistants read your actual pages, so the job is to let the right AI crawlers in, put the facts people ask about (what you do, where, for how much, with what proof) on the page in plain words, and keep your business listings accurate. The new files you've heard about, like llms.txt, are cheap extras, not the main event. And the next step, letting AI agents book or ask for a quote on your site, is real but still in preview.

| What it is | Does it help AI tools find and describe you? | Cost to do |
|---|---|---|
| Letting AI search crawlers in (robots.txt) | Yes, blocking them can hide you from AI answers | Small, one-off |
| Clear pages with services, prices, location and proof | Yes, this is what AI answers quote | Medium, mostly writing |
| Accurate Google and Bing business listings | Yes, especially for local searches | Small |
| Structured data (schema) | Helps machines understand you; no proven boost in AI citations | Small to medium |
| llms.txt and a plain-text view of the site | Read by coding and agent tools, rarely by AI search | Small |
| Agent actions (WebMCP) on your forms | Not yet for traffic; in browser trial | Small add-on |

Facts in this post were checked in October 2026.

#### How did an AI end up selling to us?

Recently we got a cold email from an image generation API reseller. It was polite, specific and clearly written by an AI. It named our AI Content Engines service, described it in almost the same words our service page uses ("tools built from a client's brand materials"), and proposed a test built around exactly the kind of product photography that page talks about.

Nobody at that company studied our site. A tool did. It crawled our pages, worked out what we sell, matched it to what they sell, and wrote a pitch.

We've spent this year making our site easy for machines to read: structured data, a plain-text version of every page, a summary file for AI tools and a short brief telling AI assistants when to recommend us. We can't prove which of those the bot used. What we can say is that it understood us correctly, quickly, and acted on it. That's the point of AI SEO. The same reading that produced a sales email also decides how ChatGPT, Claude, Perplexity or Gemini describe you when a customer asks for someone like you.

Most business websites aren't ready for that reader.

#### What do AI assistants actually read on your website?

Your pages. Not a secret file, not a special tag.

When someone asks ChatGPT "who builds online stores in Lagos?", its search feature looks the question up, fetches pages, and writes an answer from what it finds. BrightLocal studied the sources ChatGPT Search uses for local queries and found [58% were the businesses' own websites](https://www.brightlocal.com/research/uncovering-chatgpt-search-sources/), rising to 72% for buying-type questions. Google says plainly that there are ["no additional requirements to appear in AI Overviews or AI Mode"](https://developers.google.com/search/docs/appearance/ai-features) and no special files or markup you need to add.

So the question is simple: if a machine reads your site in one pass, does it come away knowing what you do, who it's for, where you are, what it costs and why it should trust you? On most small business sites the answer is no. The services are a vague list, prices are "contact us", the location is in an image, and the proof is a logo wall with no words.

AI tools quote words. Give them words worth quoting.

#### Which AI crawlers should you let in?

This is the part almost nobody sets on purpose. The big AI companies each run several bots that do different jobs, and robots.txt (the file that tells bots what they may read) controls each one separately.

| Company | Training bot | Search bot | Fetches when a user asks |
|---|---|---|---|
| OpenAI | GPTBot | OAI-SearchBot | ChatGPT-User |
| Anthropic | ClaudeBot | Claude-SearchBot | Claude-User |
| Perplexity | (none listed) | PerplexityBot | Perplexity-User |
| Google | Google-Extended (also covers Gemini answers) | Googlebot (normal Search and AI Overviews) | (no separate bot) |

Sources: [OpenAI](https://developers.openai.com/api/docs/bots), [Anthropic](https://support.claude.com/en/articles/8896518), [Google-Extended](https://ppc.land/google-extended/).

The distinction matters. Blocking a **training** bot keeps your content out of future model training. Blocking a **search** or **user** bot can make you invisible when someone asks an assistant about you right now. Anthropic warns that blocking Claude-User ["may reduce your site's visibility for user-directed web search"](https://support.claude.com/en/articles/8896518). Blocking Google-Extended does not affect your normal Google ranking.

For a business that wants customers, our default is to allow the search and user bots, and decide on training bots on purpose. We allow all of them on sylvastudio.com, because we'd rather models learn what we do correctly. A business with paid content might choose differently. The mistake is not choosing: many sites either block everything by accident (a security plugin, a hosting default) or have never looked.

#### What facts should be on the page for AI to quote?

Think about the questions a customer types into an assistant, then make sure a plain sentence on your site answers each one.

- **What you do**, in the words customers use. "We build online stores on Shopify" beats "digital commerce solutions".
- **Where you are and who you serve.** City, country, whether you work remotely.
- **What it costs**, or at least how pricing works. "From ₦X" or "fixed quote after a free call" both give an assistant something true to say.
- **Proof.** Named clients and results in text, not only logos.
- **How to reach you.** Email, phone or WhatsApp, booking link, written out.

Then back it up with structured data: the code that labels your business name, services, location and FAQs for machines. Bing has said schema helps its AI understand content. Be honest with yourself about the upside, though: an [Ahrefs test of pages adding schema](https://analyzify.com/hub/schema-markup-ai-citations-research) found no measurable lift in AI citations. Do it because it makes your facts unambiguous and earns rich results in normal search, not as a ranking trick.

Finally, check your listings. Google Business Profile and Bing Places feed the local answers assistants give. In Nigeria especially, very few businesses have a Bing Places listing at all, which is an easy gap to close.

#### Does llms.txt work?

llms.txt is a plain text file at the root of a site (yoursite.com/llms.txt) that summarises the business and links its key pages, in a format AI tools can read in one go. It's the most talked-about AI SEO tactic, and it's mostly oversold.

Ahrefs checked 137,210 websites in May 2026. [28% had an llms.txt file, and 97% of those files got zero requests](https://ahrefs.com/blog/llmstxt-study/). Of the requests that did happen, the bots that feed AI answers made only 1.1%. The real readers were coding tools and AI agents. Google's John Mueller has said [no AI system uses it](https://seroundtable.com/google-ai-llms-txt-39607.html).

We still publish one, along with a longer version of the whole site and a short brief for AI assistants. They took an afternoon, they cost nothing to host, and they're genuinely useful to agents and developer tools that do read them. We've also started counting which bots request them, so we'll have our own numbers to report. But if someone sells you llms.txt as the way into ChatGPT, they're selling the cheapest part of the job as if it were the whole thing.

#### What's next: can AI agents act on your website?

The next shift is from AI reading your site to AI using it. An agent working for a customer could fill in your quote form, check stock or book a slot, without the customer clicking through.

The standard for this is called WebMCP. It lets a site describe its forms and actions in a way agents can call directly. Chrome launched it in [early preview in February 2026](https://developer.chrome.com/blog/webmcp-epp) and is running it as a browser trial, and in June Chrome added an experimental ["Agentic browsing" audit to Lighthouse](https://developer.chrome.com/blog/agent-ready-toolkit), its site-checking tool. Safari's engine team opposes it, and there's no date for it to ship everywhere.

So it's real, and it's early. Adding it to the forms you already have is low effort and does no harm in browsers that ignore it. Treat it as getting in line early, not as a source of bookings today.

#### The AI SEO checklist

1. Check robots.txt: are the AI search and user bots allowed? Is anything blocking them by accident?
2. Decide on AI training bots on purpose, and write that choice into robots.txt.
3. Make sure every service has a plain sentence saying what it is, who it's for and where.
4. Put prices on the site, or explain how pricing works.
5. Write proof in text: named clients, what you did, what changed.
6. Write out your contact details, location and booking link in text, not only in images.
7. Add structured data for your business, services and FAQs.
8. Claim and update Google Business Profile and Bing Places.
9. Make sure your pages load fast and render their text without heavy scripts.
10. Add llms.txt and a plain-text view of the site as cheap extras.
11. If you take bookings or quote requests, consider agent-ready forms (WebMCP).
12. Ask ChatGPT, Claude and Perplexity about your business, and note what they get wrong.

#### Frequently asked questions

**What is AI SEO?**
AI SEO is making your website easy for AI assistants like ChatGPT, Claude, Perplexity and Gemini to find, read and describe correctly. It's also called GEO (generative engine optimisation) or AEO (answer engine optimisation). Most of it overlaps with good SEO: crawlable pages, clear facts and accurate listings.

**Is AI SEO different from normal SEO?**
Partly. The foundations are the same. The differences are the AI crawlers you need to allow, writing facts in plain sentences an assistant can quote, and newer extras like llms.txt and agent-ready forms.

**Should I block AI crawlers?**
Usually not the search ones. Blocking AI search and user bots can hide you from assistant answers. Blocking training bots is a separate choice about whether your content trains future models.

**Do I need llms.txt?**
It won't get you into ChatGPT on its own. It's cheap and useful to agents and developer tools, so it's worth adding, but last, not first.

**How do I check how AI sees my business?**
Ask a few assistants the questions your customers would ask, like "who does X in [your city]?" and "what does [your business] charge?". Wrong or missing answers usually point to facts missing from your site.

#### Where do you start?

Start with the checklist above. Most of it is an afternoon of honest writing and a few settings.

If you'd rather have it done, it's now a small fixed-price add-on we call the [AI-Ready Website](/ai-ready): an AI-ready retrofit of your existing site, an AI assistant that answers visitors from your own content, and agent-ready forms. Each part is ₦400k ($300), or ₦1M ($750) for all three. We built all of it on our own site first, so you can see it working: our [llms.txt](/llms.txt), our [plain-text view](/ai) and the assistant you can chat with on this site.

[Book a free 30 minute call](https://cal.com/sylva-studio/30min) and bring your website address. We'll show you how AI tools see it today.

### How Much Does a Custom AI Tool Cost for a Small Business, and What Do You Pay Every Month After?

https://sylvastudio.com/blog/custom-ai-tool-cost

**The short answer:** a custom AI tool costs you twice. Once to build it, which depends on how many steps and systems it touches, and then every month to run it, which depends on how often it runs and which AI models it calls. For a small business automating one repetitive job, the monthly running cost is often smaller than people fear, but only if the build is scoped tightly and the right model is doing each step.

| What drives the cost | Build (paid once) | Running (paid monthly) |
|---|---|---|
| Number of steps in the job | More steps, more to design and test | More model calls per job |
| Systems it connects to (CRM, Sheets, WordPress, email) | Each integration adds work | Usually small, sometimes a subscription |
| How messy the input is (PDFs, scans, voice notes) | Clean-up logic takes time | Bigger inputs use more tokens |
| Type of output (text, images, video, voice) | Templates and checks to build | Media credits cost far more than text |
| How often it runs | Barely affects the build | The biggest lever on the monthly bill |
| Human review steps | A little extra screen work | Saves money by catching bad runs early |

Prices in this post were checked in October 2026.

#### Why do the prices online disagree so much?

Search "AI development cost" and you'll find ranges that start in the thousands and end somewhere near a house. They're not wrong, they're just answering a different question.

[Debut Infotech](https://www.debutinfotech.com/blog/ai-development-cost) puts a simple LLM API integration at $5,000 to $20,000 for a starter build, and an AI agent or multi-agent system at $50,000 to $120,000 before it's even a full build. [Webclues](https://www.webcluesinfotech.com/how-much-does-it-really-cost-to-develop-a-custom-ai-solution/) starts entry-level chatbots at $10,000 to $50,000 and puts enterprise-grade platforms at $200,000 to $500,000 and up. [Groovy Web](https://www.groovyweb.co/blog/ai-automation-cost) is the closest to a small business view: $2,000 to $8,000 for a single automated workflow, $8,000 to $25,000 for a suite of connected ones, and $25,000 to $60,000 and up for custom agents.

Those big numbers mostly describe enterprise machine learning: training models, labelling data, compliance reviews, teams of engineers. Most small businesses don't need any of that. They need one job, the one that eats ten hours of someone's week, to happen on its own. That's a much smaller thing to build, because the hard part (the model) already exists and you rent it by the use.

#### What are you actually paying for: build cost or running cost?

**Build cost** is the project. Working out the job step by step, writing the prompts, connecting the systems, building a simple screen for your team, testing it on real examples until it's reliable, and handing it over. You pay it once, though most tools get a few rounds of tuning in the first weeks.

**Running cost** is what the tool spends every time it works. It usually has three parts:

- **Model fees (tokens).** Text models charge per token, roughly a chunk of a word, for what you send in and what comes back. Output costs more than input.
- **Media credits.** Image, video, voice and caption models are billed per image, per second of video, or per character of speech. These are usually the largest line on a creative pipeline.
- **Hosting and services.** Somewhere for the tool to live, a database, file storage, email sending. For a small tool this is often modest, and sometimes it's already covered by platforms you pay for.

Agency quotes tend to blur these together. Keep them apart. A tool that's cheap to build but expensive to run is a very different decision from one that's the other way round.

#### Why doesn't my ChatGPT or Claude subscription cover this?

This catches almost everyone. The monthly plan you pay for ChatGPT or Claude is for the chat app: you, typing, in their window. A custom tool talks to the model through the API, the developer side, and that's a separate account with its own bill.

OpenAI says it plainly: ["API usage is billed separately from your ChatGPT subscription."](https://help.openai.com/en/articles/9039756-managing-billing-for-chatgpt-and-the-api-platform) Anthropic says the same for Claude: ["A paid Claude subscription enhances your chat experience, and the Claude API is billed separately."](https://support.claude.com/en/articles/9876003) The one wrinkle: Anthropic notes that its Max and Team plans include some monthly API credits. Useful for testing, but don't plan a business process around them.

So when you budget, assume the API bill is new money, paid by the use, in dollars.

#### What does it cost per run? A real example

We run a free tool on our own site, the [Pipeline Sketch](/try). You describe a repetitive job in plain words and it sketches the AI pipeline that could do it: the steps, which kind of model handles each one, and where a human should check the work.

We measured what it costs us. Each sketch costs about **$0.05** in model fees. The full version, emailed as a report with a PDF, costs about **$0.07**. Because it's public and anyone can use it, it also has a hard daily spending cap, so a busy day or a bad actor can't run up the bill. That cap is something we'd build into any client tool that faces the public.

Five cents is cheap. But notice what makes it cheap: it's text in, text out, and it runs once per request. Change either of those and the maths changes.

Two client pipelines we've built show the range. The [OptionsLab](/works/optionslab) Shorts pipeline makes short videos, and every Short calls several paid models: one for images, one for video, one for the voice, one for captions. Media models are where the money goes, so the cost per Short is driven by how many scenes it has and how long it runs. [The Creative Championship](/works/creative-championship) match tool sits at the other end: a WordPress tool that reads a Wyscout PDF and makes one Claude call to write the match report. One text call per match is about as lean as AI gets.

#### How do I estimate my monthly running cost?

You don't need a developer to get a rough number. Use this:

**Monthly running cost = (runs per month × cost per run) + fixed monthly costs**

Cost per run is the sum of every model call in the job. For text, that's tokens in and tokens out at the model's price. At the time of writing (October 2026), [Anthropic's API pricing](https://platform.claude.com/docs/en/about-claude/pricing) lists Claude Sonnet 5.5 at $2 per million input tokens and $10 per million output tokens, and Claude Haiku 5.5, a smaller and faster model, at $0.10 in and $0.50 out for prompts up to 100,000 tokens. Jobs that don't need an instant answer can go through Anthropic's Batch API at a 50 percent discount on both.

**An illustration, not a quote.** These numbers are made up to show the method. Say you want a tool that reads each supplier invoice, pulls out the totals, and drafts a reply. Each run sends about 5,000 tokens in and gets about 1,000 back.

- On Sonnet 5.5: 5,000 input tokens is $0.01, and 1,000 output tokens is $0.01. That's about $0.02 per invoice.
- At 500 invoices a month, that's about $10 a month in model fees.
- Add whatever your hosting and storage cost each month, and that's your running bill.

The same job on Haiku 5.5 would cost a fraction of that, if Haiku is good enough for the task. Often it is for extraction and sorting, and often it isn't for writing that customers will read. Picking the right model for each step is one of the biggest savings in any build.

Now swap the job for a video. One 30-second Short with images, video clips, a voiceover and captions can cost many times more than a thousand text calls, because media credits are priced per second and per image. If your idea involves video or voice, get those per-unit prices first. They'll decide whether the idea pays.

#### What makes a custom AI build cheaper?

**Start with one process.** The biggest cost driver is scope. One job, done reliably, is a small build. "Automate our marketing" is not a job, it's twenty. Pick the one that hurts most, prove it saves time, then add the next.

**Keep a human checkpoint.** A review step, where someone approves the output before it goes out, is cheaper than trying to make the AI perfect. It also stops a bad run from turning into twenty bad runs and twenty sets of model fees. We put [human gates in our pipelines on purpose](/blog/orchestrating-ai-models-pipeline).

**Reuse what you already pay for.** If your team lives in Google Sheets, WordPress or WhatsApp, build the tool around them instead of replacing them. The Creative Championship tool lives inside the WordPress site the team already uses, so nobody had to learn a new system.

**Clean inputs.** Typed forms are cheap to process. Blurry scans and voice notes need extra steps. If you can fix the input at the source, the build and the running cost both drop.

**Match the model to the step.** Use a big model only where judgement matters, and a small one for sorting, extracting and formatting.

#### Paying from Nigeria: why are AI bills in dollars?

If you're in Nigeria, plan for this up front: the AI providers bill in US dollars. Model fees, media credits and most hosting are charged to a dollar card or account, every month. Your build might be agreed in naira, but the running cost will move with the exchange rate.

Three things help. Know your monthly running cost in dollars before you commit, so a rate swing is a number you've already seen. Set a hard spending cap on every API account, the same way we cap our own public tool. And ask who holds the API accounts: they should be in your name, so the tool and its costs belong to you.

#### When should you not build a custom AI tool?

Sometimes the honest answer is: buy the software.

If a SaaS product already does your job well, for a monthly fee, and your process looks like everyone else's, buy it. Meeting notes, a website chatbot that answers FAQs, scheduling social posts, transcribing calls: there are good tools for all of these, and a custom build would cost more and do less.

Build custom when the job is specific to how you work. When the input is your own data (match stats, product catalogues, legal templates), when the output has to look and sound like your brand, or when you've tried the off-the-shelf tools and your team is still copying and pasting between them.

#### Where do you start?

Every build we do starts the same way: a fixed-price Workflow Audit of one process. We map the job step by step, work out which parts AI should do and which should stay human, and estimate what it will cost to run each month, before you commit to a build. Pricing for the build itself is scoped per project after a free call.

If you want a feel for it first, describe your job in the [Pipeline Sketch](/try). It's free, takes a minute, and costs us about five cents. You can see more of what we've built on our [works page](/works), or read about our [AI workflows service](/services/ai-workflows).

Or skip ahead and [book a call](https://cal.com/sylva-studio/30min). Bring the one job you'd most like to stop doing by hand.

### Do You Need WordPress to Rank on Google? How We Handle SEO on Custom-Built Sites

https://sylvastudio.com/blog/do-you-need-wordpress-to-rank

One question comes up on almost every discovery call: "If you don't build it on WordPress, will we still show up on Google?"

Short answer: yes. Google doesn't know or care what built your site. It reads the HTML that arrives in the browser, follows links, and judges whether the page answers what someone searched. WordPress can produce good HTML. So can a custom Next.js build. So can a badly configured WordPress install produce something Google struggles with.

We build both. Our own site is custom Next.js, and we've shipped custom WordPress themes for clients too, including [one we built without writing PHP by hand](/blog/custom-wordpress-without-php). So this isn't a "WordPress bad" post. It's about where SEO actually comes from.

#### Where the WordPress Myth Comes From

WordPress earned its SEO reputation from plugins. Install Yoast or Rank Math and you get fields for titles and descriptions, an automatic sitemap, and a traffic light telling you whether your keyword appears enough times.

That's useful, but notice what it is: a checklist with a form attached. The plugin doesn't make the page rank. It reminds you to do the things that help a page rank. On a custom build, those same things are written into the site itself, once, and they apply to every page automatically.

#### What Actually Gets a Page Found

Strip it down and Google needs four things from any site, whatever it's built on:

- **To be able to read it.** Real HTML on first load, not a blank page that fills in later with JavaScript.
- **To understand what each page is about.** A clear title, one main heading, a description, and text that answers the question in plain words.
- **To find every page.** A sitemap, sensible internal links, and no important pages hidden behind forms or logins.
- **To trust it.** Fast loading on a phone, HTTPS, no broken pages, and content that matches what the title promised.

None of those are WordPress features. They're decisions.

#### How We Build It Into a Custom Site

On a custom build there's no SEO plugin, because the site is the plugin. Here's what that looks like on our own site:

**Every page is rendered on the server.** When Google (or anyone) requests a page, it gets the full content immediately. No waiting for JavaScript.

**Titles, descriptions and share images are set per page in code.** Blog posts and project pages generate theirs from the content, so a new post can't ship without them.

**The sitemap writes itself.** Every service page, project, and blog post is added automatically, with the date it last changed. Nobody has to remember to update it.

**Structured data tells Google what things are.** Services are marked up as services, blog posts as articles, FAQs as questions and answers, and every page has breadcrumbs. This is what earns the richer search results, and on a plugin-free site it's set once in a template instead of filled in by hand.

**Robots rules are deliberate.** Everything public is open to crawlers. Private areas are explicitly closed.

#### The Part Most Sites Still Miss: AI Answers

A growing share of people never see a list of blue links. They ask ChatGPT, Perplexity, or Google's AI overview, and get one answer with a few sources cited.

Those tools read the web differently. They reward pages that state things plainly and are easy to pull clean text from. So on our site we added three things most agencies haven't:

- [**/llms.txt**](/llms.txt): a short, plain-text map of who we are, what we do, and where each service lives. It's an emerging convention for helping language models find the right pages.
- [**/agents.md**](/agents.md): written for AI assistants directly, explaining when it makes sense to recommend us and when it doesn't.
- [**/ai**](/ai): the whole site as plain text, with no layout, animation, or scripts in the way.

We also registered with Bing Webmaster Tools, not just Google Search Console. ChatGPT's search leans on Bing's index, so if you're invisible on Bing, you're harder to find there too.

#### Our Pre-Launch SEO Checklist

This is what we check before any site goes live, custom or WordPress:

1. Every page returns real content without JavaScript.
2. Every page has a unique title and description that a human would click.
3. One main heading per page, and it says what the page is.
4. The sitemap lists every public page and nothing private.
5. Robots rules allow what should be found and block what shouldn't.
6. Structured data validates in Google's Rich Results Test.
7. Share previews look right when the link is pasted into WhatsApp, X, and LinkedIn.
8. Images are compressed and sized for phones, with descriptive alt text.
9. The site loads fast on a mid-range phone on mobile data, not just on office Wi-Fi.
10. Old URLs redirect to their new homes, so existing rankings carry over.
11. The site is submitted to Google Search Console and Bing Webmaster Tools on launch day.
12. There's a plain-language page or file that an AI assistant could quote accurately.

#### So, WordPress or Custom?

Pick the platform for how your team will run the site day to day. If you have people who live in the WordPress editor and want to keep it that way, that's a good reason. If you want something faster, more distinctive, and without a stack of plugins to update, custom is a good reason too.

Just don't pick either one for SEO. Rankings come from what's on the page and how carefully the site is put together, and that part is on whoever builds it.

If you're weighing up a rebuild and want to know what it would mean for your search traffic, [that's a conversation we have often](/services/web-app-development).

### Mobile-Friendly Isn't a Breakpoint: What We Check Before Any Site Ships to Phones

https://sylvastudio.com/blog/mobile-friendly-isnt-a-breakpoint

Ask most web builders whether a site is "mobile-friendly" and they'll drag the browser window narrow, watch the columns stack, and say yes.

That's a breakpoint, not a mobile experience. A layout can stack perfectly and still be slow, hard to tap, and missing the one button the visitor came for.

For most of the businesses we work with, the phone is the main screen, not the second one. Customers find you from an Instagram link, a WhatsApp message, or a search on the way somewhere, often on mobile data. So we design the phone version as its own thing and then check it properly. Here's what that means.

#### 1. The Main Action Is Within Thumb Reach

On desktop, a "Book now" button in the top corner is fine. On a phone, the top corner is the hardest place to reach with one hand.

For [Mayoral Link Travels](/works/mayoral-link-travels), a travel agency inside Lagos airport, almost every visit should end in a WhatsApp chat or a call. So on phones the call button sits in the header, a WhatsApp button floats at the bottom right where your thumb already is, and the fare search starts right under the first screen. Nobody has to hunt.

#### 2. It Loads on Real Mobile Data

We test on a throttled connection and a mid-range phone, not on office Wi-Fi and a new iPhone. That changes decisions fast:

- Images are served at the size the phone needs, in modern formats, not the 3000-pixel original.
- Big hero videos get a lighter version or a still image on phones.
- Fonts are limited to what the design actually uses.
- Nothing important waits on a third-party script to load first.

If the first screen isn't usable within a few seconds on a weak connection, people leave before they see anything.

#### 3. Tap Targets Are Sized for Fingers

Links that are easy to click with a mouse are often too small or too close together for a thumb. We check that every button and link is comfortably tappable, with enough space around it that you don't hit the wrong one. Menus get bigger rows. Form fields are tall enough to tap first time.

#### 4. Forms Open the Right Keyboard

Small detail, big difference. A phone number field should open the number pad. An email field should show the @ key. Dates should use the phone's own date picker. Every wrong keyboard is a small reason to give up.

#### 5. Content Is Reordered, Not Just Stacked

When desktop columns stack, the order they land in isn't always the order a phone visitor needs. On [The Creative Championship](/works/creative-championship), a grassroots football league site, fans mostly open it on matchday. So on a phone the full navigation folds away, but a "Next match" button stays in the header and a Matchday button stays pinned to the bottom of the screen. Wherever you are on the site, the game is one tap away.

Sometimes the phone gets a different layout entirely: a swipeable row instead of a grid, a short summary that expands, a sticky bar instead of a sidebar.

#### 6. Nothing Spills Sideways

One element that's a few pixels too wide and the whole page wobbles left and right when you scroll. We check every page at small widths for horizontal overflow: long words, wide tables, embedded maps, and images with fixed widths are the usual causes.

#### 7. Text Is Readable Without Zooming

Body text is large enough to read at arm's length, lines aren't too long, and there's enough contrast to read outdoors in the sun. If someone has to pinch to zoom, the design has already failed.

#### 8. It Looks Right When Shared

Phones are where links get shared. We check the preview card a link produces in WhatsApp, iMessage, X, and LinkedIn: the right title, a short description, and an image that's actually designed for that space.

#### 9. We Test on Actual Phones

Browser tools are good for a first pass, but they don't show you how a page feels to scroll, how the keyboard covers a form, or how a sticky header behaves when the address bar hides. Before launch we use the site on real iPhone and Android devices, end to end, doing the thing a customer would do.

#### The Short Version

Mobile-friendly means a person on a phone, on mobile data, using one thumb, can do what they came to do without effort. Everything above is in service of that.

It's also why every project on [our works page](/works) gets its own phone cover, not a squeezed version of the desktop one. We look at the phone first.

If your site technically works on phones but doesn't feel like it was made for them, [we can help with that](/services/web-app-development).

### We Built a Custom WordPress Site Without Writing a Line of PHP

https://sylvastudio.com/blog/custom-wordpress-without-php

We recently delivered a WordPress site with genuinely custom functionality: features tailored to one company's specific workflow, not something you could install as a plugin. The honest part: nobody on the build knew PHP, and we didn't write the code by hand. We described what we wanted, in plain language, and worked with an AI to build it.

This used to be unthinkable. WordPress customization meant PHP, hooks, the template hierarchy, and a stack of conventions you learned over years. Here's what changed, and where it bites.

#### What We Built

The client needed behavior that didn't exist off the shelf: custom content types, tailored admin workflows, and front-end features specific to how they actually run their business. The kind of thing that normally means either bending an ill-fitting plugin to your will or hiring a dedicated WordPress developer.

Instead, we built it conversationally: describe the feature, get working code, test it on the site, refine. Iterate until it does exactly what the company needs. The result was custom software, in a language we don't write, shipped to production.

#### How It Actually Went

Faster than it had any right to be, for the straightforward parts. Standard custom post types, fields, and admin tweaks came together quickly, because these are well-trodden patterns the model has seen thousands of times.

The further we got from common patterns, the more the process became a real collaboration. We'd describe intent, read what came back, test it, and feed back what broke. Not "type a prompt and walk away." It was more like working with a fast, knowledgeable developer who needs clear direction and a careful review of their work.

#### The Catch

Here's the part the hype skips: you cannot fully outsource understanding.

We didn't need to write PHP, but we absolutely needed to understand *systems*: how WordPress structures content, what a hook conceptually does, why one approach is safer than another, what "this works but it's insecure" looks like. The AI writes the code. It does not own the consequences. You do.

When something broke in a way the model couldn't see, we had to reason about *why*, and that required real technical literacy, just not language-specific fluency. Vibe-coding without any foundation doesn't get you a custom site. It gets you a fragile pile you can't debug, maintain, or trust.

#### What It Means for Studios

The skill that matters has shifted. It's moved from *syntax* (memorizing the exact incantation in a specific language) to *judgment*: knowing what to build, how to structure it, how to tell good output from dangerous output, and when to slow down and verify.

For a small studio, that's enormous. It means we can take on work in stacks we don't specialize in, as long as we bring strong fundamentals and a careful eye. It does not mean anyone can ship anything. The floor got lower; the ceiling still rewards people who actually understand what they're shipping.

### No Single Model Does It All: Orchestrating AI in a Pipeline

https://sylvastudio.com/blog/orchestrating-ai-models-pipeline

When people imagine building with AI, they picture choosing *the* model, the smartest one, and asking it to do everything. That's not how the systems we build actually work. The real pipelines stitch together several models, each doing one job it's genuinely best at. The intelligence isn't in any one model. It's in the wiring.

#### Each Model Has One Job

Take our short-form video pipeline. It uses a different tool at every step, on purpose:

- A voice model for natural speech.
- A transcription model for word-level caption timing.
- A fast reasoning model to break a script into scenes and write prompts.
- An image model to generate each scene.
- A rendering engine to assemble it all.

Asking one model to do all of that would mean accepting mediocre output at every step. Specialization beats generalization here, the same way you'd hire a sound engineer and a colorist rather than one person who's "pretty good at both." The art is matching each task to the tool that owns it, and knowing when "fast and cheap" beats "smart and slow," and when it's the reverse.

#### The Handoffs Are Where It Breaks

Here's what nobody warns you about: the models are rarely the problem. The *seams between them* are.

Every handoff is a chance for the shape of the data to be slightly wrong. Timestamps in a format the next step doesn't expect. A scene breakdown that returns six scenes when the layout assumes a max of five. An image that comes back the wrong aspect ratio. Each model behaves reasonably on its own and the system still fails, because the contract between two steps quietly didn't hold.

So most of the real engineering is defensive: validating output before passing it on, normalizing formats, handling the case where a model returns something almost-but-not-quite right. The glue code is the product.

#### Keeping It Consistent

The other hard problem is coherence across steps that don't know about each other. Our image model generates each scene independently (it has no memory of the last one), so visual consistency has to be *imposed* from outside: shared style instructions, reference framing, tighter prompts. The pipeline's job is to give each isolated step enough context to stay on-brand without seeing the whole.

#### The Real Skill

If there's one thing we've internalized, it's this: building with AI is less about prompting and more about *systems thinking*. Which tool for which job, how data flows between them, where to validate, where to add a human gate, what to do when a step fails.

The model that's best at everything doesn't exist. The pipeline that routes each job to the right model, and survives the messy handoffs in between: that's the thing worth building.

### Designing Templates a Machine Can Fill

https://sylvastudio.com/blog/designing-templates-machines-fill

We build a lot of tools that generate visuals automatically: social posts, thumbnails, video scenes. The thing nobody tells you when you start: the hard part isn't the generation. It's the design *underneath* the generation. A machine can only fill a template that was designed to be filled, and most templates aren't.

Designing for automation is a different discipline than designing a single beautiful artifact. It's the discipline of constraints.

#### Constraints Are the Product

When you design one poster, you make a thousand tiny decisions in context: nudging this, balancing that, trusting your eye. When you design a template a machine will fill ten thousand times, you can't be in the room for any of them. So every decision has to be encoded as a rule that holds up no matter what gets poured in.

That's the shift: you're not designing the output. You're designing the *system of constraints* that guarantees every output is acceptable. The work moves from "make this look good" to "make it impossible for this to look bad."

#### What Makes a Template Fillable

A few principles we've learned the hard way:

- **Fixed slots, flexible content.** Copy always bottom-left. Logo always top-left. The positions never move; only what fills them changes. Predictable structure is what lets variety stay on-brand.
- **Design for the worst-case content, not the best.** The caption that's three words and the one that's three lines both have to land. If your template only looks good with perfect-length text, it's not a template. It's a one-off.
- **Bound the randomness.** Generated backgrounds feel alive, but only because they're generated *within* strict rules: brand colors only, limited layouts, controlled contrast. Randomness without boundaries is just noise.
- **Contrast is non-negotiable.** A human notices when text disappears into a background and fixes it. A machine won't, unless you've made it structurally impossible.

#### The Studio Takeaway

This is really just a design system wearing different clothes. A design system exists so a *team* can produce consistent work without one person approving every pixel. A template-for-automation exists so a *machine* can do the same. The underlying belief is identical: consistency comes from shared, enforced decisions, not from heroics on each individual piece.

So when a client asks us to "make a tool that generates their posts," what we're really being asked to do is design their constraints well enough that a machine can be trusted with their brand. That's not a lesser version of design work. In a lot of ways it's the purest version of it, because if your system is even slightly wrong, you don't get one bad artifact. You get ten thousand.

### The Always-On Content Machine: Social Posts Generated From the News

https://sylvastudio.com/blog/always-on-content-machine

Most brands struggle with social media for one boring reason: consistency. Posting every day, on theme, on brand, forever, is a grind that quietly dies the moment someone gets busy. So we built a system that doesn't get busy. It reads the news, decides what's worth posting, writes the copy, designs the image, and publishes it on a schedule, without anyone touching it.

Here's how the machine works.

#### The Pipeline

It runs in stages, each feeding the next:

1. **Ingest**: the system pulls relevant stories from sources like Bloomberg and CNN.
2. **Summarize and cluster**: each story gets summarized and sorted into categories, so related news lands together instead of as scattered one-offs.
3. **Caption**: for each category, the system reads all the grouped stories and writes short, punchy captions that work as social copy, not headlines, but takes.
4. **Compose**: each caption is dropped into a generated image at the right dimensions: copy bottom-left, logo top-left, and a randomly generated background layout built from the brand's colors.
5. **Schedule**: the finished posts go out at set times.

Input: the day's news. Output: a steady stream of on-brand posts. No one had to "think of something to post."

#### The Design Layer

The part people underestimate is the image composition. It only works because the layout is *systematized*, not designed fresh each time.

Every post follows the same skeleton: fixed slot for copy, fixed slot for logo, brand-colored background generated within tight rules. That rigidity is exactly what makes it scalable: the system can generate a hundred variations that all look unmistakably like the same brand, because the structure never moves. The randomness lives only inside the boundaries we set.

This is the same principle as a good design system, applied to a machine instead of a team. (We dig into that idea more in our piece on designing templates a machine can fill.)

#### Where Humans Still Matter

Automation handles volume. It does not handle judgment, and pretending otherwise is how brands embarrass themselves.

- **Sensitivity.** News is not neutral content. A system that auto-posts about a tragedy with a cheerful brand background is a disaster. We gate categories and keep a human able to pause the feed.
- **Voice calibration.** The caption model drifts over time. Every so often a human reads a batch and nudges the tone back to where the brand actually lives.
- **Strategy.** The machine reacts to the news. It doesn't decide what the brand should *stand* for. That's still a person's job.

#### The Takeaway

The goal was never to remove humans from social media. It was to remove the *grind*, the daily "what do we post" panic, so the humans can spend their attention on the few decisions that actually matter. The machine keeps the lights on. People decide what the room should look like.

### We Prototype in Code Now, Not Figma

https://sylvastudio.com/blog/prototype-in-code-not-figma

The standard process is sacred: research, wireframe, design in Figma, hand off, build. We've stopped following it. For a growing share of our work, we now prototype directly in code, building real, interactive features first, and only go into Figma to refine once we know the thing actually works.

This isn't a rejection of design. It's a recognition that a static mockup hides the most important question: how does this *feel* when it's real?

#### The Problem With Mockup-First

A Figma file is a beautiful lie. It looks finished, but it can't tell you:

- How the interaction feels with real latency and real data
- Whether the empty state, the error state, and the loading state hold up
- What happens when the content is twice as long as the placeholder
- Whether the idea is even technically sensible

So you design something gorgeous, hand it off, and discover in build that it doesn't work, or doesn't feel right, and now you're redesigning with sunk cost pulling against you. The mockup looked done, so changing it feels like failure rather than learning.

#### What Changed

The reason mockup-first made sense was simple: building was slow and expensive, so you de-risked on cheap pixels first. That math has changed. With tools like Claude Code, we can stand up a working, interactive feature in the time it used to take to make a clickable prototype.

So we build the real thing: rough, but real. We click through it. We feel the latency. We see how it breaks. We learn in an hour what a mockup would have hidden for a week. Then we take that knowledge into Figma and design with confidence, because we already know what's true.

#### When Figma Still Wins

We're not zealots about this. Figma-first is still the right call when:

- **The visual direction is unsettled.** If we're exploring brand, mood, and aesthetic, Figma is faster for divergent thinking.
- **We need stakeholder buy-in before building.** A polished mockup communicates intent to non-technical clients better than a rough prototype.
- **The work is primarily visual**, like a landing page or a brand system, where there's little interaction to discover.

The point isn't "never use Figma." It's "stop using it to answer questions only a working build can answer."

#### How We Actually Work Now

In practice it's a loop. We prototype the risky, interaction-heavy parts in code to learn how they behave. We design the visual and brand-heavy parts in Figma. And the two inform each other constantly: what we learn in the prototype reshapes the design, and the design pulls the prototype toward polish.

The old process treated design and build as a relay race with a clean handoff. We treat them as a conversation. The result is fewer expensive surprises, less rework, and products that feel right because we felt them long before we called them done.

### Script In, Finished Video Out: How We Automated a Whole Reels Pipeline

https://sylvastudio.com/blog/script-to-rendered-video

You paste in a script. A few minutes later, a finished vertical video comes out: voiced, captioned, scene-matched visuals, ready to upload to TikTok or YouTube Shorts. No timeline scrubbing, no manual captioning, no sourcing footage. We built this for our own content first, and it changed how we think about short-form production entirely.

Here's the whole pipeline, honestly, including the parts that still break.

#### The Pipeline, End to End

The script is the only input. From there, every step hands off to the next:

1. **Voice**: the script goes to ElevenLabs, which picks one of our pre-selected character voices and returns a clean audio track.
2. **Captions**: that audio runs through Whisper, which transcribes it and gives us word-level timestamps. Those timestamps are what make captions snap to the voice perfectly instead of drifting.
3. **Scene breakdown**: the script goes to a language model (we use Groq for speed, Claude when we want better judgment) that splits it into scenes and writes a tailored image prompt for each one.
4. **Visuals**: each scene prompt goes to Gemini, which generates the image for that beat.
5. **Render**: everything (audio, timed captions, generated images) gets composed and rendered by Remotion into the final video.

The magic isn't any single tool. It's that the output of each step is already in the exact shape the next step needs.

#### Why Each Tool Earns Its Place

We didn't pick these for hype. Each one does a job nothing else does as well:

- **ElevenLabs** gives us voices with actual personality, and the API means we can swap characters without re-recording anything.
- **Whisper** is the unsung hero. Word-level timing is the difference between captions that feel native and captions that feel bolted on.
- **The LLM scene step** is where taste lives. A good breakdown turns a wall of text into a sequence with rhythm, and writing a strong image prompt per scene is the difference between coherent visuals and random stock-feeling images.
- **Remotion** lets us treat video as code. Layouts, caption styles, transitions: all reusable, all version-controlled, all consistent across every video.

#### Where It Breaks

We're not going to pretend it's flawless.

The weakest link is visual consistency. Gemini generates each scene independently, so a character or product can look subtly different from one beat to the next. We've reduced this with stricter, more descriptive prompts and reference styling, but it's still the thing we watch most closely.

Scene breakdowns also occasionally misjudge pacing: cramming too much into one beat or stretching a thin line across two. That's a prompt-engineering problem more than a model problem, and it keeps improving.

And nothing here replaces judgment about *what the script should say*. The pipeline produces the video. It doesn't decide whether the idea is good.

#### Why This Matters

What used to be a few hours of an editor's time (voiceover, syncing, sourcing visuals, assembling a timeline) is now a few minutes of compute and a few cents of API cost. That doesn't make editors obsolete. It moves the work up the stack: from *assembling* video to *directing* it.

For a studio, that's the real shift. We spend less time on the mechanical middle and more time on the script and the look, the parts that actually decide whether anyone watches.

### Motion on the Web: Less Is Always More

https://sylvastudio.com/blog/motion-design-web

Animation is the easiest way to make a website feel premium. It's also the easiest way to make it feel annoying. The difference comes down to restraint.

#### The Rule of Purpose

Every animation needs to answer one question: **what does this help the user understand?** If the answer is "nothing, it just looks cool," cut it.

**Good reasons to animate:**
- Showing a state change (loading, success, error)
- Guiding attention to new content
- Creating continuity between views
- Providing feedback on interaction

**Bad reasons to animate:**
- Because the library supports it
- Because the inspiration site did it
- Because the page feels "empty" without it

#### Duration Matters More Than Easing

Most web animations are too slow. Here's the timing we follow:

| Interaction | Duration | Why |
|-------------|----------|-----|
| Button hover | 150ms | Instant feedback, no waiting |
| Tooltip appear | 200ms | Quick but not jarring |
| Modal open | 250ms | Smooth entrance without delay |
| Page transition | 300ms | Enough to feel intentional |
| Orchestrated entrance | 400–600ms | Complex sequences, staggered |

Anything longer and users are waiting instead of engaging. The exception: scroll-triggered reveals can be slower (600–800ms) because the user controls the pace.

#### The Properties That Matter

**Always animate (GPU-accelerated, no jank):**
```css
transform: translateY(), scale(), rotate()
opacity: 0 → 1
filter: blur()
```

**Avoid animating (triggers layout recalculation):**
```css
width, height
margin, padding
top, left, right, bottom
font-size
```

Use `will-change` sparingly and only when you've measured the impact. It's a hint, not a magic fix. Overuse actually hurts performance.

#### Our Animation Stack

For most projects, we reach for:

- **CSS transitions**: for simple hover states and micro-interactions
- **Framer Motion**: for React-based orchestrated animations
- **GSAP**: for complex scroll-driven sequences and timeline control
- **Lenis**: for smooth scroll normalization

We avoid animation libraries that add more than 10KB to the bundle for simple effects. If a CSS transition can do the job, use it.

#### Real Example: Scroll-Triggered Reveals

The reveal pattern we use across most of our sites:

```css
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
```

Simple. Lightweight. No library needed. Combined with an Intersection Observer, it handles 90% of scroll-triggered animation needs.

#### Performance Is a Feature

An animation that causes jank is worse than no animation. Before shipping any animation:

1. **Test on a mid-range Android device**, not your M3 MacBook Pro
2. **Check the Performance tab** and look for long frames (>16ms)
3. **Verify compositor-only**: green indicators in the Layers panel
4. **Test with reduced motion** and respect `prefers-reduced-motion` always

We treat motion as a design material with the same rigor as typography or color. It has rules, it has a budget, and it should always serve the user first.

### AI Product Photography: What It Can and Can't Do

https://sylvastudio.com/blog/product-photography-ai

When clients first hear about AI product photography, they imagine robots replacing photographers. The reality is more nuanced, and more exciting.

#### What AI Does Well

- **Background generation**: place products in any environment instantly
- **Scene composition**: lifestyle contexts, seasonal themes, editorial setups
- **Lighting adjustments**: relight a product shot without reshooting
- **Batch variations**: 20 social-ready crops from one hero shot

Drop a clean product cutout into an AI-generated environment and you get campaign-ready visuals in minutes instead of days.

#### What AI Doesn't Do Well (Yet)

- **Capturing physical texture**: the sheen of metal, the weave of fabric, the way light catches glass
- **Precise product accuracy**: AI can hallucinate details, add buttons, change proportions
- **Color-critical work**: Pantone-accurate color matching still requires controlled lighting
- **Reflective surfaces**: mirrors, chrome, jewelry remain challenging

These still require a real camera and a skilled photographer.

#### The Hybrid Approach (What We Actually Use)

Our workflow:

```
1. Shoot the product ONCE with high-quality studio photography
   → Clean cutouts, multiple angles, detail shots

2. Use AI to generate environments
   → Seasonal campaigns, lifestyle scenes, social variations

3. Composite product into AI scenes
   → Match lighting, add shadows, color grade

4. One photoshoot → hundreds of outputs
```

This gives you the accuracy of real photography with the flexibility and speed of AI.

#### Cost Comparison

| Approach | 20 SKUs x 3 scenes each | Timeline |
|----------|------------------------|----------|
| Traditional only | $15,000–25,000 | 3–4 weeks |
| Hybrid (our method) | $5,000–8,000 + AI generation | 1–2 weeks |
| AI only (no real photos) | $500–2,000 | 2–3 days |

The math is compelling, but the speed advantage is even more significant. Seasonal campaigns that used to require months of planning can now be produced in weeks.

#### Prompt Tips for Product Photography

If you're experimenting with AI product shots yourself, here are prompts that consistently produce good results:

**For lifestyle context:**
```
[Product] placed on a marble countertop, soft morning light
from left window, minimalist Scandinavian kitchen background,
editorial product photography, shot on Phase One 80mm,
shallow depth of field, warm tones
```

**For e-commerce white background:**
```
[Product] centered on pure white background, soft even studio
lighting, no shadows, product photography, ultra sharp focus,
8K resolution, commercial photography style
```

**For seasonal campaigns:**
```
[Product] arranged with autumn leaves and warm textiles,
golden hour lighting, cozy atmosphere, overhead flat lay
composition, editorial style, soft shadows
```

#### When to Use What

**Use AI-only when:**
- Speed matters more than perfection
- The product is simple/geometric
- You need concept mockups before manufacturing
- Social media content at high volume

**Use hybrid when:**
- Product accuracy is critical
- You're building a brand's primary visual library
- The product has complex materials (glass, fabric, metal)
- Color accuracy matters (fashion, cosmetics)

**Use traditional only when:**
- Legal/regulatory compliance requires real photography
- Ultra-premium positioning demands tangible authenticity
- The product has never been manufactured yet (prototypes need real photos to verify)

The future isn't AI replacing photographers. It's AI multiplying what a single photoshoot can produce.

### Design Details That Actually Move E-Commerce Conversion

https://sylvastudio.com/blog/ecommerce-conversion-design

Everyone has opinions about e-commerce design. Most of them are recycled from the same blog posts. Here's what we've actually observed working with brands selling physical products online.

#### The Product Page Is Everything

Your product page does more work than your homepage. Treat it accordingly.

**The hierarchy should be:**
1. Product image (large, zoomable, multiple angles)
2. Price (clear, no hunting)
3. Add-to-cart button (visible without scrolling on mobile)
4. Everything else

Anything that pushes the buy button below the fold on mobile is costing you sales. We've seen conversion lifts of 12–18% just from restructuring the above-the-fold content on mobile product pages.

#### Photography Over Polish

We've seen plain white-background product shots outperform elaborately styled lifestyle images. Not always, but often enough that it's worth A/B testing.

**When clarity wins:** Functional products, tech, accessories, anything where the customer needs to see exact details before buying.

**When lifestyle wins:** Fashion, home decor, food. These are products where context and aspiration drive the purchase.

The takeaway: don't default to one approach. Test both and let the data decide.

#### Micro-Interactions Build Confidence

A subtle animation when adding to cart. A smooth transition when selecting a size. A gentle confirmation when a wishlist item is saved.

These small moments reduce the cognitive gap between browsing and buying. They make the experience feel responsive and trustworthy. Specific ones we always implement:

- **Add-to-cart:** Button state change + cart icon animation (150ms)
- **Size/variant selection:** Smooth image swap with crossfade
- **Wishlist save:** Heart fill animation with a subtle bounce
- **Stock urgency:** Gentle pulse on "Only 3 left" (not aggressive; builds urgency without feeling manipulative)

#### The Checkout Reality

Nobody reads your checkout page copy. They scan for:

1. **Total price** (including taxes)
2. **Shipping cost** (or "Free shipping," the most powerful two words in e-commerce)
3. **Payment logos** (trust signals)
4. **The button**

Design accordingly. Remove everything that isn't one of those four things and watch your completion rate improve.

#### Quick Wins We Implement on Every Project

- **Sticky add-to-cart on mobile**: always accessible as the user scrolls through product details
- **Progressive image loading**: blur-up placeholder so the page never feels empty
- **Smart defaults**: pre-select the most popular size/color variant
- **Exit-intent offers**: not popups, but a subtle sticky bar with a discount code
- **Real-time shipping estimates**: "Order in 2h 14m for next-day delivery"

We approach every e-commerce project with this mindset: measure what matters, design what converts, and test everything else.

### Why Every Startup Needs a Design System From Day One

https://sylvastudio.com/blog/design-systems-why

Startups move fast. That speed is an advantage. But without a design system, it also creates visual debt that compounds over time. Every screen built without shared guidelines means inconsistency, rework, and confusion for users.

#### What a Design System Actually Is

It's not a Figma library. It's a shared language: a set of decisions about color, typography, spacing, and interaction that your entire team agrees on. The Figma library is just one artifact of that language.

A design system includes:
- **Design tokens**: colors, spacing, typography values
- **Component patterns**: how buttons, inputs, cards behave
- **Usage guidelines**: when to use what and why
- **Code implementations**: the actual components your engineers ship

#### Start Small, Grow Intentionally

You don't need a comprehensive design system on day one. Start with the essentials:

```
Typography:    3–5 sizes (body, subtitle, title, display, caption)
Colors:        Primary, secondary, neutrals, semantic (error, success)
Spacing:       4px base grid (4, 8, 12, 16, 24, 32, 48, 64)
Components:    Button, input, card, modal
```

That's it. Build more as you need it. A design system that ships is infinitely more valuable than a comprehensive one that lives in a Figma file nobody opens.

#### The Compound Effect

Every component you define once saves hours of debate later. Every token you name removes a decision from future design reviews.

**Week 1:** You spend 4 hours setting up tokens and 3 base components.
**Month 3:** Every new page takes 40% less time because the foundations exist.
**Month 6:** A small design system has saved weeks of cumulative effort across design and engineering.

#### Common Mistakes We See

1. **Over-engineering too early.** You don't need dark mode, theming, and RTL support before you have 10 customers
2. **No single source of truth.** Design says one thing, code does another. Pick one system and sync them
3. **Treating it as a one-time project.** A design system is a living product. Budget time for maintenance
4. **Skipping documentation.** If someone can't use a component without asking you, it's not in the system yet

#### Tools That Work Well for Startups

- **Figma**: design side, component library with variants
- **Tailwind CSS**: token-based utility classes that map directly to design decisions
- **Storybook**: component documentation and visual testing
- **Style Dictionary**: design token management across platforms

The best time to start a design system is before you think you need one. We've helped startups set up lightweight systems that scale with them, and the compound returns are always worth the upfront investment.

### How to Make Your Brand Stand Out With AI Tools

https://sylvastudio.com/blog/brand-stand-out-ai

Every brand now has access to AI design tools, which means the bar for "good enough" has risen dramatically. The question isn't whether to use AI. It's how to use it in a way that makes your brand unmistakable.

#### The Problem With AI Design

Most AI-generated content looks the same. Same styles, same compositions, same aesthetic. When everyone uses the same prompts and tools, you get visual homogeny.

Standing out requires intentional creative direction.

#### Our Approach

We treat AI as a production tool, not a creative director. The creative vision comes from understanding the brand deeply: its values, its audience, its competitive landscape. AI then accelerates the execution of that vision.

##### 1. Define Your Visual DNA First

Before touching any AI tool, establish:

- **Your color system**: not just colors, but how they interact
- **Your typography personality**: bold and loud, or quiet and refined
- **Your composition rules**: centered and symmetric, or asymmetric and dynamic
- **Your photography style**: editorial, documentary, hyperreal

##### 2. Use AI for Variation, Not Creation

The best results come from using AI to create variations of a strong creative direction, not to generate the direction itself. Feed it references, constrain its output, and iterate within a defined visual lane.

##### 3. Edit Ruthlessly

AI will give you 100 options. Your job is to pick the 3 that actually feel like your brand and refine them further. Most teams skip this step and publish the first "good enough" output. That's how you end up looking like everyone else.

#### Build a Proprietary Prompt Library

One of the most underrated strategies is developing a proprietary prompt library. Generic prompts produce generic results. That's exactly why so many AI-generated assets feel interchangeable.

We work with each client to build curated prompt sets that encode their brand's specific aesthetic: the quality of light they favor, the textures and environments that reflect their identity, even the camera angles that feel right. Over time, this prompt library becomes a strategic asset. It ensures anyone on the team can produce on-brand visuals regardless of their AI experience.

Think of it as a style guide for the AI era.

**Example prompt structure we use:**

```
[Brand] product shot, [specific lighting style], [texture/material],
[color palette reference], [composition rule], [mood/atmosphere],
shot on [camera reference for aesthetic], --no [things to avoid]
```

#### Real Example: Differentiating in a Crowded Market

We worked with a wellness brand struggling to stand out in a saturated market where every competitor's social feed looked identical: soft pastels, minimalist layouts, the same stock-photo aesthetic.

**What we did:**
1. Identified visual territory no competitor had claimed
2. Developed a bolder color palette rooted in the brand's heritage
3. Combined it with textured, editorial-style compositions generated through AI
4. Introduced a signature use of natural shadow play that became instantly recognizable

**The result:** Within three months, social engagement increased significantly, and their audience began associating the distinctive visual style with quality and authenticity. AI handled the production volume. Creative strategy made every piece count.

#### The Human Element Will Always Matter

AI removes the tedious, repetitive parts of the production process so human creatives can focus on work that requires taste, judgment, and empathy. The strategist who understands *why* a certain visual tone resonates can't be replaced by a prompt. The designer who knows when to break a grid to create tension brings something no algorithm can replicate.

The future belongs to teams that treat AI as an amplifier for human creativity, not a substitute for it.

### How to Place Logos on AI-Generated Characters

https://sylvastudio.com/blog/logos-on-ai-characters

One of the most requested services we offer is placing brand logos on AI-generated characters. It sounds simple, but getting it right requires understanding light, fabric, perspective, and brand guidelines.

#### Why Brands Love This

Traditional merchandise photography requires physical samples (weeks to produce), models, photographers, multiple outfit changes. With AI characters, you can show a brand's logo on dozens of different people, in different settings, wearing different styles, all in a single day.

#### The Technical Process

##### 1. Generate the Base Character

Create diverse, photorealistic characters that match the brand's target audience. We use Midjourney and Flux for this step, with detailed prompts that control:

- Body type and posture
- Clothing style and fabric texture
- Lighting environment
- Camera angle and focal length

**Example prompt:**
```
Photorealistic portrait of a young woman wearing a plain black
oversized t-shirt, natural daylight, shot on Canon R5 85mm f/1.4,
shallow depth of field, neutral expression, urban rooftop setting
```

##### 2. Map the Logo Placement

Understanding how logos wrap around fabric is critical. A logo on a flat chest area behaves differently than one wrapping around a sleeve or sitting across fabric creases. We use Photoshop's warp tools and displacement maps generated from the garment's texture.

##### 3. Match the Lighting

The logo must look like it belongs on the garment, not pasted on top. This means:
- Matching the directional light source
- Adding appropriate shadow under the logo edges
- Adjusting brightness/contrast to match the fabric's exposure

##### 4. Color Accuracy

Logo colors render differently on dark vs. light fabrics, matte vs. glossy materials. We calibrate each placement to ensure the brand's exact colors come through accurately.

#### The Details That Separate Amateur From Professional

The difference comes down to **shadows and fabric interaction**. A logo on a t-shirt catches light differently than one on a hoodie. The fabric texture affects how the ink looks. A crease running through the logo should subtly distort it. These details are what make our mockups indistinguishable from real photography.

#### Use Cases

- **Social media campaigns**: diverse model representation without logistics overhead
- **E-commerce listings**: product mockups before manufacturing
- **Merch previews**: validate designs with your audience before printing
- **Pitch decks**: show investors the vision with photorealistic concepts
- **Brand explorations**: test logo placements across styles rapidly

#### Scaling Across Demographics

One of the most powerful advantages is representing diverse audiences without logistical complexity. A single brand can visualize merchandise on characters of different ages, body types, ethnicities, and styles, all within the same session.

This is especially valuable for brands expanding into new markets where local representation matters. Instead of coordinating photoshoots in multiple locations, generate culturally relevant mockups that resonate with each target audience.

#### Tools and Workflow

| Step | Tool | Purpose |
|------|------|---------|
| Character generation | Midjourney / Flux | Base character creation |
| Logo preparation | Illustrator | Clean vector + color variants |
| Placement & warp | Photoshop | Displacement maps, perspective |
| Refinement | Photoshop AI | Generative fill for edge blending |
| Batch processing | Custom scripts | Scale across multiple characters |

The financial case is compelling too. A traditional photoshoot for a merchandise line can easily reach five figures. Our AI mockup workflow delivers comparable quality at a fraction of that, and faster turnaround means products reach market sooner.

### How We Built a Website That Wowed the Client in 10 Minutes

https://sylvastudio.com/blog/website-in-10-minutes

Ten minutes. That's how long it took from opening our editor to showing the client a fully functional, beautifully designed website.

#### It Wasn't Magic, It Was Preparation

The 10 minutes was the visible part. Behind it was years of building reusable design systems, component libraries, and workflow automations.

When the client walked us through their brief, we already had:
- A component library with **200+ production-ready blocks**
- Brand tokens mapped and ready to apply
- Content structure templates for their industry
- Deployment pipeline that goes from code to live URL in 90 seconds

#### The Build (What We Actually Did)

**Minutes 0–3: Hero section**
Applied their brand colors, dropped in their logo, wrote the headline from the brief. Chose a hero layout from our library that matched their industry.

**Minutes 3–6: Content sections**
Assembled remaining sections from our library: about, services, testimonials, contact. Each section was already responsive, accessible, and optimized. Just needed content customization and spacing fine-tuning.

**Minutes 6–9: Polish**
Adjusted spacing rhythm, swapped placeholder images for brand-relevant ones using AI generation, tweaked the mobile breakpoints for their specific content lengths.

**Minute 10: Deploy**
Pushed to Vercel. Shared the live URL.

#### The Client's Reaction

They thought it was a pre-made template. When we showed them it was fully custom and every element could be modified, they were sold.

The lesson: **speed doesn't mean compromise.** It means being prepared.

#### The Design System Behind the Speed

What the client saw in those ten minutes was the tip of the iceberg. Underneath was a mature design system:

- Every component tested across browsers, screen sizes, and accessibility standards
- Typography scales with fluid sizing (`clamp()`) so text is sharp from mobile to widescreen
- Spacing tokens that ensure consistent rhythm without manual nudging
- Color tokens that can retheme an entire site by changing 4–5 variables

```css
/* A single theme change rebrands everything */
--color-primary: #2563EB;
--color-accent: #F59E0B;
--color-surface: #FAFAFA;
--color-text: #1A1A2E;
--radius: 12px;
```

#### Our Stack for Speed

| Layer | Tool | Why |
|-------|------|-----|
| Framework | Next.js | SSR, file routing, image optimization |
| Styling | Tailwind CSS | Token-based, no context switching |
| Components | Custom library | Battle-tested, accessible by default |
| CMS | MDX / Sanity | Depends on client needs |
| Hosting | Vercel | Instant deploys, edge functions |
| AI assist | Claude / Cursor | Code generation, content drafts |

#### Lessons for Teams Who Want to Build Faster

1. **Build a component library before you need one**, even if your next project doesn't require it
2. **Document your design decisions**, even when you're the only person on the team
3. **Create industry templates**: map common page structures for verticals you serve
4. **Automate the boring parts**: deployment, image optimization, SEO meta generation

The compound effect is staggering. Teams that build shared systems don't just move faster on individual projects. They free up creative energy for the work that actually requires original thinking.

### Campaign-Ready Mockups With AI: A Production Guide

https://sylvastudio.com/blog/campaign-mockup-with-ai

Creating production-ready mockups used to take weeks. Between coordinating photographers, sourcing props, booking studios, and post-production editing, the process was long and expensive. AI has compressed this entire pipeline into hours.

#### The Old Way vs. The New Way

**Traditional product mockups require:**
- Studio rental and setup
- Professional photography
- Post-production editing
- Multiple rounds of revisions
- 3–4 weeks turnaround

**AI-powered mockup generation:**
- Brand assets + campaign brief as input
- AI-generated photorealistic environments
- Real-time iteration and refinement
- 2–3 days turnaround

#### Our Process Step by Step

##### 1. Brand Asset Collection

We start with the brand's existing assets: the product, brand guidelines, and campaign brief. Clean product cutouts are essential. If you don't have them, a single studio session for cutouts is a worthwhile investment that pays for itself across dozens of AI-generated scenes.

##### 2. Environment Generation

Using tools like Midjourney, DALL-E, and custom-trained models, we generate photorealistic environments tailored to the campaign's mood. The key is **consistency**. Every mockup follows the brand's visual language: same lighting style, same color temperature, same composition rules.

##### 3. Compositing and Refinement

The product is placed into the generated scene with careful attention to:
- **Shadow matching**: the product must cast shadows consistent with the scene's light source
- **Reflection accuracy**: surfaces near the product should reflect it naturally
- **Color grading**: the product colors must remain true under the scene's lighting

##### 4. Batch Variation

Once one hero scene is approved, we generate 10–20 variations: different angles, seasonal adjustments, social-format crops. This is where AI speed really shines.

#### Real Numbers

For our most recent client, we delivered 47 campaign-ready mockups in under 3 days. The same scope would have taken 3–4 weeks with traditional methods. The client couldn't tell the difference between AI-generated and traditionally shot images. That's the standard we hold ourselves to.

#### Maintaining Brand Integrity at Scale

Without careful art direction, AI-generated visuals drift into generic territory fast. Every project begins with a deep-dive into the brand's existing visual assets. We study past campaigns, analyze their lighting setups, and map their color palette down to exact hex values.

The result is a set of custom generation parameters that act as guardrails, ensuring every mockup feels like a natural extension of the brand's existing work.

#### Tools We Recommend

| Tool | Best For | Price Range |
|------|----------|-------------|
| Midjourney | Scene generation, lifestyle contexts | $10–60/mo |
| DALL-E 3 | Product-in-context, clean compositions | Pay per use |
| Photoshop AI | Compositing, generative fill | $22/mo |
| Runway | Video mockups, animated reveals | $15–76/mo |

#### What's Next: Video and 3D

We're already experimenting with AI-driven video mockups, animated product reveals, and interactive 3D previews that brands can embed directly into digital campaigns. As these capabilities mature, the line between concept and finished asset will continue to blur.

The future of campaign production isn't about choosing between AI and traditional methods. It's about knowing when each delivers the best outcome and blending them seamlessly.