Power Design
On-brand HTML decks and landing pages against 20 codified, numeric design rules
Test report
- Verdict
- Tested · Works
- Score
- Tested
- Jul 16, 2026
- Environment
- Claude Code 2.x (agent harness)
- Upstream re-checked
- Aug 10, 2026 · 0ef00a8
Task: a landing page for fictional fintech Ledgerly in Stripe brand, path B (websites) with brand from library. Ran both versions through a custom measurement script for 20 objective checks plus WCAG contrast calculation: baseline scored 1/20, SKILL.md version — 20/20. Baseline specifics: no skip-link, no semantic landmarks, no tokens in :root, no dark mode, no clamp(), no meta description/OG/JSON-LD, 14px input (mobile Safari zooms), tap targets less than 44px, placeholder instead of label — and three AA contrast failures: #777 on white 4.48:1, #999 on white 2.85:1, white on purple gradient 4.07:1. Plus baseline rolled out exactly the purple-gradient hero that the rulebook forbids as the first item. Skill version — 0 contrast failures (17.37:1 / 4.75:1 / 6.19:1), real Stripe tokens from brands/stripe/brand-style.md (#533afd, #061b31, weight 300 on display, blue-tinted shadow rgba(50,50,93,.25)). Claims from README were checked and confirmed: exactly 72 brand folders, 20+20 rules in TL;DR, all 21 images in place; but I did not check the firecrawl brand extraction path — a paid key is needed, and browser rendering is blocked in this environment, so the absence of horizontal scroll was only confirmed statically.
Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works
- Installs cleanly 5/5
- Triggers reliably 5/5
- Output vs. baseline 9/10
- Docs & honesty 5/5
What Power Design does
Generates self-contained HTML — presentation decks or responsive websites — in a brand's design language, combining a library of 72 pre-built brand systems (or Firecrawl-extracted brand DNA) with two rulebooks of 20 research-backed rules each carrying numeric thresholds. Triggers when you ask for a landing page, marketing site, or pitch deck that should look on-brand. Output is a single HTML file with semantic tokens, light/dark theming and a WCAG AA floor.
How to install Power Design
git clone https://github.com/ItsssssJack/power-design.git
mkdir -p ~/.claude/skills
cp -r power-design ~/.claude/skills/power-design
Skills live in ~/.claude/skills/ (global) or .claude/skills/
(per-project). Restart Claude Code after installing.
Commands — how to trigger Power Design
-
/power-designOn-brand HTML decks and landing pages against 20 codified, numeric design rules
It also activates on plain-language prompts like these:
-
Build a landing page for my fintech product using Stripe's brand style -
Generate a pitch deck in HTML that passes WCAG AA contrast checks -
Make an on-brand marketing site with dark mode and no purple gradient hero
Frequently asked questions
- Is the Power Design skill free?
- Yes. The skill itself is free from ItsssssJack/power-design. SkillProof publishes the install command and an independent test verdict at no cost.
- Does Power Design work with Claude Code?
- We tested it with Claude Code 2.x (agent harness) on Jul 16, 2026. Verdict: Tested · Works. Task: a landing page for fictional fintech Ledgerly in Stripe brand, path B (websites) with brand from library. Ran both versions through a custom measurement script for 20 objective checks plus WCAG contrast calculation: baseline scored 1/20, SKILL.md version — 20/20. Baseline specifics: no skip-link, no semantic landmarks, no tokens in :root, no dark mode, no clamp(), no meta description/OG/JSON-LD, 14px input (mobile Safari zooms), tap targets less than 44px, placeholder instead of label — and three AA contrast failures: #777 on white 4.48:1, #999 on white 2.85:1, white on purple gradient 4.07:1. Plus baseline rolled out exactly the purple-gradient hero that the rulebook forbids as the first item. Skill version — 0 contrast failures (17.37:1 / 4.75:1 / 6.19:1), real Stripe tokens from brands/stripe/brand-style.md (#533afd, #061b31, weight 300 on display, blue-tinted shadow rgba(50,50,93,.25)). Claims from README were checked and confirmed: exactly 72 brand folders, 20+20 rules in TL;DR, all 21 images in place; but I did not check the firecrawl brand extraction path — a paid key is needed, and browser rendering is blocked in this environment, so the absence of horizontal scroll was only confirmed statically.
- What is the Power Design SkillProof Score?
- 9.6/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 9/10, docs & honesty 5/5.
- How do I install Power Design?
- Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
- Can I use Power Design with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
- The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.