# Make it premium: power-design (the end-of-build polish step)

The design skill we gave the group on the website day, run again here at the very end of the app build to take it from functional to premium. This is the make-it-beautiful pass: build first, get the core flow working, THEN run this. Order is the lesson.

## What it is

A design skill with two assets:
- A library of ~72 premium brand systems (Linear, Apple, Notion, Stripe, Cursor, Framer, Vercel, Superhuman, and more), each with codified colors, type, spacing, and components.
- 20 codified design principles (whitespace, 8pt grid, one accent per surface, modular type scale, contrast) and, explicitly, no gradients and no AI-default gradient-hero look.

Repo: https://github.com/ItsssssJack/power-design

Install (participants): `git clone https://github.com/ItsssssJack/power-design ~/.claude/skills/power-design`

## The recipe we ran on the Showcase (functional to premium in one pass)

1. Pick a premium brand language from the library to borrow the feel. We used Linear: near-black canvas, hairline borders, one scarce accent, tight type.
2. Apply the 20 principles to the real UI: kill every gradient, commit to one accent (here the client's brand color, used scarcely on active states and a thin rule), generous whitespace, a modular type scale, 8pt spacing.
3. For a gallery, go dark so the creative pops, then add a beveled glass card system (translucent sheen, top-edge highlight, soft lift, rounded corners) for premium depth.
4. Verify by eye: open it and hunt for any remaining gradient or light surface, confirm a single accent. (On the Showcase this caught three separate gradient fills hiding in preview headers.)

## Where it slots in the workflow

The very end, after the core flow works and the components are in. It pairs with impeccable (which strips AI-slop patterns) and the 21st.dev component add-ins (premium prebuilt pieces). Sequence: make it work, drop in components, then run power-design to give the whole thing one premium brand language.