03 · Apps · Workflows · Frontends
Three phases, one toolkit, a token economy that decides between success and money pit. Everything you need to ship your first product yourself.
We have no partnerships with the providers mentioned here. We recommend what we use ourselves.
Setup
Tools first, concept second. We go through the order we use ourselves — account, app, editor, repo, rules, skills, MCPs. An hour of setup, then never think about it again.
An Anthropic account with an active subscription is the baseline. One plan is enough — Pro to start, Max once you need longer sessions or more token budget. Without an active subscription there's no Cowork and no Claude Code.
Cowork lives as a third tab inside the Claude Desktop App — you don't need a separate app. In Cowork you describe what your product should do and the AI asks questions until the concept is solid. At the end you get a markdown file you hand to Claude Code in phase 2.
The build tool for phase 2. Two setup paths: terminal (maximum flexibility) or VS Code (code, terminal and Claude in one window) — the output is the same. Security tip: ideally work on a separate computer with no personal data on it. Claude Code gets full file access, so a clean separation matters.
npm install -g @anthropic-ai/claude-codeBackup after every sprint. API keys, internal notes and early architecture sketches stay locked down. Vercel and Netlify deploy directly from GitHub — so the workflow pays off twice.
git init
git remote add origin git@github.com:dein-user/dein-repo.git
echo ".env" >> .gitignoreEvery project folder gets a file called CLAUDE.md. It's the rulebook for your sessions. How you work, which stack you use, which mandatory checks (GDPR, performance, accessibility) always run, what's off-limits. Claude Code reads it automatically on every start. Without a CLAUDE.md the AI starts from zero each time.
Skills are folders with a markdown instruction file plus optional scripts. Claude loads them only when they fit the current task. Four skills are worth it from day 1: UI/UX Design (components, layouts, design tokens), Superpowers (planning, brainstorming, test-driven development), Code Review (a second pair of eyes before you commit) and Memory (CLAUDE.md maintenance and lessons-learned tracking across sessions).
/plugin install ui-ux-pro-max@anthropic
/plugin install superpowers@anthropic
/plugin install code-review@anthropic
/plugin install memory@anthropicMCPs (Model Context Protocol) give Claude access to your world — files, GitHub, database, browser. Three to start with: Filesystem (Claude builds in your project), GitHub (Claude becomes a team member), Context7 (current docs instead of stale hallucinations). Need a backend? Add Supabase (database, auth, storage). Tip: at project start, ask your planning session (Cowork or Superpowers) which MCPs your specific use case really needs — otherwise you accumulate things that don't do anything.
claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem /pfad/zum/projekt
claude mcp add --transport http github https://api.githubcopilot.com/mcp/ --header "Authorization: Bearer YOUR_GITHUB_PAT"
claude mcp add context7 --transport http https://mcp.context7.com/mcp --header "CONTEXT7_API_KEY: ctx7sk_..."
claude mcp add supabase -- npx -y @supabase/mcp-server-supabase --access-token YOUR_SUPABASE_PATB · Slash commands and modes
Slash commands clean up the context and steer Claude Code. Three modes decide how independently Claude works.
/clearClear the context between different tasks — saves tokens.
/compactSummarise the history when the session gets too long.
/debugSystematic debugging. Reproduce, hypothesise, test, propose a fix.
/planActivate plan mode. Claude analyses the task and writes a plan before coding.
/dreamBrainstorm and ideation mode. Claude thinks out loud with you without coding directly.
/initSet up a project, create CLAUDE.md, set defaults.
/rewindRoll back to an earlier state — restore a checkpoint.
/pluginInstall or manage a plugin, add an MCP server.
/usageCheck current token usage.
Claude researches and proposes a plan before code gets written. You read it, say „looks good“, then Claude starts.
When to use it: For anything that isn't trivial. Standard for every new feature.
Claude carries out a confirmed task directly without asking again. Step by step, with visibility into tool calls.
When to use it: When the plan is set and you just want the result.
Claude works through autonomously and doesn't ask in between. Riskier but faster.
When to use it: For clear, small tasks or when you need sprint power.
The three phases
Whether you build a web app, an iOS app or a small automation, the path is the same. You plan, you build, you test. We walk through it on our own tool, the KI-Bundestrainer, and you take the same three steps for your idea.
Tool · Claude Cowork
Tool · Claude Code
Tool · Browser, simulator, logs
Main tool: Claude Cowork.
You describe what your app should do and tell Claude to keep asking until the concept is solid. At the end Claude generates a markdown file with the finished concept. That's your briefing for the coding phase.
Default prompt for Claude Cowork (adapt and copy):
I want to build a [web app / iOS app / Android app].
It should have the following features:
[describe features here]
The target audience is:
[describe the target audience here]
Keep asking me questions about features, edge cases, and target audience until you fully understand the concept.
Also clarify the data and architecture side with me:
- Which data does the app store and process?
- Which of it is critical (sensitive, confidential, regulated — e.g. health, finance, personal notes)?
- Which data must WE own as the operator (server, database, backups)?
- Which data should belong exclusively to the user (local on device only, end-to-end encrypted, never on our servers)?
- Which software architecture fits (pure frontend app with local storage, backend with auth + database, E2E-encrypted sync …)?
Then build a markdown file with the finished concept that I can share with Claude Code in the next step.You don't need to code yourself today. A basic grasp of software architecture still pays off. The most interesting question is almost always: what actually happens to the data? Which ends up on your servers, which only on the user's device, which must never leave the browser?
Once you build an app that handles sensitive data (health, finance, journal, customer data), you make that architecture call consciously, before a single line of code gets written. That's exactly what the data block in the prompt above is for.
Your tool: Claude Code. Details on setup, slash commands and plan mode are in section B.
Workflow:
Default prompt for Claude Code (copy and paste):
Read the markdown file I placed in the project folder.
Based on this concept, build the application. If you have questions, please ask them before you start.
Please program the app in several sprints — we always do only one clearly scoped part at a time. At the end of each sprint, tell me what you built and what is next.
Important:
- Plan mode before every larger change. First the plan, then my confirmation, then the code.
- Actively raise the mandatory checks: GDPR, performance, multilingual support, accessibility.
- After each milestone, propose a commit command (private repo on GitHub).Up to here it's easy. You talk to the AI, say what it should do, and the AI handles the rest. Test and optimisation are the interesting part. Real problem-solving lives here. Does the UX hold up when a user does something unexpected? Does your tool give the answers it should, or is the model hallucinating? How much do the tokens cost per call?
The details on token economics, hallucinations and timeouts are in section G. Here are the typical questions that come up in this phase:
Skills
Skills are folders with a markdown instruction file plus optional scripts. Claude loads them only when they fit the current task. That keeps the context lean and makes recurring tasks reproducible.
Distinctions in one sentence:
claude mcp add <name>./plugin install <name>@<marketplace>.Where skills live: ~/.claude/skills/ (personal), .claude/skills/ (project-wide), or bundled inside a plugin.
Per card: what it does, install, example use case.
What · Analyses an existing codebase and recommends fitting hooks, skills, MCP servers and subagents.
Install
/plugin install claude-code-setup@claude-plugins-officialUse case: First session in a new repo. The skill suggests the right automations for your stack („you have Next.js + Supabase → install XYZ“).
What · Maintains and audits the CLAUDE.md project memory, captures lessons learned from each session.
Install
/plugin install claude-md-management@claude-plugins-officialUse case: After two or three weeks on the same project Claude starts to feel forgetful. The skill writes the key rules back into CLAUDE.md.
What · Anthropic skill for persistent memory across sessions. Stores decisions, lessons learned and project context.
Install
/plugin install memory@anthropicUse case: After each session Claude remembers on the next start what worked recently and which paths turned out to be dead ends.
What · Anthropic skill for UI/UX design — generates components, watches design-system consistency, typography, spacing and accessibility.
Install
/plugin install ui-ux-pro-max@anthropicUse case: You describe a section or component, the skill delivers production-ready code that actually looks designed.
What · UI/UX implementation — generates layouts, checks design consistency, builds components.
Install
/plugin install frontend-design@claude-plugins-officialUse case: You describe „a pricing page in bento-grid style“, the skill delivers production-ready React/HTML components with real design quality.
What · Full feature workflow with specialised agents for codebase exploration, architecture design and quality review.
Install
/plugin install feature-dev@claude-plugins-officialUse case: „I want to add multi-tenant support.“ The skill explores the codebase, proposes an architecture, implements, reviews.
What · Automated code review with multiple specialised subagents (security, tests, quality) running in parallel.
Install
/plugin install code-review@claude-plugins-officialUse case: You have a PR ready. /code-review runs multiple reviewer agents and returns a list of real issues.
What · Slash commands for git commit, git push and PR creation with clean messages.
Install
/plugin install commit-commands@claude-plugins-officialUse case: You've made ten changes and want to commit them cleanly. /commit writes the message, stages, commits — all in one step.
What · Pulls current, version-specific docs directly from source repos into the Claude context.
Install
/plugin install context7@claude-plugins-officialUse case: „How does the new server-components pattern in Next.js 16 work?“ context7 fetches the current docs instead of guessing.
What · Web search from inside Claude — researches current facts, checks claims against real sources, returns links. The best tool against hallucinations on current topics.
Install
/plugin install web-search@anthropicUse case: Current price of a model, fresh library version, is a claim still true? Instead of guessing, Claude searches and shows the source.
What · React-based programmatic videos — you code animations like a component and Remotion renders them to MP4. Good for tutorials, product demos, social clips.
Install
/plugin install remotion@claude-plugins-communityUse case: Onboarding video for your app: Claude builds the Remotion composition with text, motion and sound, you render the final product with one command.
What · Hook-based security warnings while editing. Warns about command injection, XSS, insecure patterns.
Install
/plugin install security-guidance@claude-plugins-officialUse case: You're building a form or an API endpoint. The hook reminds you of typical gaps — passively, without breaking your flow.
What · Helps you build your own skills, improve existing ones and test them with evals.
Install
/plugin install skill-creator@claude-plugins-officialUse case: You type the same instruction for the third time („format every input in our style“). skill-creator turns it into a reusable /format-input skill.
Official marketplaces
claude-plugins-official
Automatically available in Claude Code.
claude-plugins-community
Community marketplace, add manually.
/plugin marketplace add anthropics/claude-plugins-communityMCPs
At some point you want more than answers. You want Claude to touch your files, commit to your GitHub, query a database, take browser screenshots. That's what MCP is for — the Model Context Protocol. An open standard, a kind of universal connector for AI. Every MCP server exposes tools that the AI may use after you approve them.
Setup basics:
claude mcp add <name> ... to add, /mcp to manage.Per card: what it does, one-line setup, security note, link.
What · Controlled read/write access to specific local folders. The foundation for „Claude builds in my project“.
Setup
claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem /pfad/zum/projektSecurity: Whitelist only specific project folders. Never / or ~. Don't include .env, keys or SSH folders.
Repo / docsWhat · Read repos, create issues and PRs, write reviews, trigger actions. Claude becomes a team member.
Setup
claude mcp add --transport http github https://api.githubcopilot.com/mcp/ --header "Authorization: Bearer YOUR_GITHUB_PAT"Security: Use a fine-grained PAT, scoped to the repos Claude works in. Never commit the token.
Repo / docsWhat · Create and query tables, run migrations, edge functions and auth from Claude.
Setup
claude mcp add --transport http supabase https://mcp.supabase.com/mcp (OAuth-Login im Browser)Security: Never connect against production. Supabase explicitly recommends dev/staging projects. Set read_only=true and project_ref. The most common MCP disaster in 2025/26 was someone wiring the MCP to prod.
Repo / docsWhat · Browser automation and E2E tests. Claude can click around your own code in the browser, take screenshots and see errors.
Setup
claude mcp add playwright npx @playwright/mcp@latestSecurity: Default starts an isolated browser instance. Only share your own login sessions if you know exactly who you're giving them to.
Repo / docsWhat · Full access to Chrome DevTools. Performance profiles, network traces, console logs, Lighthouse.
Setup
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latestSecurity: If you attach to your normal Chrome session, Claude sees all your logged-in tabs. For sensitive logins use a debug profile instead.
Repo / docsWhat · Reads Figma files (components, variables, auto-layout) and gives Claude the design context to write real production code instead of LLM mockups.
Setup
claude plugin install figma@claude-plugins-official oder Dev-Mode-MCP in der Figma-Desktop-App aktivieren.Security: Only share files that should be shared — OAuth grants access to the whole workspace if you're not careful.
Repo / docsWhat · Gives Claude version-specific, current docs for libraries (React, Next.js, Tailwind …) to counter LLM hallucinations with outdated APIs.
Setup
Remote https://mcp.context7.com/mcp mit CONTEXT7_API_KEY: ctx7sk_..., lokal: npx -y @upstash/context7-mcp --api-key ctx7sk_...Security: Read-only. No risk beyond the API key.
Repo / docsWhat · Manage deployments, read logs, set env variables. Claude can deploy and debug on its own.
Setup
claude mcp add --transport http vercel https://mcp.vercel.com (OAuth-Login)Security: Check OAuth scopes. Grant access to production deployments deliberately.
Repo / docsWhat · Query error events, stack traces and performance issues. Claude sees what's crashing for your users.
Setup
claude mcp add sentry -e SENTRY_AUTH_TOKEN=... -- npx -y @sentry/mcp-serverSecurity: Scope the auth token to the project/org you need.
Repo / docsWhat · Stripe API (products, prices, customers, subscriptions, test charges) plus search in the Stripe docs. Build pricing, checkout and subscriptions from Claude.
Setup
claude mcp add --transport http stripe https://mcp.stripe.com (OAuth im Stripe-Dashboard)Security: Start strictly in test mode. Only release live keys once the flows hold up. Audit MCP sessions regularly in the Stripe dashboard.
Repo / docsWhat · Read and write Notion pages and databases. PRDs, specs, knowledge base without context-switching to a browser tab. Claude can, for example, read your current spec from Notion and put it into code.
Setup
claude mcp add --transport http notion https://mcp.notion.com/mcp (OAuth-Login im Browser)Security: Limit the OAuth scope to the workspaces you need. Exclude sensitive databases (HR, finance) in the setup.
Repo / docsWhat · Query or create issues, cycles and projects. Roadmap sync, bug triage and task updates straight from Claude. Useful for solo builds where issue tracking otherwise slips.
Setup
claude mcp add --transport http linear https://mcp.linear.app/sse (OAuth im Browser)Security: Start with read-only scope, only enable write rights once you know which workflows Claude is allowed to trigger.
Repo / docsWhat · Web search from inside Claude. Complement to the web-search skill: an MCP variant that returns structured search results and is easier to instrument for agent workflows.
Setup
claude mcp add brave-search -e BRAVE_API_KEY=... -- npx -y @modelcontextprotocol/server-brave-searchSecurity: Keep the API key in a .env, don't hardcode it. The free tier has a quota — don't run it in loops, otherwise rate limits hit.
Repo / docsWhat · OpenAI's coding agent as an MCP server. Claude can call Codex from the editor to have a second model review its own code — cross-model second opinions often catch blind spots that a single model talking to itself misses.
Setup
claude mcp add codex -- npx -y @openai/codex-mcpSecurity: Keep the OpenAI API key in .env, don't hardcode it. Code reviews are read-only operations, but each call costs against the key — check the quota first for loops or large diffs.
Repo / docsThey give the agent an unrestricted shell. Combined with prompt-injected input from the web, GitHub issues or mail, that's extremely risky. If at all: in an isolated VM, never on the main system.
Generic REST wrappers that allow arbitrary HTTP calls. They sound handy and are exactly the pattern that caused the Supabase demo data leak in 2025.
Even the official MCP is dangerous when you hook it up to the live prod DB. Dev project, read_only=true, project_ref set to dev.
General rule:
Don't install an MCP without thinking for 30 seconds about the blast radius. If a malicious string from a webpage or an issue lands in the agent unfiltered — what can the MCP do in the worst case?
Vibe coding tools
Because it burns token money you don't need to spend. Vibe-coding builders get you to 70 percent — the last 30 percent (auth flows, custom logic, security) you pay in credit loops that escalate fast. With Claude Code it's cheaper, and there are still good products out there.
The tool cards — Lovable, Bolt, v0, Rork, Replit, Cursor, Figma Make — live on the tools page, with pricing, strengths and weak spots. That's where they belong.
Go to the tool cardsD · Connection tools
Backend, AI connection, hosting, automation — depending on the product type. One recommendation per area plus a note on when you really need it.
Supabase
When: As soon as your app stores data: logins, profiles, posts, caches.
Postgres + auth + storage + edge functions in one. EU region in Frankfurt. The free tier covers your first projects.
Anthropic API · OpenAI · Google Gemini
When: When your product calls AI (not just the coding AI).
Call it through a backend proxy, never directly from the frontend. API keys as environment variables, not in code.
Vercel
When: When your web app should go online.
Connect a GitHub repo, push, automatic deploy. Your own domain in 5 minutes. Edge functions included.
n8n · Make · Zapier
When: For workflows between tools — without your own app.
n8n self-hosted for cheap, predictable costs. Make for visual mid-market workflows. Zapier for maximum simplicity.
Token economics & scaling
Cheap to build is one thing. Running the tool long-term without the bill crushing you is another. Tokens are the operating cost of your AI app. If you don't control models, caching and pre-computation, the first viral day turns into a money pit.
Projection: 100,000 users × 2 generations × 16,000 tokens on a premium reasoning model. Result: around 156,000 USD per day. After the four levers below we were at around 65 USD per day. A reduction of −99.96 percent.
The four levers at a glance
From 156,000 USD/day to around 65 USD/day. The four levers stacked on top of each other:
| Lever | What happens | Effect |
|---|---|---|
| 1 · Model choice | Switch from Opus 4 to GPT-4o-mini | −95% model cost |
| 2 · Pre-computation | Research data once, store it in the DB | −98% web search |
| 3 · Caching | Repeats from cache instead of recomputing | ≈ −65% requests |
| 4 · Max-tokens cap | Hard limit on output length | −30% latency |
First · What you can do while building
Token optimisation doesn't start with model pricing. It starts with how you work with Claude Code. Three levers that take effect immediately, before you touch a single line of model logic:
Premium reasoning models (Claude Opus, GPT-4) are too much for most use cases when you make structured decisions from a predefined pool. Switch to stats-optimised classes (GPT-4o-mini, Claude Haiku 4.5) and you pay sub-cent per call instead of multiple cents.
Model table (pricing bars relative to Opus 4 = 100%):
| Model | Input · 1M tok | Output · 1M tok | Output relative | Notes |
|---|---|---|---|---|
| Claude Opus 4 | 15 USD | 75 USD | 100 % | Top quality, often too expensive for structured picks |
| GPT-4 (Classic) | 30 USD | 60 USD | 80 % | Overkill when you only pick from a pool |
| Claude Haiku 4.5Our pick | 1 USD | 5 USD | 7 % | Our pick for texts with tone — best voice quality at sub-cent |
| OpenAI GPT-4o-miniOur pick | 0,15 USD | 0,60 USD | 0,8 % | Our pick for structured tasks — JSON, classification, picks |
| DeepSeek V3 | 0,27 USD | 1,10 USD | 2 % | German generation: weak, especially in style/satire registers |
| Qwen 2.5 72B | 0,35 USD | 0,40 USD | 0,6 % | German generation: weak in non-neutral registers |
| Gemini 2.0 Flash | 0,10 USD | 0,40 USD | 0,5 % | Very cheap but schema fails on strict JSON requirements |
List prices rounded. Chinese models are nominally cheap but unusable for German generation in certain registers (e.g. satire). The word choice slips into generic fast.
Practice tip: Use models in parallel. On the KI-Bundestrainer we use Anthropic for texts with style (satire, opinion pieces) and OpenAI for structured tasks (squad selection). That saves money and gives each use case the right tool.
Data that rarely changes you research once and store in a database. When generating, the AI only reads from there instead of searching again on every call. Live data you pull in larger intervals (e.g. once per day), not per user request.
Example: On the KI-Bundestrainer we researched the 108 candidates once. Current form, injuries and opponent analysis we fetch once per World Cup match.
Effect · −98 percent web search cost.
When two users ask the same thing, the AI shouldn't compute twice. Save the inputs plus the result on every request. On a repeat you serve the cached result instead of running the AI again.
Effect · Around 65 percent of requests drop entirely, more depending on the use case.
Bonus: prompt caching at the provider
Prompt caching at the provider. Both Anthropic and OpenAI cache recurring prompt parts (system prompts, fixed instructions) automatically. Cache hits cost roughly a tenth of the normal input price at Anthropic — up to 90 percent savings. Build your prompt so the stable part comes first and the variable user input comes last.
Models often allow „up to 16,000 output tokens“ and use it as a free pass to think out loud, even when the output would be much shorter. Set a hard cap (e.g. 7,000). The model reads that as a budget signal and shortens automatically. No quality loss because the real output volume usually sits below.
Effect · −30 percent latency, fewer timeouts as a side effect.
Advanced
Four concepts you don't need from day 1, but they sharpen your setup once you build regularly.
Plugins bundle skills, subagents, hooks and MCP servers into one package. Install via /plugin install [name]@[marketplace]. Marketplaces are repos on GitHub you add as a source. That's how you pull complete workflows with one command.
Hooks are small automations that fire on specific events — before or after a tool call, before a commit, when a file is edited. You use them to enforce behaviour you'd otherwise trigger by hand („run tests before every commit“, „show a security warning when editing an auth file“).
Permissions define what Claude can do without asking and what it can't. Three levels: allow, ask, deny. Important as soon as the AI runs on its own (auto mode, subagents, hooks). Defaults are safe, but you can tighten them per project — e.g. filesystem writes only in specific folders, no shell commands without confirmation.
The Agent SDK is how you put Claude directly into your finished product. The console tool becomes an agent that lives in your app. You build your own tools, define system prompts, give the agent access to your database — and end users talk to Claude through your interface instead of the console.
Your build challenge
You only understand AI by using it yourself. A small tool, a weekend experiment, an internal script. Doesn't matter. You don't need to become a techie. You just need to have started once.
Pick a form: web app, iOS app, small automation or workflow. Walk through the three phases from section A — planning with Claude Cowork, coding with Claude Code, testing in the browser or simulator. Block off a weekend. You'll be surprised how far you get.
Recommendations for this topic
Creators and newsletters that fit this cluster thematically. Outside voices, curated by us.
Out in front on building with Claude Code. Deep practical insights and his own academy (SKAILE) for everyone who's serious about building software with AI.
On to the next station
Build automation with AI
Plan workflows, then ship them with Claude Code. n8n + Hetzner — cheap, fast, yours.