[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-11150":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":9,"languages":9,"totalLinesOfCode":9,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":14,"stars7d":15,"stars30d":16,"stars90d":13,"forks30d":13,"starsTrendScore":17,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":9,"pushedAt":9,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":13,"starSnapshotCount":13,"syncStatus":12,"lastSyncTime":27,"discoverSource":28},11150,"power-design","ItsssssJack\u002Fpower-design","ItsssssJack","A Claude skill for slides that don't look like AI made them. Brand DNA × 20 codified design principles.",null,361,45,2,0,14,35,154,42,4.99,"Other",false,"main",true,[],"2026-06-12 02:02:29","\u003Cdiv align=\"center\">\n\n\u003Cimg src=\"principles\u002Fimages\u002Fcta-go-deeper.png\" alt=\"Power Design\" width=\"720\">\n\n# Power Design\n\n### A Claude skill for slides that don't look like AI made them.\n\n**Brand DNA × 20 codified design principles → beautiful HTML decks, on demand.**\n\n[**See the principles →**](https:\u002F\u002Fpower-design.vercel.app) ·\n[**Join the community →**](https:\u002F\u002Fbit.ly\u002F3PATPoL)\n\n\u003C\u002Fdiv>\n\n---\n\n## What it does\n\nPower Design is a Claude Code skill that combines two things every other AI deck generator misses:\n\n1. **Brand DNA** — extracted live from any URL via Firecrawl, or picked from **72+ pre-built brand systems** (Stripe, Apple, Linear, Spotify, Vercel, Notion, Tesla, Airbnb…)\n2. **20 codified design principles** — pulled from Tufte, Reynolds, Duarte, Williams, Refactoring UI, Müller-Brockmann, Mayer, WCAG 2.2\n\nThe result: every deck is both on-brand and objectively well-designed. No purple gradients. No six-bullet hero slides. No drop shadows on bars.\n\n---\n\n## The 20 rules, illustrated\n\nEvery slide passes the same 20 checks. **[Read the full field manual →](https:\u002F\u002Fpower-design.vercel.app)**\n\n\u003Cdiv align=\"center\">\n\n\u003Cimg src=\"principles\u002Fimages\u002Frule-01-one-idea.png\"      width=\"180\"> \u003Cimg src=\"principles\u002Fimages\u002Frule-02-glanceable.png\"    width=\"180\"> \u003Cimg src=\"principles\u002Fimages\u002Frule-03-chunks.png\"        width=\"180\"> \u003Cimg src=\"principles\u002Fimages\u002Frule-04-whitespace.png\"    width=\"180\">\n\u003Cimg src=\"principles\u002Fimages\u002Frule-05-safe-zone.png\"     width=\"180\"> \u003Cimg src=\"principles\u002Fimages\u002Frule-06-modular-scale.png\" width=\"180\"> \u003Cimg src=\"principles\u002Fimages\u002Frule-07-type-sizes.png\"    width=\"180\"> \u003Cimg src=\"principles\u002Fimages\u002Frule-08-body-size.png\"     width=\"180\">\n\u003Cimg src=\"principles\u002Fimages\u002Frule-09-line-height.png\"   width=\"180\"> \u003Cimg src=\"principles\u002Fimages\u002Frule-10-line-length.png\"   width=\"180\"> \u003Cimg src=\"principles\u002Fimages\u002Frule-11-contrast.png\"      width=\"180\"> \u003Cimg src=\"principles\u002Fimages\u002Frule-12-color-split.png\"   width=\"180\">\n\u003Cimg src=\"principles\u002Fimages\u002Frule-13-one-accent.png\"    width=\"180\"> \u003Cimg src=\"principles\u002Fimages\u002Frule-14-no-hue-only.png\"   width=\"180\"> \u003Cimg src=\"principles\u002Fimages\u002Frule-15-grid.png\"          width=\"180\"> \u003Cimg src=\"principles\u002Fimages\u002Frule-16-alignment.png\"     width=\"180\">\n\u003Cimg src=\"principles\u002Fimages\u002Frule-17-proximity.png\"     width=\"180\"> \u003Cimg src=\"principles\u002Fimages\u002Frule-18-data-ink.png\"      width=\"180\"> \u003Cimg src=\"principles\u002Fimages\u002Frule-19-f-pattern.png\"     width=\"180\"> \u003Cimg src=\"principles\u002Fimages\u002Frule-20-two-modes.png\"     width=\"180\">\n\n\u003C\u002Fdiv>\n\n| # | Rule | Source |\n|---:|---|---|\n|  1 | One idea per slide | Reynolds; Duarte |\n|  2 | Glanceable in ≤3 seconds | Duarte; NN\u002Fg |\n|  3 | ≤7±2 visual chunks; ideal 3–5 | Miller 1956; Cowan 2001 |\n|  4 | ≥40% whitespace ratio | Refactoring UI; Reynolds |\n|  5 | 5% edge safe-zone, all sides | Broadcast title-safe |\n|  6 | Type on a modular scale (1.25–1.618) | Tschichold; Bringhurst |\n|  7 | Maximum 4 type sizes per slide | Refactoring UI |\n|  8 | Body ≥24px, title ≥48px | Reynolds; Duarte |\n|  9 | Line-height 1.4–1.6 body, 1.05–1.2 display | Butterick; Bringhurst |\n| 10 | Line length ≤60 characters | Bringhurst |\n| 11 | WCAG contrast ≥4.5:1 body, aim 7:1 (AAA) | WCAG 2.2 |\n| 12 | 60-30-10 color split | Itten; Refactoring UI |\n| 13 | One accent per slide | Tufte |\n| 14 | Never encode meaning by hue alone | WCAG 1.4.1 |\n| 15 | 8pt grid for all spacing | Bryn Jackson; Material |\n| 16 | Align everything to one grid | Müller-Brockmann |\n| 17 | Proximity: related ≤16px, unrelated ≥48px | Gestalt; Williams |\n| 18 | Data-ink ratio ≥80% | Tufte 1983 |\n| 19 | F-pattern: headline + key visual top-left | NN\u002Fg eye-tracking |\n| 20 | Two valid modes — pick one and stay | Tufte vs Reynolds |\n\n---\n\n## Install\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002FItsssssJack\u002Fpower-design ~\u002F.claude\u002Fskills\u002Fpower-design\n```\n\nThen in Claude Code:\n\n```\n> use power-design — make me a deck for stripe.com about our new product launch\n```\n\nThe skill will:\n1. Ask you for a brand (paste URL, pick from library, or skip for default)\n2. Extract brand DNA via Firecrawl (~30 seconds)\n3. Ask for content brief (headline + 3–5 points)\n4. Generate `slides.html` applying brand DNA × 20 rules\n5. Open in browser. Refine via natural conversation.\n\n---\n\n## Brand library — 72 pre-built systems\n\n| Tech \u002F AI | Finance | Auto \u002F Lifestyle | Media | Productivity |\n|---|---|---|---|---|\n| Anthropic \u002F Claude · OpenAI · DeepSeek · Linear · Vercel · Stripe · Cursor · GitHub · Figma · Webflow · Framer · Mintlify · Notion · Raycast · Lovable · Resend · Sentry · Supabase · Superhuman · MongoDB · Sanity · Posthog · Replicate · Runway · Hashicorp · ElevenLabs · Cal · Clay · Composio · ClickHouse · Cohere · Mistral · Together · x.ai · Ollama · OpenCode · Expo · Pinterest · Glaido | Stripe · Mastercard · Coinbase · Binance · Kraken · Revolut · Wise · Shopify | Tesla · BMW · BMW M · Bugatti · Ferrari · Lamborghini · Renault · Nike · Airbnb · Apple · Starbucks · Grind · Vodafone | The Verge · Wired · Spotify · YouTube · Sony · PlayStation · IBM | Notion · Slack · Miro · Intercom · Zapier · Uber · NVIDIA · SpaceX · VoltAgent · Warp |\n\nEach entry is a single `brand-style.md` file: colors, type, voice, components, source URL. Add your own using `brands\u002F_template.md`.\n\n---\n\n## How the skill works (under the hood)\n\n```\n   ┌─────────────────────────────────────────┐\n   │  1. Brand DNA       (URL → Firecrawl)   │\n   │     OR pick from    brands\u002F\u003Cname>.md    │\n   ├─────────────────────────────────────────┤\n   │  2. Design rules    principles\u002F...md     │\n   ├─────────────────────────────────────────┤\n   │  3. Compose         brand × rules → HTML │\n   └─────────────────────────────────────────┘\n                      ↓\n                  slides.html\n```\n\nThe skill's runbook lives in `SKILL.md`. The 20 design principles (with research citations and numeric thresholds) live in `principles\u002Fdesign-principles.md`.\n\n---\n\n## Credits\n\n- **Brand library** — forked and restructured from [VoltAgent\u002Fawesome-design-md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md), with permission and credit.\n- **Design research** — Edward Tufte, Garr Reynolds, Nancy Duarte, Robin Williams (CRAP), Adam Wathan & Steve Schoger (Refactoring UI), Josef Müller-Brockmann, Matthew Butterick, Robert Bringhurst, Richard Mayer, Nielsen Norman Group, WCAG 2.2.\n- **Illustrations** — generated via Kie.ai nano-banana 2.\n\n---\n\n## License\n\nMIT — see [LICENSE](LICENSE).\n\n---\n\n\u003Cdiv align=\"center\">\n\n**Built by Jack Roberts** ·\n[**Vercel showcase**](https:\u002F\u002Fpower-design.vercel.app) ·\n[**Community**](https:\u002F\u002Fbit.ly\u002F3PATPoL)\n\n\u003C\u002Fdiv>\n","Power Design 是一个Claude技能，用于生成不像是由AI制作的幻灯片。它结合了品牌DNA和20条编码设计原则，能够根据用户提供的URL实时提取品牌信息，或从72多个预建品牌系统中选择，确保每一份幻灯片既符合品牌形象又具有专业美感。该项目遵循Tufte、Reynolds等权威的设计理论，保证输出内容在视觉呈现上达到高标准要求，避免常见的设计缺陷如过度使用渐变色或阴影效果。适用于需要高质量演示文稿但又希望保留独特品牌风格的企业和个人场景。","2026-06-11 03:31:14","CREATED_QUERY"]