Sample output

What CascadePeek copies as DESIGN.md.

This is a shortened example of the Pro output. The real extension samples the active Chrome tab and copies a Markdown file with YAML tokens, visual guidance, and an agent prompt you can paste into `DESIGN.md`, `AGENTS.md`, or `.cursor/rules/design.mdc`.

---
design_system:
  source: "cascadepeek.b0wen.me"
  focused_selector: "button.primary"
  sampled_visible_elements: 84
  colors:
    - "#111827"
    - "#5b6472"
    - "#0f766e"
  backgrounds:
    - "#f8fafc"
    - "#ffffff"
    - "#020617"
  typography:
    font_families:
      - "Inter, ui-sans-serif, system-ui"
    font_sizes:
      - "16px"
      - "18px"
      - "48px"
    font_weights:
      - "400"
      - "700"
      - "800"
  spacing:
    - "padding: 14px 18px"
    - "margin: 0px"
  radii:
    - "radius: 8px"
  shadows:
    - "0 18px 48px rgba(17, 24, 39, .12)"
  css_variables:
    - "--ink: #111827"
    - "--teal: #14b8a6"
    - "--radius: 8px"
---

# DESIGN.md

Use this file as visual context for AI-assisted frontend work.

## Usage

- Place this content in `DESIGN.md`, `AGENTS.md`, or `.cursor/rules/design.mdc`.
- Ask Cursor, Claude Code, Codex, v0, Lovable, or Bolt to follow these tokens before generating UI.
- Treat the source as a structural reference, not permission to copy trademarks, logos, images, copy, or proprietary assets.

## Visual Direction

- Preserve the relationships between color, typography, spacing, radius, and elevation.
- Translate the system into your own app components and naming conventions.
- Keep output responsive, accessible, and maintainable.

## Agent Prompt

Before writing UI code, read this DESIGN.md and use it as the design-system source of truth. Match the measured visual rhythm while replacing brand-specific content with original project content.

Why this helps

Instead of asking an AI agent to infer a page style from a screenshot or vague wording, you give it measured values from the page you inspected. That reduces generic UI drift and makes the next component prompt more specific.

What Pro adds

CascadePeek Pro also copies page design briefs, CSS variables, element-level AI prompts, component bundles, authored rules, and lets you test CSS edits directly on the page.

Using Cursor, Claude Code, or Codex? See the Cursor design rules workflow for where to paste this context.