Vibe

vibe

Generate a complete, production-quality website from a description and deploy it live in seconds.

Requires the here-now skill. If ~/.agents/skills/here-now/scripts/publish.sh does not exist, tell the user: npx skills add heredotnow/skill --skill here-now -g

Workflow

Phase 0: Design Decision (BEFORE any code)

Read references/DESIGN_SYSTEM.md before generating anything.

Determine from the user's request:

1. Site type — Read references/SITE_TYPES.md and match the closest archetype. 2. Aesthetic direction — Pick ONE bold direction (do not default to "modern and clean"):

• Brutally minimal | Luxury/refined | Editorial/magazine | Brutalist/raw
• Art deco/geometric | Retro-futuristic | Organic/natural | Industrial/utilitarian
• Soft/pastel | Dark cinematic | Warm earthy | Monochrome high-contrast

3. Font pairing — Select from references/DESIGN_SYSTEM.md font pairings. NEVER use Inter, Roboto, Arial, or system-ui as the primary font. 4. Color palette — Choose a dominant color with one sharp accent. NEVER default to purple/indigo gradients. 5. Layout strategy — Break from the default hero > 3-column features > testimonials > CTA. Use asymmetry, overlap, grid-breaking elements, or unconventional section flow.

Present the design plan to the user in 2-3 sentences. Wait for approval before generating code.

Phase 1: Generate

Create a self-contained static site in a working directory (default: ./vibe-output/).

File structure:

vibe-output/
  index.html
  styles.css        (if CSS exceeds 50 lines)
  app.js            (only if interactive behavior needed)

For simple sites, a single index.html with embedded <style> and <script> is preferred.

Generation rules:

• Follow every rule in references/DESIGN_SYSTEM.md — no exceptions
• Use Google Fonts via <link> for distinctive typography
• Use CSS custom properties for all colors and spacing
• All images: use https://images.unsplash.com/photo-{id}?w={w}&h={h}&fit=crop with real Unsplash photo IDs or inline SVG illustrations
• Mobile-first responsive design with breakpoints at 768px and 1024px
• Include <meta name="viewport">, <meta charset="UTF-8">, proper <title>
• Semantic HTML: <header>, <main>, <section>, <footer>, <nav>, <button>, <a>
• Real content — never lorem ipsum. Generate realistic text appropriate to the site type
• Dark mode: include color-scheme: dark light and respect prefers-color-scheme

Phase 2: Review

Before deploying, verify against this checklist:

• [ ] No purple/indigo gradients as default palette
• [ ] No Inter, Roboto, Arial, or system-ui as primary font
• [ ] CSS custom properties defined for colors and spacing
• [ ] All interactive elements have focus-visible states
• [ ] Touch targets are at least 44x44px
• [ ] prefers-reduced-motion is respected
• [ ] No transition: all — list specific properties
• [ ] No <div onClick> — use <button> or <a>
• [ ] All images have explicit width and height
• [ ] Responsive at 375px, 768px, and 1024px widths

Fix any failures before proceeding.

Phase 3: Deploy

cd ./vibe-output && ~/.agents/skills/here-now/scripts/publish.sh .

Read stderr for publish_result.* fields. Example output:

publish_result.site_url=https://your-slug.here.now/
publish_result.auth_mode=anonymous
publish_result.expires_at=2026-02-27T00:00:00.000Z
publish_result.claim_url=https://here.now/claim?slug=your-slug&token=abc123

Report to the user:

• The live URL (always)
• "Expires in 24 hours" (only if publish_result.auth_mode=anonymous)
• The claim URL (only if publish_result.claim_url is non-empty and starts with https://)
• Warn: "Save the claim URL — it cannot be recovered"

Phase 4: Iterate

If the user requests changes: 1. Edit the files in ./vibe-output/ 2. Read .herenow/state.json to find the existing slug 3. Republish with --slug flag to update in place:

cd ./vibe-output && ~/.agents/skills/here-now/scripts/publish.sh . --slug {slug}

What to Tell the User

• Always share the live URL prominently
• Describe the design choices made (font, palette, layout) in 1-2 sentences
• If anonymous: mention 24h expiry and the claim URL
• Never expose .herenow/state.json paths or internal API details
• If the user wants permanent hosting: guide them through here.now API key setup (see here-now skill docs)

Anti-Patterns

Design System Reference

Rules for generating websites that look like a $2,000 freelance site, not AI slop.

Typography

Font Pairing Library

Pick ONE pairing per site. NEVER reuse the same pairing across consecutive generations.

Fonts marked with require self-hosting. For quick deploys, prefer Google Fonts alternatives.

BANNED Fonts (Never Use as Primary)

Inter, Roboto, Arial, Helvetica, system-ui, -apple-system, sans-serif (as sole declaration), Space Grotesk (overused in AI output), Poppins (overused in templates).

These may appear in fallback stacks only.

Typography Scale

Use a modular scale based on the context:

Compact (portfolios, dashboards): ratio 1.200 (minor third)

--text-xs:  0.694rem    /* ~11px */
--text-sm:  0.833rem    /* ~13px */
--text-base: 1rem       /* 16px */
--text-lg:  1.2rem      /* ~19px */
--text-xl:  1.44rem     /* ~23px */
--text-2xl: 1.728rem    /* ~28px */
--text-3xl: 2.074rem    /* ~33px */
--text-4xl: 2.488rem    /* ~40px */

Spacious (landing pages, marketing): ratio 1.333 (perfect fourth)

--text-xs:  0.563rem    /* ~9px */
--text-sm:  0.75rem     /* 12px */
--text-base: 1rem       /* 16px */
--text-lg:  1.333rem    /* ~21px */
--text-xl:  1.777rem    /* ~28px */
--text-2xl: 2.369rem    /* ~38px */
--text-3xl: 3.157rem    /* ~51px */
--text-4xl: 4.209rem    /* ~67px */

Typography Rules

• Body: 16-18px base, line-height 1.5-1.65
• Headings: line-height 1.1-1.25, letter-spacing -0.02em to -0.04em for large sizes
• text-wrap: balance on all headings
• font-variant-numeric: tabular-nums on number-heavy displays
• Maximum body line length: 65-75 characters (max-width: 65ch)
• Use font-display: swap on all @font-face or Google Fonts &display=swap

Color

Palette Construction

Define ALL colors as CSS custom properties on :root. Use the dominant + accent model:

:root {
  --color-bg: #faf9f6;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #6b6b6b;
  --color-primary: #2d5016;        /* dominant */
  --color-primary-light: #4a7a2e;
  --color-accent: #c44e1b;         /* sharp accent */
  --color-border: #e5e2dc;
}

BANNED Default Palettes

• Purple/indigo/violet gradients (the #1 AI tell)
• Tailwind default blue-500 as primary action color
• Any palette that is "evenly distributed" — one color MUST dominate
• Rainbow or multi-hue palettes without a clear hierarchy

Palette Strategies by Mood

Contrast Requirements

• Body text on background: minimum 4.5:1 (WCAG AA)
• Large text (24px+ or 19px bold): minimum 3:1
• Interactive elements: minimum 3:1 against adjacent colors
• Verify with: contrast-ratio = (L1 + 0.05) / (L2 + 0.05) where L1 > L2

Spacing

8px Grid

ALL spacing uses multiples of 8px. Define as custom properties:

:root {
  --space-1: 0.25rem;   /* 4px — line-heights only */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
}

Spacing Rules

• Section padding: var(--space-16) to var(--space-24) vertical
• Card padding: var(--space-6) to var(--space-8)
• Component gaps: var(--space-4) to var(--space-6)
• Inline element gaps: var(--space-2) to var(--space-3)
• Internal spacing < external spacing (Gestalt proximity)
• Container max-width: 1200px with side padding var(--space-6) minimum

Layout

Break the Template

NEVER default to the generic SaaS pattern. For each site type, design a layout that fits the content.

Layout techniques to use:

• CSS Grid with named areas for semantic structure
• Asymmetric columns (60/40, 70/30, not always 50/50)
• Overlapping elements with position: relative + negative margins
• Full-bleed sections alternating with contained sections
• Sticky elements for navigation or sidebars
• aspect-ratio for consistent media containers

Layout patterns to avoid:

• Three equal columns with icon + heading + text (the AI features grid)
• Perfectly centered everything with no visual tension
• Identical section rhythm top to bottom
• Cards all the same height with forced uniform content

Responsive Strategy

Design mobile-first. Three breakpoints:

/* Mobile: default (< 768px) */
/* Tablet: */
@media (min-width: 768px) { }
/* Desktop: */
@media (min-width: 1024px) { }

• Navigation: hamburger on mobile, horizontal on desktop
• Grid: 1 column mobile, 2 on tablet, 2-3 on desktop
• Font sizes: use clamp() for fluid scaling
• Touch targets: minimum 44x44px
• Side padding: minimum 16px on mobile, 24px on tablet, 48px+ on desktop

Animation

One Orchestrated Entry

Prefer a single page-load animation sequence over scattered micro-interactions:

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-in:nth-child(2) { animation-delay: 0.1s; }
.animate-in:nth-child(3) { animation-delay: 0.2s; }

Animation Rules

• Only animate transform and opacity (compositor-friendly)
• Duration: 150-300ms for UI transitions, 400-800ms for reveals
• Easing: cubic-bezier(0.16, 1, 0.3, 1) for enters, cubic-bezier(0.4, 0, 0.2, 1) for general
• NEVER use transition: all — list properties: transition: transform 0.3s, opacity 0.3s
• Always respect reduced motion:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Accessibility

Non-Negotiable Rules

• Semantic HTML elements (<button>, <a>, <nav>, <main>, <header>, <footer>)
• All interactive elements have :focus-visible styles
• NEVER outline: none without a visible replacement
• All images have alt text (decorative images: alt="" with role="presentation")
• Form inputs have associated <label> elements (not placeholder-only)
• Color is never the sole indicator of state (add icons or text)
• Skip link as first focusable element: <a href="#main" class="sr-only focus:not-sr-only">
• lang attribute on <html>
• Heading hierarchy: one <h1>, sequential <h2>-<h6>

Dark Mode

Implementation

:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0a0a0a;
    --color-surface: #1a1a1a;
    --color-text: #e5e5e5;
    --color-text-muted: #a0a0a0;
    --color-border: #2a2a2a;
    /* primary and accent may need lightened variants */
  }
}

• Add <meta name="theme-color" content="#faf9f6" media="(prefers-color-scheme: light)"> and dark equivalent
• Test all text against dark backgrounds for legibility
• Shadows: use inset or lighter opacity in dark mode
• Images: consider filter: brightness(0.9) on dark backgrounds

Images

Strategy

For quick deploys with no asset pipeline, use one of:

1. Unsplash direct URLs: https://images.unsplash.com/photo-{REAL_ID}?w=800&h=600&fit=crop

• ONLY use real Unsplash photo IDs that are known to exist
• Always include w, h, and fit=crop params

2. Inline SVG illustrations: Simple geometric shapes, patterns, or icons 3. CSS-only decorative elements: Gradients, shapes with clip-path, border-radius 4. No images: Typography-driven designs that don't need photos

NEVER use placeholder.svg, placeholder.com, or via.placeholder.com.

All <img> tags MUST have explicit width and height attributes. Below-fold images: loading="lazy". Hero images: fetchpriority="high".

Meta & SEO

Every generated index.html must include:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="{relevant description}">
  <meta name="theme-color" content="{bg-color}" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="{dark-bg-color}" media="(prefers-color-scheme: dark)">
  <title>{Site Title}</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family={fonts}&display=swap" rel="stylesheet">
</head>

Site Type Archetypes

Match the user's request to the closest archetype. Use the structure and content strategy as a starting point, then customize for the specific context.

Portfolio / Personal Site

Purpose: Showcase work, skills, and personality.

Sections:

• Hero with name, role, and one defining statement (not a paragraph)
• Selected work (3-6 projects with thumbnails or descriptions)
• Brief about section with a photo or illustration
• Contact: email link, social links, or simple form
• Optional: blog/writing section, timeline/experience

Design guidance:

• Let the work speak — minimal chrome, maximum content
• Personal sites should feel personal — inject personality into the copy
• Avoid the "developer portfolio template" look (dark bg, neon green, terminal font)
• Consider: editorial layout, magazine-style grid, or single-scroll narrative

Content density: Medium. Quality over quantity.

Landing Page / Product

Purpose: Explain a product and drive a single action (signup, download, purchase).

Sections:

• Hero with value proposition (one sentence), subheading, and CTA button
• Social proof (logos, numbers, or a single powerful testimonial)
• How it works (3-5 steps, not features)
• One feature deep-dive with visual
• Pricing or CTA repeat
• Footer with links

Design guidance:

• One CTA action per page — every section builds toward it
• Above the fold: value prop must be readable in 3 seconds
• Social proof works better as logos or numbers than as paragraph testimonials
• Pricing: if shown, make the recommended plan visually dominant

Content density: Low-medium. Breathing room. Every word earns its place.

Restaurant / Food Service

Purpose: Menu, hours, location, and reservation.

Sections:

• Hero with ambiance photo or food photography, name, tagline
• Menu highlights (not the full menu — 6-12 signature items)
• Hours and location with embedded map or address
• Reservation CTA or phone number
• Gallery (4-8 photos in a grid or carousel)
• Footer with address, phone, social

Design guidance:

• Photography-driven — food and ambiance carry the design
• Warm palettes: earth tones, cream backgrounds, rich accents
• Typography: pair a serif display with a clean sans body
• Avoid: flashy animations, dark techy aesthetics

Content density: Medium. Visual-heavy.

Event / Conference

Purpose: Date, location, speakers, registration.

Sections:

• Hero with event name, date, location, and register CTA
• Speakers/performers (grid with photos, names, titles)
• Schedule (timeline or table format)
• Venue info with map or directions
• Sponsors/partners (logo row)
• Registration CTA repeat

Design guidance:

• Date and location must be instantly visible
• Create urgency without being pushy
• Speaker photos should be consistent (same crop, same treatment)
• Consider: bold typography, high contrast, event-specific color theme

Content density: High. Lots of structured data.

Business / Professional Service

Purpose: Establish credibility and generate inquiries.

Sections:

• Hero with what you do and for whom
• Services (3-5 core offerings, not a laundry list)
• Results or case studies (numbers, outcomes)
• Team or about section
• Contact form or booking link
• Footer with credentials, certifications, address

Design guidance:

• Trust signals matter: real numbers, real names, real outcomes
• Conservative palette with one confident accent color
• Typography: clean, readable, professional (serif or refined sans)
• Avoid: stock photos of handshakes, "synergy" language, corporate buzzwords

Content density: Medium. Substance over flash.

Blog / Writing / Publication

Purpose: Read articles. Subscribe.

Sections:

• Header with publication name and navigation
• Featured article (large)
• Article grid or list (6-12 recent posts)
• Category/tag navigation
• Newsletter signup
• Footer with archives, about, social

Design guidance:

• Typography IS the design — invest in the reading experience
• Maximum line length: 65ch for body text
• Generous line-height (1.6-1.8 for long-form)
• Minimal distraction: no sidebars on article pages
• Consider: serif body font for long-form readability

Content density: High. Text-heavy by nature.

SaaS Dashboard (Preview/Demo)

Purpose: Show what the product looks like when in use.

Sections:

• Sidebar navigation (collapsible)
• Top bar with user info and search
• Main content area with cards, charts, or tables
• Optional: notification panel, activity feed

Design guidance:

• Use the compact typography scale
• Dense but organized — align to 8px grid strictly
• Neutral base palette with primary accent for actions
• Data visualization: simple bar/line charts with CSS or inline SVG
• font-variant-numeric: tabular-nums on all numbers

Content density: High. Information-dense by design.

Coming Soon / Pre-Launch

Purpose: Capture emails before launch.

Sections:

• Full-screen hero with product name and one-line description
• Email capture form (one field + submit)
• Optional: countdown, feature tease, social links
• Minimal footer

Design guidance:

• Single focus: the email field
• Dramatic visual: large typography, bold colors, or atmospheric image
• Minimal: this is NOT a full landing page
• Consider: dark background, centered content, type-driven

Content density: Minimal. One screen.

Documentation / Technical

Purpose: Find and read technical information.

Sections:

• Left sidebar with navigation tree
• Main content area with formatted text, code blocks, tables
• Optional: right sidebar with table of contents
• Search in header
• Breadcrumb navigation

Design guidance:

• Readability above all — clean type, generous whitespace
• Code blocks: dark background with syntax highlighting via CSS
• Navigation: always visible or easily accessible
• Use a monospace font for code: JetBrains Mono, Fira Code, or Source Code Pro

Content density: High. Reference-dense.