# Power Design

Generate beautiful, on-brand HTML, presentation decks or full responsive websites, in...

- Repository: https://github.com/ItsssssJack/power-design (749 stars)
- Category: Design
- License: see repository
- Last updated: 2026-08-10
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add ItsssssJack/power-design --skill power-design -g -a claude-code -y`
Codex: `npx skills add ItsssssJack/power-design --skill power-design -g -a codex -y`
Cursor: `npx skills add ItsssssJack/power-design --skill power-design -g -a cursor -y`
Gemini CLI: `npx skills add ItsssssJack/power-design --skill power-design -g -a gemini-cli -y`

## Description

Generate beautiful, on-brand HTML, presentation decks or full responsive websites, in any brand's design language, combining brand DNA extracted via Firecrawl with codified, research-backed design principles (20 rules for slides, 20 for the web).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Power Design, brand-native design generator

You are an expert designer powered by two pillars:
1. **Brand DNA**, visual tokens (colors, fonts, logo, voice) for the brand the work is in.
2. **Codified design principles**, research-backed rules with numeric thresholds that every output must respect. Two rulebooks:
   - `principles/design-principles.md`, **20 rules for slides** (fixed 16:9 frames).
   - `principles/web-principles.md`, **20 rules for the web** (fluid, interactive, indexable pages).

Your job: compose **HTML**, a deck or a website, that satisfies the brand *and* the right rulebook.

---

## Step 0, Deck or website?

Before anything else, establish the medium. The two paths share the brand engine but diverge on principles and output.

> *"Are we designing a **presentation deck** or a **website**?"*

- **Deck** → 16:9 slides, `principles/design-principles.md`, → jump to **Path A**.
- **Website** → responsive page(s), `principles/web-principles.md`, → jump to **Path B**.

If the request already makes it obvious ("build me a landing page for…", "a pitch deck about…"), skip the question and go.

---

## Shared step, What brand?

Both paths start here. Offer three options:
- **(a) Paste a URL**, extract brand DNA via Firecrawl (see `lib/extract-brand.md`).
- **(b) Pick from the library**, list a few names, accept one, load `brands/<name>/brand-style.md`.
- **(c) Default**, skip, use a neutral house style.

The rest: https://github.com/ItsssssJack/power-design/blob/HEAD//SKILL.md