Øg dit Claude Code output med de her AI-værktøjer

Claude Code er Anthropics CLI-værktøj til AI-assisteret kodning. Det er herfra du styrer alle MCP-serverne og skills.

npm install -g @anthropic-ai/claude-code
claude

Kør claude i dit projekt-directory for at starte.

Google Stitch lader dig generere UI-mockups fra tekst-beskrivelser. Perfekt til at sætte den visuelle retning inden du begynder at kode.

# Tilføj i .claude/settings.json:
{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/stitch-mcp@latest"],
      "env": {
        "STITCH_API_KEY": "<din-api-nøgle>"
      }
    }
  }
}

Opsæt din konto på stitch.withgoogle.com.

Derefter kan du bede Claude Code: "Lav et mockup af en landing page med dark theme og amber accent" — og den genererer et visuelt udkast den selv kan bruge som reference.

Nano Banana bruger Geminis image-generation API til at lave ikoner, logoer og assets direkte fra terminalen.

# 1. Hent en Gemini API-nøgle fra:
#    https://ai.google.dev/gemini-api/docs/api-key

# 2. Tilføj den til dit miljø:
echo 'export GOOGLE_API_KEY="din-nøgle"' >> ~/.bashrc
source ~/.bashrc

# 3. Opsæt Nano Banana:
python3 -m venv ~/nano-banana-venv
source ~/nano-banana-venv/bin/activate
pip install google-genai Pillow

# 4. Hent generate.py scriptet og læg det i ~/nano-banana/

# 5. Opret Claude Code skill:
mkdir -p ~/.claude/skills/generate-image

Opret filen ~/.claude/skills/generate-image/SKILL.md:

---
name: generate-image
description: Generate images using Nano Banana 2.
argument-hint: [prompt]
---

Generate an image:

```bash
source ~/.bashrc && ~/nano-banana-venv/bin/python \
  ~/nano-banana/generate.py "PROMPT" \
  -o output.png -m flash -s 1K
```

Options: -m flash|pro, -r 1:1|16:9|9:16,
         -s 512|1K|2K|4K

Nu kan du sige: "Generer et logo til mit projekt" — og Claude Code kalder skillen automatisk.

Denne skill giver Claude Code en komplet design-database med styles, farvepaletter, font-pairings og UX-retningslinjer. Den kan køre automatiseret design-review der fanger tilgængelighedsfejl og designproblemer.

# Klon skill'en:
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill \
  .claude/skills/ui-ux-pro-max

Claude Code finder den automatisk. Prøv: "Lav en design-review af hele projektet" — den tjekker kontrast, spacing, hover-states, tilgængelighed og mere.

21st.dev er et bibliotek af færdige UI-komponenter. MCP-serveren lader Claude Code søge og hente komponent-kode direkte.

# I Claude Code, kør:
/install-mcp 21st-magic

# Eller tilføj manuelt i .claude/settings.json:
{
  "mcpServers": {
    "21st-magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest"],
      "env": {
        "TWENTY_FIRST_API_KEY": "<din-api-nøgle>"
      }
    }
  }
}

Hent din API-nøgle på 21st.dev. Prøv: "Søg 21st.dev efter en floating navbar komponent".

Når alle værktøjer er sat op, er workflow'et:

Det vigtigste take-away: AI'en erstatter ikke din smag. Den erstatter tastaturet. Flaskehalsen rykker fra "kan jeg bygge det her?" til "ved jeg hvad godt ser ud?"