TechnicalCollectible prompt

Design brief your AI builder follows on every page

Pin down type, color, spacing and components once, so every new page looks made by the same designer.

Lovablev0Cursor

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

Design brief your AI builder follows on every page

Act as a senior product designer. Write the design brief my AI builder will follow on every page of {{business_name}}'s site, so new pages stop looking like generic templates. The look: {{visual_style}}. Fonts: {{brand_fonts}}. Brand colors: {{brand_colors}}. Read the current styles first and keep what works. Set real values: - Type: a scale from a 16px body (ratio about 1.25) with size, line height and weight per level; about -0.02em letter-spacing on large headings; body line height 1.5 to 1.6 and a 60 to 75 character measure; two families and three weights at most - Color tokens with roles: background, surface, text, muted text, border, accent, accent hover, focus ring, success, warning, error. Text contrast at least 4.5:1, with the pairs listed - Spacing on an 8px scale; section padding of 64px on phones and 96 to 128px on desktop - Grid: 4 columns at 360px, 8 at 768px, 12 at 1280px, with gutters - Radius (for example 8px on inputs, 12px on cards, 999px on pills), one border style, two shadow levels used sparingly - Motion: 150 to 250ms ease-out for UI, nothing over 600ms, prefers-reduced-motion respected - Components: primary, secondary and ghost buttons with hover, focus-visible, active, disabled and loading; inputs with help and error text; cards; and section layouts beyond a centered heading plus three cards - Imagery: one icon set at one stroke width, real photos over stock cliches - Never: purple-to-blue gradients, glass cards over blurred blobs, icons in gradient circles, emoji bullets, fake stats or logos, animation on everything Deliver the brief as a project rules file, plus the tokens wired into the existing styling system.
Technicalnvoka.com/library/nvoka-design-brief-your-ai-builder-follows-on-every-pageScan to open
Technical

Design brief your AI builder follows on every page

Pin down type, color, spacing and components once, so every new page looks made by the same designer.

Nvoka logo

Curated by Nvoka

Lovablev0CursorClaude Code
Add to my library

Make it yours

Fill in the blanks and change any word. Only your copy changes, never the card.

Fill in the blanks

0 of 4 filled

Your prompt

Act as a senior product designer. Write the design brief my AI builder will follow on every page of {{business_name}}'s site, so new pages stop looking like generic templates. The look: {{visual_style}}. Fonts: {{brand_fonts}}. Brand colors: {{brand_colors}}. Read the current styles first and keep what works. Set real values: - Type: a scale from a 16px body (ratio about 1.25) with size, line height and weight per level; about -0.02em letter-spacing on large headings; body line height 1.5 to 1.6 and a 60 to 75 character measure; two families and three weights at most - Color tokens with roles: background, surface, text, muted text, border, accent, accent hover, focus ring, success, warning, error. Text contrast at least 4.5:1, with the pairs listed - Spacing on an 8px scale; section padding of 64px on phones and 96 to 128px on desktop - Grid: 4 columns at 360px, 8 at 768px, 12 at 1280px, with gutters - Radius (for example 8px on inputs, 12px on cards, 999px on pills), one border style, two shadow levels used sparingly - Motion: 150 to 250ms ease-out for UI, nothing over 600ms, prefers-reduced-motion respected - Components: primary, secondary and ghost buttons with hover, focus-visible, active, disabled and loading; inputs with help and error text; cards; and section layouts beyond a centered heading plus three cards - Imagery: one icon set at one stroke width, real photos over stock cliches - Never: purple-to-blue gradients, glass cards over blurred blobs, icons in gradient circles, emoji bullets, fake stats or logos, animation on everything Deliver the brief as a project rules file, plus the tokens wired into the existing styling system.
See all