original-design

What this skill does

# Original Design

## Overview

**Originality is not about being unique. It is about being internally consistent around one core idea.**

Most people start by asking *"How do I make this look unique?"* The best designers start by asking *"What is the visual manifestation of the core idea?"*

This skill runs an **interactive, question-driven** session that turns a product or subject into a complete **design language** — a coherent visual *world* from which every screen, frame, icon, illustration, and animation is drawn as an "artifact." It works for any visual deliverable: an infographic, a video storyboard, a website, or a mobile app UI/UX.

**The biggest shift this skill enforces: don't design screens — design a world.** Everything else is just an element of that world.

## How to run this skill (read first)

This is a **facilitated conversation, not a form dump.** Follow these rules:

1. **One phase at a time.** Ask the focused question(s) for the current phase, *wait for the answer*, reflect it back in one or two sentences, then move on. Never paste all seven phases at once.
2. **Always offer a recommendation.** For every question, propose 2–4 concrete options (with a "(recommended)" first) so the user can react instead of inventing from scratch. They can always answer freely.
3. **Use structured questions when the host supports them.** In Claude Code, prefer the `AskUserQuestion` tool for option-based phases. In other agents, ask in plain text with a short labeled option list.
4. **Gather live visual inspiration from the web** at Phase 1.5 and Phase 6 (see [references/inspiration-browsing.md](references/inspiration-browsing.md)). Pick the browsing method that matches the host agent.
5. **Capture decisions as you go** into a running Design Language Brief (template at [assets/design-language-brief-template.md](assets/design-language-brief-template.md)).
6. **Gate on the Originality Test** before producing final output. Don't skip it.
7. **Hand off to a production skill** for the chosen medium (see [references/medium-playbooks.md](references/medium-playbooks.md)).

Copy this checklist into your working notes and check items off:

```
Design Language Progress:
- [ ] Phase 0: Frame the world (medium, subject, audience)
- [ ] Phase 1: Core metaphor (one sentence)
- [ ] Phase 1.5: Inspiration sweep (web)
- [ ] Phase 2: Visual universe (vocabulary)
- [ ] Phase 3: Design DNA (shapes / colors / motion / texture)
- [ ] Phase 4: Mascot system (if applicable)
- [ ] Phase 5: The signature constraint
- [ ] Phase 6: Cross-domain inspiration (web)
- [ ] Phase 7: Generate many concepts → pick the world
- [ ] Phase 8: Originality Test (5 questions) — GATE
- [ ] Phase 9: Write the brief + medium handoff
```

---

## Phase 0 — Frame the world

Establish what you're actually making before anything visual. Ask:

- **What are we creating?** → infographic · video storyboard · website · mobile app UI/UX · other
- **What is the product/subject, in one line?**
- **Who is it for, and what should they *feel*?**

Then say the mindset shift out loud to the user: *"We're not going to design screens. We're going to design a world, and your "+ medium +" will be made of artifacts from that world."*

## Phase 1 — Define the core metaphor

> Everything flows from the core metaphor.

Ask the unlocking question: **"If this product were a physical object or place, what would it be?"**

Offer seeds based on the domain (these are from the source method):

| Product type | Possible metaphor |
|---|---|
| Math / learning app | Toy Blocks |
| AI tutor / assistant | Wise Mentor |
| Finance / trading app | Command Center |
| Travel app | Explorer's Journal |
| Knowledge / docs app | Living Library |

Push for **one** metaphor, not three. Then write the **one-sentence design language**:
*"This is a [metaphor] — so it looks like [feeling/world]."*

If they can't say it in one sentence, the metaphor isn't sharp enough yet — keep refining.

## Phase 1.5 — Inspiration sweep (web)

Before defining vocabulary, gather real references for the chosen metaphor and mood. Follow [references/inspiration-browsing.md](references/inspiration-browsing.md): browse cosmos.so, Pinterest, Savee, Dribbble, Behance, Are.na for the metaphor + mood, collect 8–15 references, and note recurring patterns (lighting, color temperature, composition, texture, shapes). Summarize the patterns back to the user before continuing.

## Phase 2 — Build a visual universe

> List everything that exists in that world. Those become your visual vocabulary.

With the metaphor fixed, brainstorm *with the user* every object, surface, character, and texture that lives in that world. Example for **Living Library**: Books, Shelves, Notes, Ink, Stamps, Bookmarks, Paper texture.

Then explicitly map the vocabulary onto the design layers:

| World object | Becomes |
|---|---|
| (e.g. Books, Stamps) | Icons |
| (e.g. Margin sketches) | Illustrations |
| (e.g. Page turn, ink bleed) | Animations / motion |
| (e.g. Shelves, cards) | UI elements / layout |
| (e.g. Ink, paper, leather) | Colors |
| (e.g. Hand-lettered headers) | Typography |

Aim for a vocabulary of 6–10 concrete elements. This list is the source of truth for everything later.

## Phase 3 — Create your design DNA

> Define the system rules everything will follow.

Lock four dimensions. Keep each tight — constraints here are what make it feel designed:

- **Shapes** — 2–3 shape families (e.g. rounded rectangles, circles, cubes)
- **Colors** — 3–5 core colors with names tied to the world (e.g. Deep Navy, Electric Blue, Warm Yellow, Soft Gray)
- **Motion** — *one* philosophy in a phrase (e.g. "springy & playful, with purpose")
- **Texture** — *one* language (e.g. "paper, hand-drawn, sketch-like")

Record exact hex values for colors and concrete easing/timing intent for motion so the brief is build-ready.

## Phase 4 — Design a mascot system (when it fits)

> A mascot gives your product a face and personality, and becomes the heart of the world.

Ask whether a mascot serves this project. It's powerful for learning, consumer, kids', and brand-led products; often skipped for enterprise/finance or minimalist tools. If yes, define:

- **Who/what it is** (e.g. Curious Robot, Wise Fox, Tiny Scientist, Living Constellation)
- **Personality** in 3 adjectives
- **How it shows up** across the medium (empty states, loading, onboarding, narrator in a video, guide in an infographic)

Why it matters: emotional connection, memorability, and it unifies the whole experience.

## Phase 5 — Create the signature constraint

> Constraints don't limit creativity. They create identity.

Define **one** rule the design will never break. This single decision is often what makes a language recognizable:

| Constraint | Resulting style |
|---|---|
| No photos allowed | clean, illustrated (Zenn-like) |
| Everything is geometric blocks | structured (math-app-like) |
| Only black, white + one accent | sharp, linear (Linear-like) |
| Every illustration must look hand-drawn | warm, human (Excalidraw-like) |

Write the constraint as an enforceable sentence: *"In this world, we never ___ / we always ___."*

## Phase 6 — Get inspired from unrelated domains (web)

> Don't copy competitors. Borrow from other worlds.

Pull inspiration from domains *outside* the product's category to stay fresh: Architecture, Nature, Toys, Ancient manuscripts, Science diagrams, Space missions, Industrial machinery. Use [references/inspiration-browsing.md](references/inspiration-browsing.md) to browse 2–3 unrelated domains and extract transferable ideas (a grid system from architecture, a color story from nature, a labeling style from science diagrams). Bring back 3–5 concrete "steals."

## Phase 7 — Generate many concepts, then pick the world

> One core idea. Many worlds. Quantity creates the chance for brilliance.

Generate a **large batch of short concept directions** — each a different "world" expressing the *same* core idea (e.g. Museum,