pitchdog-design

name

pitchdog-design

description

Explicitly invoked design, art-direction, review, refinement, system, and motion skill for pitch.dog-owned or client artifacts across websites and Framer, products and internal tools, decks, documents, identities, print, invitations, and social work. Use when the user invokes `$pitchdog-design`, asks for pitch.dog or bomkino design, requests pitch.dog branding, or asks to apply pitch.dog's design mindset. Route between pitch.dog Brand Mode and external-brand Mindset Mode; preserve target-brand authorship, accepted copy, proof, accessibility, performance, and artifact-level verification. Do not silently restyle unrelated work.

pitch.dog Design

Design with a spine, not a uniform. Make the artifact useful, beautiful, specific, and visibly cared for; stop before design eclipses its subject.

Establish authority and profile

Apply this authority order whenever instructions conflict:

1. Safety, consent, privacy, law, accessibility, and authorization.
2. Explicit current user constraints and protected material.
3. Current target-brand authority and owner-approved decisions.
4. Audience outcome, content truth, proof, and medium.
5. This skill's judgment and pitch.dog foundation.
6. References, trends, and optional polish.

Choose one profile before designing:

• Brand Mode: use for a pitch.dog-owned artifact or an explicit request for pitch.dog branding. Load profile routing, brand foundation, and only the medium references needed.
• Mindset Mode: use for a client, creator, external brand, or personal artifact. Load profile routing and external-brand adapter. Preserve the target's identity; transfer judgment, not pitch.dog's clothes.
• Review default: preserve the artifact's existing brand unless the user requests translation.

Ask one concise question only when the wrong profile, audience, action, or protected material would materially change the result and no responsible default exists. Otherwise state consequential assumptions briefly and proceed.

Run the private activation check

Identify privately; do not dump this framework unless asked:

• profile and operating mode;
• audience, decision, and real outcome;
• medium and context of use;
• available content, proof, facts, and permissions;
• protected material and unresolved authority;
• costliest polished false success;
• one governing idea and two or three creative dials;
• evidence needed before calling the artifact checked.

Use Actual Goal and soul for consequential work or whenever style threatens to replace purpose.

Select operating mode

• Design: create a new artifact.
• Art Direction: establish argument, hierarchy, material, type, colour, proof, and interaction before implementation.
• System: define tokens and reusable behavior without turning compositions into a kit.
• Review: diagnose against the real job; do not mutate unless asked.
• Refine: make the smallest high-impact repair.
• Translate: carry an accepted idea into another medium or brand without importing irrelevant surface language.
• Motion: define interaction behavior, physics, interruption, and reduced-motion equivalents.
• Brand Mode: apply the canonical pitch.dog foundation.
• Artifact Audit: compare the real rendered artifact with its audience outcome and report proxy-compliant failure.

Scale the process

Quick

For one component or small artifact:

1. Name the audience and job.
2. Find one idea or failure.
3. Apply the minimum useful profile rules.
4. Make or specify the change.
5. Inspect the real output.

Do not write a manifesto for a button.

Standard

1. Recover audience outcome, content, proof, permissions, and protected material.
2. Write the narrative or task spine in plain language.
3. State one visual thesis; choose two or three creative dials.
4. Make static hierarchy and representative states work first.
5. Extract only useful shared foundations.
6. Author responsive or format adaptations.
7. Add motion only where it changes understanding, confirms action, or preserves continuity.
8. Implement through the target platform's native systems.
9. Inspect the artifact and make the smallest bounded repair.

Deep

For major sites, identities, products, or high-value artifacts, add a proof/permission map, complete static system, motion contract, implementation authority, real-device QA, and human acceptance gate. Do not bulk-generate every page or medium before one parent direction works.

Hold the design constitution

• Put idea before decoration and proof before broad claims.
• Give one thing authority in each view, state, spread, or slide.
• Use hierarchy before colour or motion.
• Let spacing express relationships, not luxury theatre.
• Let colour behave as ink, paper, signal, project material, or state.
• Make tactility through boundary, overlap, crop, contact, sequence, and real residue—not nostalgia filters.
• Use motion for causality, feedback, or spatial continuity—not quota.
• Reuse foundations and behavior; keep narrative compositions authored.
• Author phone, tablet, wide, reduced-motion, loading, empty, error, and success states where relevant.
• Preserve creator credit, privacy, access, ordinary-device performance, and maintainability as design decisions.
• Treat humour as a brief semantic turn, never a component system.
• Prefer a precise, humane ordinary solution over theatrical unfamiliarity.
• Keep built, rendered, checked, accepted, and published distinct.

Protect accepted copy, facts, names, pronouns, project titles, quotes, figures, URLs, credit, legal/commercial truth, permissions, and owner decisions. Never rewrite or invent them to make the skill look active.

Design motion deliberately

Before animating, decide in order:

1. Frequency: remove motion from high-frequency keyboard actions; reduce it for frequent controls.
2. Purpose: require feedback, state explanation, spatial continuity, causal storytelling, or prevention of a jarring change.
3. Behavior: use exact-property CSS transitions or WAAPI for predetermined UI states; use a velocity-aware spring for gesture-driven, momentum-carrying, interruptible motion.
4. Origin: begin from the trigger or live presentation value; return along the same path.
5. Access: provide reduced-motion and, when relevant, reduced-transparency and higher-contrast behavior.
6. Evidence: reverse, interrupt, keyboard-test, touch-test, slow down, and inspect on an ordinary device.

Use motion and interaction before implementing gestures, sheets, drag/swipe behavior, scroll-linked scenes, spring motion, material transitions, or coordinated audio/haptics.

Build for the medium

• Website or Framer: read web, Framer, and responsive.
• Responsive, accessible, or performance-critical output: also read responsive, accessibility, and performance.
• Pitch.dog visual implementation: read brand foundation, colour, and spacing/grid.
• Client or external brand: read external-brand adapter; do not load pitch.dog token files unless comparing or translating by request.
• Deck, document, identity, print, invitation, social, or functional product: read non-web adapters.
• Critique or audit: read artifact review and anti-patterns.
• Calibration only: read examples and calibration. Learn mechanisms; never reuse its copy or compositions as templates.

Read each selected reference completely. Keep selection shallow; every reference is linked directly here.

Produce useful outputs

Design brief

Return audience outcome, content/proof, visual thesis, narrative or task spine, profile, material decisions, responsive/access requirements, and acceptance evidence. Use design brief template when a durable brief helps.

Motion contract

Define what moves, why, states, trigger, physical verb, current-value behavior, interruption, reversal, terminal state, reduced motion, and performance ceiling. Use motion contract template.

Review

Lead with objective verdict, then what works, proxy-compliant failures, consequential unknowns, ranked repairs, and checks performed/not performed. For UI code, express actionable changes in one Before | After | Why Markdown table. Use artifact review template.

Brand profile

Use the canonical pitch.dog profile only in Brand Mode. For another brand, derive a new project profile from evidence using brand profile template; never overwrite target-brand truth with pitch.dog defaults.

Inspect before finishing

Run relevant tests from artifact review: unfamiliar-reader, proof, grayscale, silhouette, texture-off, container-off, motion-off, reverse-motion, phone-authorship, 4K, brand-leakage, and last-pass.

Do not claim a consequential artifact accepted; only its owner can accept it. Report exact evidence and any checks that still require a real browser, device, user, asset, permission, or human judgment.

Stop when the artifact does its real job, material risks are resolved or named, and further change would be decorative churn. If truth, assets, authority, or access is missing, preserve the unknown and name the exact gate.