StyleSpec

StyleSpec Pro

Complete visual directions for vibe coding.

Choose a pack, add it to your project, and give your coding agent a visual system it can actually follow.

Browse packs Try StyleSpec free

5 launch packs One-time purchase No subscription

Five packs. Five different kinds of project.

Choose by the work you are building, then open the full showcase to see the direction across marketing, product UI, mobile, components, and states.

Nightshift showcase with a dark technical incident interface

Technical Editorial

Nightshift

Dense evidence, precise metadata, and restrained signal language for technical products.

Best for devtools, technical SaaS, infrastructure, and dashboards.

View pack
Daybreak showcase with a warm, calm daily planning interface

Soft Product

Daybreak

Warm light, quiet depth, and an airy product rhythm that stays useful and exact.

Best for productivity tools, personal SaaS, and calm everyday software.

View pack
Offset showcase with bold yellow, red, blue, and black editorial composition

Bold Editorial

Offset

Poster scale, sharp asymmetry, and a graphic hierarchy for creative work that must land.

Best for creative tools, agencies, campaigns, and expressive portfolios.

View pack
Keepsake showcase with warm paper surfaces and archival typography

Tactile Editorial

Keepsake

Paper surfaces, layered media, and a measured archival rhythm without nostalgia kitsch.

Best for editorial, journals, lifestyle, wedding, and memory-focused products.

View pack
Pulse showcase with a dark audiovisual interface and saturated signal colors

Expressive Digital

Pulse

Cinematic contrast, saturated signal color, and immersive hierarchy for digital media.

Best for media, music, games, and audiovisual creative products.

View pack

What you get

A reusable visual direction your coding agent can follow across a project.

  • DESIGN.md
  • Agent instructions
  • Design tokens
  • Reference implementations
  • Landing / Product / Mobile / Components / States references

Not a website template. A Style Pack gives your project one coherent visual direction without locking it to one page layout.

How it works

  1. 1Choose a pack
  2. 2Add it to your project
  3. 3Give it to your coding agent
  4. 4Build inside one coherent visual direction

Founding pricing

One payment for the pack you choose. No subscription.

Single Style Pack

Choose one finished direction.

$5

one-timeFounding price

Complete Launch Collection

Nightshift, Daybreak, Offset, Keepsake, and Pulse.

$15

all 5 packsone-timeFounding price

FAQ

What do I get?

A project-ready visual direction: DESIGN.md, agent instructions, design tokens, and reference implementations across the main product surfaces.

Is this a website template?

No. A Style Pack guides how a project looks and behaves across different screens instead of supplying one fixed page.

Does it work with coding agents?

Yes. The format is designed to give a coding agent concrete visual decisions and reference surfaces, with less room to fall back to generic UI.