What is the prom-design skill?
The prom-design skill applies one proven studio aesthetic instead of inventing a new look. An AI coding agent asks a short intake, offers named directions, picks the cinematic or instrument register, builds mobile first, and checks pages at three widths before review.
Prom Design is a skill that carries one aesthetic that has already shipped real client work. It asks what you are making, offers you the Prom take, and builds mobile first, so you only need to recognize which version you like.
It carries the full working loop: brief, design contract, build, review gate, multi-lens audit and ship. It also includes two token systems, signature component patterns, proof-driven copywriting and real-photography rules.
The two registers
- Cinematic suits landing pages, brands and portfolios, with full-bleed sections, a display serif and a scroll narrative.
- Instrument suits apps, dashboards and booking flows, with dense cards, facets, one sans and functional motion only.
- If a project needs both, the skill builds two registers under one token system.
The five laws
- Specificity is the luxury signal, so placeholder content counts as a design defect.
- Proof over promise: every claim carries its evidence next to it.
- The ground is never white and the ink is never black.
- Anything interactive must announce itself.
- On mobile, density is respect.
Who the prom-design skill is for
Best for
- Newcomers who lack taste words and want to choose by recognizing a direction.
- People whose AI-built pages read as generic, such as the purple gradient and the emoji card grid.
- Builders who want mobile first pages checked at 375px, 768px and 1280px.
Not for
- Laying out the first screen, headlines, CTA buttons, section order, forms and mobile with page speed targets, which the landing-page-design skill covers.
- Producing premium website design references with image generation, which the imagegen-frontend-web skill covers.
- Scoring a UI against three quality pillars, which the frontend-design-review skill covers.
How to install Prom Design Skill: One Proven Style for Client-Ready Sites
npx skills add sva-admin/sv-academy-prom-designskills/prom-design/ folder and upload it as a skill.Install the skill
Run the command above. It is the universal install route, verified on 19+ agents including Claude Code and Cursor.
Or use the plugin route
For a Claude Code plugin, run
claude plugin marketplace add sva-admin/sv-academy-prom-design, thenclaude plugin install prom-design@sv-academy-prom-design.Answer the intake
The skill asks what the page is for and who lands on it, whether it should sell or work, and what must stay, such as brand colors, a logo or copy.
Pick a direction
It offers two or three named directions with hex values and a face pairing. Pick one, mix them, or say just build it.
Check that it loaded
Ask your agent: Apply the prom-design skill to this page. Show me before and after, and name every rule you applied.
Key features
- Sixty-second intakeBefore any code, it asks about the page's purpose, sell or work, and anything that must stay, then offers two or three named directions in one short message.
- Brand-specific tokensA tinted ground derived from the subject's world, ink that carries the ground's temperature, and one accent taken from an object the business owns.
- Vetted type menuA short list of Google Fonts serifs such as Cormorant Garamond, Fraunces and Newsreader, paired with one sans such as Archivo, Public Sans or IBM Plex Sans.
- Mobile defaultsA scroll budget of about 3.5 phone screens, 44px tap targets, a bottom tab bar from three destinations, and no sideways page scroll at 390px.
- Anti-slop methodName three real products that solve a similar problem well, take the mechanism and never the skin, and state what this project does differently.
- Proof-over-promise copyCopy is part of the design, with evidence beside every claim and real numbers, names and distances in place of vague wording.
- Real photography rulesZero images is treated as a bug. Images are chosen for context, from free sources, and labeled honestly when they are stock.
- Three-width review gateA script captures every route at three widths and reports status, scroll height, horizontal overflow, broken images, rendered dashes and console errors.
- Multi-lens auditA second script generates a six-agent audit with your paths filled in, and each finding is verified against the source before it is kept.
Frequently asked questions
What does the prom-design skill do?
It gives an AI coding agent one proven house style for websites and mobile web apps. The agent asks a short intake, offers named directions, picks the cinematic or instrument register, builds mobile first and reviews its own pages at three widths.
How do I install prom-design?
Run npx skills add sva-admin/sv-academy-prom-design, the universal install route verified on 19+ agents including Claude Code and Cursor. A Claude Code plugin route also exists, using claude plugin marketplace add followed by claude plugin install prom-design@sv-academy-prom-design. For Claude Cowork, zip the skills/prom-design folder and upload it.
How do I try it on my own page?
Ask your agent to apply the prom-design skill to your page, show a before and after, and name every rule it applied. That diff is the test. If you dislike the result, uninstall the skill and nothing else has changed.
What is the difference between the two registers?
Cinematic is for landing pages, brands and portfolios and works like an argument you scroll. Instrument is for apps, dashboards and booking flows and is dense, quiet and tabular. The agent picks by task, and a project that needs both uses two registers under one token system.
Will every site end up looking the same?
The structure of the tokens is fixed, but the values are not. The subject decides the palette and the faces, so a florist and a fintech ledger get different tinted grounds and accents. Reusing a previous client's palette is banned, and your own brand colors, imagery and copy flow through the same rules.
Is it right for inventing a fresh visual direction?
No. The skill applies one proven aesthetic and is not meant for a blank brief that needs an original identity. Other design skills are built to invent a new point of view each time, and the skill notes that both can be used together, with this one supplying the house answer.
What does the review gate check?
It captures every route at 375px, 768px and 1280px and reports HTTP status, scroll height in screens, horizontal overflow, broken images, rendered em and en dashes and console errors. The skill then tells you to look at the screenshots yourself.