Back to marketplace

Product UI Spec Memory

Store spacing grids, palettes, depth strategy, and patterns in a system.md so Claude never forgets them between sessions.

Designp4
by AgentVoltv1.0.0Published 1y ago1 install
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Lock in design decisions for admin dashboard so they don't drift over 30 sessions.”
Beforegeneric AI agent
A system.md file is helpful for maintaining consistency across long product builds. You'd document spacing rules, color assignments, typography scales, and component patterns. For an admin dashboard, you're probably looking at dense layouts, so clarity on data density and visual hierarchy matters. I'd need to know: what's the user's primary workflow? Are they doing data entry, monitoring, or analysis? What's your brand color palette? How many sessions have you already built before the drift started?
Afterwith Product UI Spec Memory
PRODUCT UI SPEC MEMORY: Admin Dashboard System

FILE: system.md (auto-loaded each session)

INTENT BRIEF
Who: Finance operations team managing 500+ monthly transactions
Doing: Reviewing account reconciliation, approval workflows, dispute resolution
Feeling: Confident, organized, never lost in the data
Goal: Complete month-end close 40% faster than spreadsheet-based process

VISUAL HIERARCHY

PRIORITY 1 (Commands, high-stakes data)
→ Color: Brand blue #0052CC (action buttons, alert badges)
→ Weight: 600 (bold for critical actions: Approve, Reject, Export)
→ Size: 16px minimum for click targets

PRIORITY 2 (Secondary actions, readable content)
→ Color: Neutral gray #5E6C84 (data labels, descriptions)
→ Weight: 400 (regular text)
→ Size: 14px for table content

PRIORITY 3 (Supporting, supplemental info)
→ Color: Gray #738496 (timestamps, helper text)
→ Weight: 400
→ Size: 12px for metadata

SPACING GRID
→ Base unit: 4px
→ Safe spacing: 8px (padding within components)
→ Card spacing: 16px (gap between card and content)
→ Section spacing: 24px (vertical gap between major sections)
→ Gutter: 20px (left/right margin on container)

TYPOGRAPHY SCALE

Page Title: 28px / bold / leading 32px
Section Header: 18px / 600 / leading 24px
Card Title: 14px / 600 / leading 20px
Body Text: 14px / 400 / leading 20px
Small Label: 12px / 500 / leading 16px

Font Stack: Inter for UI (system sans-serif fallback)

DEPTH STRATEGY (Shadows)
→ Level 0 (Base): No shadow
→ Level 1 (Card): 0 1px 3px rgba(0,0,0,0.12)
→ Level 2 (Elevated panel): 0 4px 8px rgba(0,0,0,0.15)
→ Level 3 (Modal/popover): 0 10px 20px rgba(0,0,0,0.20)

COLOR ROLE ASSIGNMENTS

Status indicators:
→ Approved: Green #36B37E
→ Pending: Amber #FFAB00
→ Rejected: Red #DE350B
→ Neutral/Draft: Gray #626F86

Data visualization:
→ Series A (Revenue): #0052CC
→ Series B (Costs): #DE350B
→ Series C (Profit): #36B37E
→ Neutral: #626F86

COMPONENT LIBRARY

Table:
→ Row height: 40px
→ Header bg: #F7F8F9 (very light gray)
→ Striping: Alternate rows at 2% opacity (visual break)
→ Hover: +3% opacity, 100ms transition
→ Sortable header: Blue caret on hover

Input Fields:
→ Border: 1px solid #DCDFE4
→ Focus border: 2px solid #0052CC
→ Height: 32px (matches density)
→ Padding: 8px horizontal
→ Label: Bold, 14px, 12px above field

Buttons:
→ Primary: Blue bg (#0052CC), white text, 32px height
→ Secondary: Gray bg (#F1F2F4), dark text
→ Disabled: Gray bg (#DCDFE4), 50% opacity
→ Hover: Darken bg by 10%
→ Transition: 100ms

DATA DENSITY
→ Compact mode: 8px vertical padding in cells (max data per screen)
→ Comfortable mode: 12px vertical padding (default)
→ Toggle in settings: survives session

SPECIAL RULES
→ Modals must not exceed 600px width (prevents overwhelming)
→ Forms max 2 columns (single column preferred)
→ Tooltips max 120 characters (enforce brevity)
→ Charts max 4 series (visual noise threshold)
→ Page load animations: 300ms ease-out (never jarring)

CHANGE LOG
Session 1 (2026-07-31): System created, 8 component patterns locked
Session 2: Added data density toggle after user feedback

IMPLEMENTATION
→ Copy system.md to project root
→ Load at start of each Claude session via CLAUDE.md reference
→ Tag breaking changes with BREAKING in changelog
→ Approve changes only via Slack proposal (async design review)

About this skill

name: product-ui-spec-memory description: Store spacing grids, palettes, depth strategy, and patterns in a system.md so Claude never forgets them between sessions. Use when working on product ui spec memory.

Product UI Spec Memory

Targeted at dashboards, admin panels, and SaaS tools. Starts with an intent-first questionnaire (who, doing what, feeling how, goal) then locks decisions in a system.md that auto-loads each session. Prevents drift on long product-UI builds where visual coherence across 40 sessions matters more than any single screen.

What you get

  • system.md
  • Intent brief
  • Component pattern library
  • Typography and data-density scales
  • Depth strategy
  • Color role assignments

Customize your output

  • Product category: SaaS dashboard, admin panel, e-commerce, mobile app
  • Density: airy, balanced, dense
  • Brand tokens: hex, type stack
  • Auto-load: yes, no
  • Update trigger: manual, on-change
  • Change log: yes, no

Example output

'A finance dashboard whose 12-week iteration cycle stays visually consistent across 40 Claude sessions.'

Best for

Product designers on SaaS teams.

Note: Sourced from u-skills.com. High confidence.

SKILL.md preview

SKILL.md
---
name: product-ui-spec-memory
description: Use this skill when building dashboards, admin panels, or SaaS UI across many sessions and needing spacing, palette, and pattern decisions to persist instead of drifting.
version: 1.0.0
category: Design
author: AgentVolt
license: proprietary
tags:
  - design
  - p4
---

# Product UI Spec Memory

Locks down the visual decisions a product UI depends on into a system.md file that auto-loads every session, so a 40-session build stays coherent instead of drifting screen by screen.

## When to use

… (sign up to view the full skill)
Sign up to view, copy, and install the full skill