/looks-expensive

An AI coding skill that makes any website look like a $150k agency build. One command. Nine phases. Zero design team required.

Works with Claude Code, Cursor, and Codex.

What it does

/looks-expensive is a design methodology packaged as an AI skill. You run it, it walks you through nine gated phases, and the output is a production-grade website that looks like someone who knows what they're doing designed it.

It replaces the default AI behavior of producing generic SaaS templates with the same warm brown palette, three identical cards in a row, and "Get Started" on every button.

v1.0 — first stable release. After designers identified seven specific tells (excessive bullets, eyebrow-pill subheadings, identical card chrome, generic pricing tables, generic stat strips, lack of imagery, template skeleton) and an adversarial review surfaced the deeper structural fingerprint (fixed type scale, fixed hex tokens, fixed spacing scale, default 9-phase output shape), the skill was rebalanced to:

• Adds two new reference files: imagery.md (Picsum/Unsplash URL conventions, photography-mandatory categories, descriptive-seed rule) and non-card-patterns.md (9 alternatives to default cards: ledgers, definition lists, editorial rules, tables, inline pricing, single hero stats)
• Replaces the fixed H1: 40-72px type scale with per-project derivation (base body × ratio, documented in DESIGN.md)
• Replaces the literal #111111/#ffffff token defaults with OKLCH derived from brand hue — #000 and #fff literals are banned
• Replaces the fixed 4/8/12/16/24/32/48/64/80/96/120/160 spacing scale with per-project (base + rhythm character)
• Adds a scene sentence requirement to Phase 3 — one sentence describing physical scene of use, before theme/palette decisions
• Adds a distinctiveness check to the pre-output checklist: name 3 design decisions you would NOT make on the next brief
• Adds Phase 4 preventive gates for bullet budget, pricing plan declaration, stat pattern decision, containment variance plan, imagery URL list (with hard "no TBD" rule)
• Demotes bento from Pattern 1 with explicit "default zero, max one per page" guidance
• Caps bullets at 5 per page (including faux-bullet divs, not just <li>)
• Caps eyebrow pills at 1 per page (target zero)
• Caps default rounded-rectangle card chrome at 2 sections per page (visually defined, not pixel-defined)
• Requires real photography for hospitality, food, fashion, real estate, physical goods, services, agencies — gradient blob substitutes banned absolutely
• Counter animations made optional (often a tell, not mandatory)
• 54 anti-pattern checks, 7 new structural tells caught
• 8-item Anti-Template Mandate at the top of SKILL.md

For the iteration history before 1.0, see CHANGELOG.md.

Nine phases:

1. Position - Product interview. Establishes the taste filter before any visual work.
2. Research - Competitive analysis. Steal/Avoid lists from 10+ real products.
3. Contract - Generates a complete design system (DESIGN.md) with fonts, colors, spacing, motion, and section rhythm.
4. Specify - Full-page specs with hero pattern selection, section layouts, illustration plans, and responsive behavior.
5. Build - Implementation with 37+ anti-pattern checks, mandatory animations, and a pre-output checklist.
6. Subtract - Strips AI slop, decorative garbage, and unnecessary elements.
7. Audit - 6-category weighted grading with accessibility review and responsive verification.
8. Harden - Production readiness: overflow, i18n, error states, focus management, reduced motion.
9. Handoff - Structured document so anyone can continue the work.

Includes 10 reference files:

Before and After

Tempo (Async Video Messaging)

Without skill

With /looks-expensive

Vault (Cloud Security Platform)

Without skill

With /looks-expensive

More designs using the skill

Hale & Co (boutique real estate)

Ferment (brand strategy studio)

Who this is for

• Solo founders building landing pages without a designer
• Developers who can code but can't design
• Small teams that want agency-quality output from AI tools
• Anyone tired of AI producing the same generic SaaS template for every project

Install / Update

First-time install

One command. Auto-detects Claude Code, Cursor, and Codex, installs both skills (/looks-expensive and /looks-expensive-update) into every tool found, shows the version per tool.

curl -fsSL https://raw.githubusercontent.com/TuahaJawaid/looks-expensive/main/install.sh | bash

Update from inside your tool

Once installed, you never need to run a shell command again. Just type:

/looks-expensive-update

…inside Claude Code, Cursor, or Codex. The companion skill runs the installer for you, shows the version diff (e.g. v1.0.0 → v1.1.0), and prompts you to start a new session. The same one command updates the skill in every tool you have installed.

Update from the terminal

If you prefer, re-run the original install command anytime:

curl -fsSL https://raw.githubusercontent.com/TuahaJawaid/looks-expensive/main/install.sh | bash

It's idempotent — running on the latest version does a clean reinstall.

Audit before running (recommended)

curl -fsSL https://raw.githubusercontent.com/TuahaJawaid/looks-expensive/main/install.sh -o install.sh
less install.sh
bash install.sh

Manual install (no curl, no script)

git clone https://github.com/TuahaJawaid/looks-expensive.git
cd looks-expensive
bash install.sh

The local install.sh detects you've cloned the repo and uses the local copy instead of downloading.

Single-tool install

If you only want one of the three tools, manually copy:

# Claude Code
cp -r skills/looks-expensive ~/.claude/skills/looks-expensive

# Cursor
cp -r skills/looks-expensive ~/.cursor/skills-cursor/looks-expensive

# Codex
cp -r skills/looks-expensive ~/.codex/skills/looks-expensive

Uninstall

rm -rf ~/.claude/skills/looks-expensive ~/.cursor/skills-cursor/looks-expensive ~/.codex/skills/looks-expensive

Versioning

See CHANGELOG.md for what changed in each release. The current version is in the version: field of skills/looks-expensive/SKILL.md. The installer reads this field to show your old → new version.

How to use

1. Open a new session in Claude Code, Cursor, or Codex
2. Type /looks-expensive
3. Answer the positioning questions (product, audience, temperature, references)
4. The skill walks you through each phase with gates between them
5. Approve each phase's output before it moves to the next
6. End result: a production-grade website with a complete design system

You can also run it on an existing project to audit and improve the design.

What makes it different from /impeccable

Impeccable is an excellent design skill that this project learned from. The key differences:

• /looks-expensive is a methodology (9 sequential phases with gates). Impeccable is a toolkit (23 independent commands).
• /looks-expensive derives the entire design from product positioning. Font, color temperature, section layouts, hero pattern, illustration types, and animation tiers are all selected based on the product interview, not defaults.
• /looks-expensive includes research and competitive analysis phases before any design work begins.
• /looks-expensive has an anti-repetition system that prevents the AI from producing the same palette, fonts, and layouts across different projects.
• /looks-expensive packages UX writing rules, 15 section layouts, 12 hero patterns, and an illustration system into reference files loaded per-phase.

The 47 anti-pattern rules are extracted from impeccable's detection system and expanded with additional checks found during a 50-site stress test.

What inspired this

This skill was built by reverse-engineering how I actually design products. Over months of building Verdikt, I developed a specific process: competitive research before touching pixels, a design contract (DESIGN.md) as the single source of truth, full-page design passes instead of piecemeal patching, systematic audits with grading, and ruthless subtraction of AI slop.

The skills that shaped the methodology:

• Impeccable by Paul Bakaus - anti-pattern detection and the Brand/Product register concept
• Lazyweb - competitive research methodology and Steal/Avoid list format
• Linear, Eleven Labs, and Cursor's design systems - the "premium minimal" aesthetic standard
• Every time I told Claude "this looks like AI slop" and had to explain what to fix

Design principles baked in

• Color temperature is product-specific. A security tool gets cool grays. A food brand gets warm tones. Not everything is cream and brown.
• Sections must look different from each other. Never two consecutive sections with the same background. At least 3 different layout patterns per page.
• Animations are required, not optional. Button hover lift, scroll entrance, staggered reveals, and counter animations at minimum.
• No italics unless you ask. No monospace unless the product needs it. No gradients unless you ask.
• Accent color must be visible. On CTAs, pills, icons, and at least one tinted section. Not buried in a hover state.
• UX writing has rules. Headline: 6-10 words. CTA: 2-5 words. No "Get Started" on every button. No "revolutionary" or "cutting-edge."
• Typography is a product decision. The font is derived from the product's emotional temperature and audience, not picked from a default.
• Bento grids must actually be bento. If all cards are the same size, it's a regular grid. Real bento has cards spanning multiple columns or rows.
• No browser chrome dots. Red/yellow/green fake macOS window buttons are the #1 AI design tell. Banned everywhere.
• CSS mockups over gradient blobs. Section visuals should be product-relevant mockups (dashboards, code blocks, funnels), not anonymous gradient rectangles.
• Accent colors must be visible. Gray, slate, and near-black are not accent colors. If you can't distinguish the accent from the ink, pick a real color.
• Real photography for human/physical/lifestyle brands. Hospitality, food, fashion, real estate, agencies, services — these need <img> tags with Picsum or Unsplash URLs. A gradient blob where a hero photo should be is the loudest AI tell.
• Containment varies per section. The default rounded-rectangle-with-1px-border card appears in at most 2 sections per page. Other sections use ledgers, tables, prose, or full-bleed photography. Variance IS the design.
• Bullets are restricted. Maximum 5 total per page. Bullets are the lazy answer — ledgers, definition lists, and tables carry the same content better.
• No eyebrow-pill subheadings. Maximum 1 per page, ideally zero. The section heading does the work.
• No default 3-tier pricing tables. Use a real HTML table for multi-tier, or inline pricing for single-plan. The Free/Pro/Enterprise card-trio is the most overused SaaS pattern.
• Counter animations are optional, not mandatory. They're a tell on agency, hospitality, and editorial brands. Use only where the number IS the story.

File structure

skills/looks-expensive/
  SKILL.md                  # Main skill (v1.0.0) - phases, gates, checklists, laws
  reference/
    animations.md           # 3-tier animation system with variety requirements
    anti-patterns.md        # 47 deterministic anti-pattern checks
    bento-grids.md          # 5 bento patterns with exact CSS and spanning rules
    border-radius.md        # 4-32px system with element mappings
    css-mockups.md          # 8 CSS mockup patterns for section visuals
    hero-patterns.md        # 12 hero patterns with product-type selection
    icon-system.md          # Outlined, 0.8-1px stroke, sizing tiers
    illustrations.md        # 8 illustration types with rules
    section-layouts.md      # 15 layouts beyond "3 cards in a row"
    ux-writing.md           # Banned words, char limits, testimonial name bans

Contributing

Found a pattern that should be an anti-pattern? A section layout missing from the catalog? A hero pattern the skill doesn't cover? Open a PR.

The reference files are the easiest place to contribute. Each one is a self-contained guide that gets loaded during a specific phase.

License

MIT. See LICENSE.

Built by Tuaha Jawaid