Professional web design with AI — the methodology that actually works.
npx skills add johnnichev/nv-design -g -yA skill that transforms AI from a "beginner intern" into a "senior design agency" by feeding it design systems extracted from source code instead of vague prompts or screenshots.
6 capabilities that take you from reference site to deployed landing page in 1-2 hours:
| # | Capability | Trigger | Time |
|---|---|---|---|
| 1 | Extract Design System | Have HTML, want visual DNA | 5-10 min |
| 2 | Recombine Design Systems | Mix 2-3 references | 10-15 min |
| 3 | Build Landing Page | DS + sections section-by-section | 60-90 min |
| 4 | Modernize Old Site | Preserve content, redesign visuals | 45-60 min |
| 5 | Image Prompts (7 Principles) | AI image generation | 5 min/image |
| 6 | Video/Media | Google Whisk + Flow | 10-20 min |
Methodology: Asimov Academy "Trilha IA Designer" — the "$1000 prompt" optimized through $1000+ in token testing.
"Bad models + right technique (Design Systems) > Good models + wrong technique (prompts/screenshots)" — Asimov Academy, Trilha IA Designer
You ask AI to build you a website. It produces:
| Symptom | Why It Happens |
|---|---|
| Purple/blue gradient everything | AI trained on internet average — most sites are simple |
| Generic, "clean" layouts | Models default to safe, minimal output |
| No animations or micro-interactions | Too abstract to generate from text prompts alone |
| Looks like a template | One-shot prompting gives one-shot results |
| Different every time you run it | Images/screenshots lose detail in token translation |
Elaborate prompts don't fix this. Neither do screenshots. Anthropic themselves published why AI struggles with front-end design — the training data is dominated by simple sites.
nv:design uses Design Systems as source code — the actual CSS classes, animations, keyframes, and component patterns from professional reference sites — to guide AI with perfect fidelity.
The methodology:
- Download a reference site you admire
- Extract its Design System using the battle-tested "Prompt de Mil Dólares" (a prompt optimized through $1,000+ in token testing)
- Recombine 2-3 design systems to create your own unique identity
- Build your site section-by-section, guided by the design system
- Deploy to Vercel/GitHub Pages in minutes
Result: Sites that look like they were built by a senior design agency. In 1-2 hours instead of weeks.
| Capability | Description |
|---|---|
| Extract Design System | Takes any HTML site and produces a design-system.html — the complete visual DNA (typography, colors, components, animations, layout patterns) |
| Recombine Design Systems | Mixes 2-3 design systems to create a unique hybrid identity |
| Build Landing Page | Constructs a professional site section-by-section (Hero → Features → Specs → CTA → Footer) using a design system as the source of truth |
| Modernize Existing Site | Redesigns an old site while preserving all content — extracts copy to intermediate file, rebuilds with new design system |
| Generate Image Prompts | Creates structured prompts using the 7 Principles framework (Subject, Action, Style, Scene, Color, Framing, Mood) for professional AI image generation |
Option 1: Skills CLI (recommended)
npx skills add johnnichev/nv-design -g -yOption 2: One-liner
mkdir -p ~/.claude/skills/nv-design && curl -sL \
https://raw.githubusercontent.com/johnnichev/nv-design/main/skills/nv-design/SKILL.md \
-o ~/.claude/skills/nv-design/SKILL.md && \
for f in extract-design-system recombine-design-systems build-landing-page modernize-site image-prompts; do \
mkdir -p ~/.claude/skills/nv-design/references && curl -sL \
"https://raw.githubusercontent.com/johnnichev/nv-design/main/skills/nv-design/references/$f.md" \
-o "~/.claude/skills/nv-design/references/$f.md"; \
doneOption 3: Clone
git clone https://github.com/johnnichev/nv-design.git
mkdir -p ~/.claude/skills/nv-design
cp -r nv-design/skills/nv-design/* ~/.claude/skills/nv-design/Then open any project and ask Claude:
Extract the design system from this site
Build me a landing page using this design system
Modernize this old website
I downloaded this reference site to ./reference/index.html
Extract its design system so I can use it to build my own site.
Claude reads the HTML, identifies all CSS/JS assets, and generates a design-system.html with:
- Hero section (exact clone with adapted text)
- Typography spec table (every heading, body, caption with exact CSS)
- Color & surface system (backgrounds, gradients, borders)
- UI components with all states (default, hover, active, focus)
- Layout patterns (grids, containers, spacing)
- Motion gallery (every animation class, live demos)
- Icon system (if present)
Use the design system we extracted to build a landing page for my SaaS product.
Start with the hero section — I want a parallax video background like Apple.
Claude builds section-by-section, never one-shot:
- Hero with parallax video, entrance animations, CTA
- Features section with cards and hover effects
- Technology/specs section with animated backgrounds
- Social proof with testimonials
- Pricing/CTA section
- Footer
Each section uses the exact CSS classes, animations, and patterns from your design system.
These are non-negotiable and apply to every capability:
1. Simplify instructions — One section at a time. Never generate an entire site in one prompt. AI gets lazy when asked to do too many things, cutting corners on the details that make a site look professional.
2. Simplify the stack — Plain HTML + CSS + JavaScript. No React, Next.js, or complex frameworks unless specifically needed. External libraries (GSAP, ScrollTrigger) via CDN are fine.
3. Patience with errors — AI models are stochastic. The same prompt produces different results each run. Errors are normal. Don't fight the AI — ask it to fix its own mistakes. Usually takes 2-3 iterations.
Every professional AI image prompt must address:
- Subject — Who/what, with specific physical details
- Action — What they're doing, natural and unstaged
- Style — Photographic style, camera, lens, finish
- Scene — Environment, what's NOT there, feeling
- Color — Palette AND lighting setup
- Framing — Camera angle, shot type, composition
- Mood — Emotional feeling to convey
nv:design encodes the complete Trilha IA Designer methodology from Asimov Academy, taught by Rodrigo Tadewald. The core technique — using source code as design reference instead of images or text — was discovered empirically and validated through the "Prompt de Mil Dólares" (StrackDesignSystemV2), which cost $1,000+ in token testing to optimize.
The methodology covers 5 courses, 38 lessons, and 5+ hours of content distilled into actionable skill instructions.
- Quickstart — 2-minute install and first design system
- Methodology — the full Vibe Design philosophy and workflow
- FAQ — common questions
skills/nv-design/
├── SKILL.md # Entry point — routing, universal rules
└── references/
├── extract-design-system.md # "Prompt de Mil Dólares" — DS extraction
├── recombine-design-systems.md # Creative DS recombination
├── build-landing-page.md # Section-by-section site building
├── modernize-site.md # Old site → modern redesign
└── image-prompts.md # 7 Principles image prompt framework
Progressive disclosure: SKILL.md loads first (~90 lines), reference files load only when the specific capability is triggered.
nv:design improves when practitioners share what works. Open an issue or PR with:
- Design system extraction edge cases
- Prompt improvements that produced better results
- New reference site patterns
- Industry-specific adaptations (e-commerce, SaaS, portfolio, etc.)
MIT
Built by johnnichev. Professional web design with AI.