god-mode

Claude Design God Mode is a Claude Code plugin that turns Claude into a design director and design engineer. Point it at any website, CRM, SaaS app, landing page or browser game and it reads the project, scores the design, picks a direction that fits the product, and upgrades the look in place without breaking anything.

It combines the best ideas from the most-starred design skills on GitHub into nine short, focused skills. They are written to be lean so a full redesign stays well inside your usage limits.

AI agents: start here. Paste this repo link into Claude, ChatGPT or any coding agent and say "set this up for me". The agent guide walks you through it: AGENTS.md · llms.txt · Main skill

Before and after

One run of /design-god-mode:god-mode on a generic, template-looking CRM landing page. Same product, same sections, same facts.

Both pages are in examples/. Crewline is a made-up product used only for this demo.

What it does

• Reads the room. Works out the product, the audience, the stack and what must not change.
• Scores the design out of 100 across eight categories and lists the generic "AI look" tells it finds.
• Picks a direction that comes from the product's own world, not a default template.
• Upgrades in a safe order: colours and fonts first, then buttons and forms, then whole pages.
• Polishes and checks accessibility, phone layout, states and speed, then looks at the result.
• Reports the before and after score in plain words, plus anything you need to supply (photos, logo, facts).

%%{init: {'theme':'base','themeVariables':{'primaryColor':'#FFFFFF','primaryBorderColor':'#15212B','primaryTextColor':'#15212B','lineColor':'#56636E','fontFamily':'Public Sans, Segoe UI, sans-serif'}}}%%
flowchart LR
    A["You ask Claude to<br/>make the site look better"] --> B["Claude looks at<br/>your project"]
    B --> C["Design gets a<br/>score out of 100"]
    C --> D["A look is chosen<br/>that fits your business"]
    D --> E["Colours, fonts and<br/>buttons are upgraded"]
    E --> F["Pages are rebuilt<br/>section by section"]
    F --> G["Final check on<br/>phone and desktop"]
    G --> H["You get the new score<br/>and a short summary"]
    style A fill:#F5A30A,stroke:#15212B
    style H fill:#E3F1E8,stroke:#2F855A

The nine skills

Claude also picks the right skill on its own when you describe the job in plain words.

%%{init: {'theme':'base','themeVariables':{'primaryColor':'#FFFFFF','primaryBorderColor':'#15212B','primaryTextColor':'#15212B','lineColor':'#56636E','fontFamily':'Public Sans, Segoe UI, sans-serif'}}}%%
flowchart TD
    Q{"What kind of page is it?"}
    Q -->|"Selling or explaining<br/>(home page, pricing)"| L["Landing skill:<br/>bold first screen, clear offer"]
    Q -->|"Getting work done<br/>(CRM, dashboard)"| P["App skill:<br/>calm, fast, easy to scan"]
    Q -->|"Playing<br/>(game menus, score)"| G["Game skill:<br/>readable, punchy feedback"]
    Q -->|"Reading<br/>(docs, blog)"| R["Type and polish:<br/>comfortable to read"]
    style Q fill:#F5A30A,stroke:#15212B

Install

Claude Code (recommended). Run these inside Claude Code:

/plugin marketplace add F0rger123/CLAUDE-DESIGN-GOD-MODE

/plugin install design-god-mode@design-god-mode

Then open your website project and type:

/design-god-mode:god-mode make this site look premium

Any other agent (Codex, Cursor, Gemini CLI, Windsurf). Copy the skills/ folder into the project (for example .claude/skills/ or .agents/skills/) and point the agent at skills/god-mode/SKILL.md.

Built to stay inside usage limits

• Short skills. About 6,000 words across all nine skills and references. Some popular single design skills are twice that size on their own.
• Loads only what it needs. Each skill is read only when its step comes up. The colour, type and style tables load only during the direction step.
• A scanner instead of reading every file. slop-scan.mjs reads the whole codebase in one call and prints a 15-line summary of fonts, colours, radii, motion and template tells. No dependencies.
• System first. Tokens and shared components are changed before pages, so one edit fixes many screens.
• Looks twice, not twenty times. At most two screenshot rounds per page, with every fix from one look batched together.

node skills/audit/scripts/slop-scan.mjs path/to/your-site

Where the ideas come from

The rules here are rewritten and condensed, not copied. Credit to the projects that shaped them: