Power Design

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).

748 stars 98 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add ItsssssJack/power-design --skill power-design

Manual install

git clone --depth 1 https://github.com/ItsssssJack/power-design.git /tmp/power-design
mkdir -p ~/.claude/skills
cp -r /tmp/power-design/. ~/.claude/skills/power-design

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 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.

### When the user pastes a URL

Read the full skill on GitHub

Details

Skill name: power-design
Repository: ItsssssJack/power-design
Repo updated: 10 August 2026

FAQ

What does the Power Design skill do?

How do I install the Power Design skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add ItsssssJack/power-design --skill power-design. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Power Design popular?

It lives in ItsssssJack/power-design, which has 748 GitHub stars and 98 forks.

Related skills

Color Expert

629

meodai/skill.color-expert

Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do not explicitly ask for "color theory.

Frontend & DesignIn 1 list39

Web Design

807

xiaopu-ai/web-design

Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词（任意组合），先产出一份标准化 DESIGN.md 设计规范，用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端：Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX 做一个""把这个截图/PRD 做成网页""做一个 landing page""出一份 design 规范"时触发。不用于后端、数据库、纯逻辑 bug 修复。

Frontend & Design81

Better Design

545

marvkr/better-design

Build, improve, and review production interfaces with the Better Design MCP. Use for frontend design, UI, UX, interactions, flows, forms, navigation, components, styling, design systems, accessibility, responsive layouts, motion, React Native, Expo, Shopify, Three.js, and product video work, especially when creating, redesigning, polishing, or reviewing an interface.

Frontend & DesignIn 1 list32

Bang Motion

780

bangtutorial/bang-motion

Membangun motion graphic sinematik di browser (promo video, opener, intro, bumper, kinetic typography, explainer/video penjelasan bergambar 16:9 atau 9:16) memakai HTML + CSS + GSAP (+ Three.js bila perlu), dengan hasil yang bergerak seperti video sungguhan — bukan slide presentasi. Gunakan skill ini setiap kali user meminta "video promo", "opener", "intro animasi", "motion graphic", "bumper", "kinetic typography", "animasi teks sinematik", "explainer", "video penjelasan" (jurnalisme visual, kartun edukasi, kolase), atau menunjukkan referensi video promosi/explainer dan ingin dibuatkan versi w

Frontend & Design120

Qiaomu Design

666

joeseesun/qiaomu-design

为页面、组件和产品界面提供设计诊断、四方向可视化预览、设计系统编译、实现与视觉 QA，也创作与修改微信公众号封面、B站封面、YouTube 缩略图、小绿书配图和小红书封面，按平台检查裁切与可读性。在用户要求从零设计、重设计、优化 UI/UX、审查界面、建立设计系统、参考某种风格，或创作公众号封面、设计公号头图、修改微信文章封面、制作 B站封面、YouTube 封面、小绿书配图、小红书配图时使用；不用于只改业务逻辑、纯文案润色或与界面无关的普通编码。默认由当前 Codex 直接执行，只有用户在当前任务明确点名 K3 时才调用外部模型。

Frontend & Design50

Director

841

s1dashu/director

导演并制作多类型视频，从创意、研究、剧本、视觉开发、人物与声音设计、分镜和生成 Prompt，一直推进到素材生成、任务追踪与交付。适用于 Storytime Animation、Animated Explainer 与 Cinematic Drama，三个 Mode 均已完成实际作品验证。尚未建立专属 Mode 的类型不得冒充已支持流程。

Frontend & Design110

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.