Skill · em Criar imagem, vídeo e arte

premium-web-design

Create premium, Awwwards-quality website designs as React (.jsx) components that look like they were built by a top-tier agency charging $50k+ per project. Use this skill whenever the user asks for a website, landing page, portfolio, or web component that should look expensive, premium, luxury,…

Procedência

Antes de instalar

1 arquivo · 59,4 KB · só texto, nenhum script

Instalar na sua CLI

O comando baixa a versão fixada (commit 57f899e) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.

Claude Code

Neste projeto: instala em .claude/skills/premium-web-design/.

d=".claude/skills/premium-web-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/premium-web-design"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.claude/skills/premium-web-design/.

d="$HOME/.claude/skills/premium-web-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/premium-web-design"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Codex

Neste projeto: instala em .agents/skills/premium-web-design/.

d=".agents/skills/premium-web-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/premium-web-design"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.agents/skills/premium-web-design/.

d="$HOME/.agents/skills/premium-web-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/premium-web-design"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Antigravity

Neste projeto: instala em .agents/skills/premium-web-design/.

d=".agents/skills/premium-web-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/premium-web-design"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Global: instala em ~/.gemini/antigravity-cli/skills/premium-web-design/.

d="$HOME/.gemini/antigravity-cli/skills/premium-web-design"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/creative-design/premium-web-design"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/LICENSE" "https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/LICENSE"

Peça ao Rook

Já usa o Rook Labs? Cole no chat do Rook: instale a skill https://rooklabs.sh/marketplace/cct.premium-web-design

Prévia do SKILL.md

---
name: premium-web-design
description: >
  Create premium, Awwwards-quality website designs as React (.jsx) components that look like they were built by a top-tier
  agency charging $50k+ per project. Use this skill whenever the user asks for a website, landing page, portfolio,
  or web component that should look expensive, premium, luxury, editorial, high-end, or agency-quality. Also trigger
  when the user mentions Awwwards, FWA, award-winning design, or references brands like Apple, Aesop, Bottega Veneta,
  Stripe, or any luxury/fashion/design-forward brand. Trigger when the user says things like "make it look professional",
  "make it look expensive", "I want it to look really good", "high quality design", "not generic", or expresses
  dissatisfaction with typical AI-generated website aesthetics. Do NOT trigger for dashboards, admin panels, internal
  tools, or functional UI where aesthetics are secondary to utility — the standard frontend-design skill handles those.
---

# Premium Web Design

Create React (.jsx) components that look like they belong on Awwwards — the kind of work that makes people ask "who designed this?" These are sites where every pixel is intentional, every animation is choreographed, and the overall impression is that serious creative talent and budget were involved.

## The AI Aesthetic Problem

Most AI-generated websites share a recognizable DNA. Avoiding it requires knowing exactly what it looks like.

### The Blacklist — Never Do These

**Typography sins**
- Inter, Poppins, Montserrat, Raleway, Space Grotesk, Outfit as primary fonts — these scream "AI template". (Note: *Inter Tight* is a separate font family with different metrics and is allowed.)
- Using one font family for everything
- Uniform font sizes with predictable hierarchy (64px → 32px → 18px → 14px)
- Default letter-spacing and line-height everywhere
- Centered text blocks everywhere, especially multi-line paragraphs

**Color sins**
- Purple-to-blue gradients (the single biggest AI design cliché)
- Indigo/violet as a primary brand color with no contextual reason
- White background + one accent color + gray text (the SaaS starter kit)
- Gradients on buttons or cards for no reason
- Using opacity or semi-transparent overlays as a substitute for real color choices
- Neon accent colors on dark backgrounds (the "developer portfolio" look)

**Layout sins**
- Hero → 3-column feature grid → testimonials → CTA → footer (the default SaaS landing page)
…

Ver todo o marketplace