Original Design

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). 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). 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).

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):

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: 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:

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:

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 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, Spaceship, Magical Academy, Detective Board, Living Brain… aim for 20–50 one-line concepts). Most will be average; you're hunting for the one that's extraordinary.

Present them grouped, let the user react, then narrow to 1 primary direction (optionally 1–2 backups). For a big batch, you may dispatch a subagent or workflow to expand concepts, but keep the user in the selection loop.

Phase 8 — The Originality Test (GATE)

Before producing anything, run all five questions. Every answer should be "yes." If any is "no," return to the relevant phase.

1. Can I explain the visual language in one sentence? (→ Phase 1) 2. Does every element come from the same metaphor? (→ Phase 2) 3. Can I remove the logo and still identify the product? (→ Phase 3/5) 4. Would a child draw the same design language? (is it simple and clear? → Phase 3) 5. *Does it look like a world rather than a UI?* (→ overall)

State each question and its verdict back to the user explicitly.

Phase 9 — Write the brief and hand off

Fill in assets/design-language-brief-template.md with every locked decision and save it to the user's project (suggest design-language.md). Then translate the language into the chosen medium using references/medium-playbooks.md, and offer to invoke the matching production skill:

• Infographic / social graphic → social-graphics, image-generation, or brand-asset
• Video storyboard → remotion-script-writer, product-video, or creative-strategist
• Website → frontend-orchestrator, design-foundation, color-system, typography-system
• Mobile app UI/UX → frontend-orchestrator, component-architecture, layout-system

The brief is the contract: every downstream asset must be an artifact of the world it describes.

Common mistakes

The bottom line

Design a world. Everything else is just an element of that world. Every screen, thumbnail, image, icon, and animation should feel like an artifact from the same universe.

Design Language Brief — [Product / Subject]

One world. Every artifact is drawn from it.

Deliverable: [infographic · video storyboard · website · mobile app UI/UX]

Audience & feeling: [who] should feel [emotion]

1. Core metaphor

This is a [metaphor] — so it looks like [feeling / world]. (One sentence. If it takes more than one, sharpen it.)

2. Visual universe (vocabulary)

Objects/surfaces/characters that exist in this world → what they become:

3. Design DNA

• Shapes (2–3):
• Colors (3–5, named + hex):
• #______ — [name]
• #______ — [name]
• #______ — [name]
• Motion (one philosophy): [phrase + intended easing/timing]
• Texture (one language):

4. Mascot system

• Included? yes / no
• Who/what:
• Personality (3 adjectives):
• Where it appears:

5. Signature constraint

In this world, we always ___ / we never ___. (The one rule that creates identity.)

6. Cross-domain inspiration

• Domains explored:
• Transferable "steals" (3–5):
• Reference links / boards:

7. Chosen direction

• Primary world:
• Backups:
• (From the batch of generated concepts.)

8. Originality Test — all must be YES

• [ ] Q1 — Explainable in one sentence?
• [ ] Q2 — Every element from the same metaphor?
• [ ] Q3 — Identifiable with the logo removed?
• [ ] Q4 — A child would draw the same language? (simple & clear)
• [ ] Q5 — Looks like a world, not a UI?

9. Production notes

Medium-specific guidance and the production skill(s) to invoke next. See medium-playbooks.md.

Gathering Visual Inspiration from the Web

Contents

• When to use this
• Choosing your browsing method (by host agent)
• Method A: Claude Code + Claude in Chrome
• Method B: Codex + Computer Use
• Method C: Web search fallback (any agent)
• Where to look (platforms)
• What to search for
• What to capture

When to use this

Two moments in the Original Design flow:

• Phase 1.5 — references for the core metaphor + mood, before defining vocabulary.
• Phase 6 — inspiration from unrelated domains, to keep the world fresh.

Goal each time: collect 8–15 references, then extract the patterns (color temperature, lighting, composition, shape language, texture, typography), not just pretty pictures. Always summarize the patterns back to the user.

Choosing your browsing method (by host agent)

Pick the first available option, in this order:

Is this Claude Code with the Chrome extension connected?  → Method A (Claude in Chrome)
Is this Codex with the Computer Use plugin installed?      → Method B (Codex Computer Use)
Otherwise (no visual browser available)                    → Method C (web search fallback)

A real, pixel-level look at moodboards (Methods A/B) is strongly preferred for design work because most inspiration lives in images, not text. Use Method C when no visual browser is available — it still surfaces named styles, palettes, and source URLs you can reason about and hand to the user.

If you're unsure whether a visual browser is connected, ask the user once ("Do you have Claude in Chrome / Codex Computer Use available?") rather than guessing.

Method A: Claude Code + Claude in Chrome

Claude Code drives a real Chrome (or Edge) window through the Claude in Chrome extension. It opens tabs, shares your logged-in state, navigates, reads the DOM, and screenshots — so you can actually see moodboards.

Requirements (per official docs):

• Chrome or Edge + the Claude in Chrome extension (v1.0.36+)
• Claude Code v2.0.73+ on a direct Anthropic plan (Pro/Max/Team/Enterprise)

Enable it:

• Launch with claude --chrome, or run /chrome inside a session to connect / check status / reconnect.
• Run /mcp → claude-in-chrome to see the available browser tools.

Use it (natural-language instructions to the browser): 1. "Open cosmos.so and search for <metaphor> <mood> (e.g. living library, warm, scholarly). Scroll the results." 2. "Screenshot the grid so we can study the recurring colors and textures." 3. "Open the 3 strongest clusters/boards and capture them." 4. Repeat across the platforms listed below.

Notes: browser actions run in a visible window; when Claude hits a login wall or CAPTCHA it pauses for the user to handle it manually. Reference: code.claude.com/docs/en/chrome.

Method B: Codex + Computer Use

Codex can see and operate the GUI (browser or desktop apps) via the Computer Use plugin on macOS or Windows.

Requirements (per official docs):

• Install the Computer Use plugin from Codex settings.
• macOS: grant Screen Recording + Accessibility permissions. Windows: keep the target app visible/foreground.
• Not available in EEA, UK, and Switzerland at launch.

Use it:

• Invoke by mentioning @Computer (or @<AppName>) in the prompt, or ask Codex to use computer use.
• Then drive a browser the same way as Method A: open cosmos.so / Pinterest, search the metaphor + mood, scroll, and screenshot strong boards.

Reference: developers.openai.com/codex/app/computer-use.

Method C: Web search fallback (any agent)

When no visual browser is available, use the agent's web search/fetch (Codex CLI and Claude both ship first-party web search):

1. Search e.g. "<metaphor> <mood> design inspiration site:cosmos.so", "<metaphor> moodboard pinterest", "<style> UI dribbble". 2. Fetch the top result pages and read titles, descriptions, tags, and any extractable palette/style notes. 3. Collect the source URLs and present them to the user as a clickable shortlist so they can open the visuals themselves. 4. Lean on named styles (e.g. "neo-brutalist", "claymorphism", "risograph", "blueprint/technical-drawing") to anchor the direction in words even without seeing every image.

Be honest about the limitation: you're reasoning from text + thumbnails, so confirm the visual direction with the user before locking it.

Where to look (platforms)

What to search for

• Phase 1.5: metaphor + mood (e.g. "explorer's journal, vintage, hand-drawn"), plus the named DNA you're leaning toward.
• Phase 6: the unrelated domain itself ("brutalist architecture grids", "botanical illustration palettes", "NASA mission patch design", "vintage scientific diagrams", "industrial machinery blueprints").

What to capture

For every reference set, record:

• 8–15 references (screenshots or URLs)
• Recurring patterns: color temperature, lighting, composition, shape language, texture, typography
• 3–5 transferable "steals" (Phase 6): the specific idea you'll borrow, not a wholesale copy

Feed these directly into Phase 2 (vocabulary) and Phase 3 (Design DNA).

Medium Playbooks — Translating the Design Language into a Deliverable

Once the Design Language Brief is locked, translate the world into the specific artifact. The brief is the source of truth; everything below is how the same world shows up per medium. Hand off to the matching production skill in this repo.

Contents

• Infographic
• Video storyboard
• Website
• Mobile app UI/UX

Infographic

The infographic is a single map of the world. Every section is a region of the same universe.

• Layout: one governing grid; sections = chapters of the world (mirror how the source method numbers steps 1→7).
• Icons & illustrations: drawn only from the Phase 2 vocabulary; honor the Phase 5 constraint (e.g. "everything hand-drawn").
• Color: the 3–5 DNA colors; one accent reserved for emphasis/numbers.
• Typography: one display voice (often world-flavored) + one readable body.
• Mascot (if any): appears as a guide/narrator threading the sections.
• Test: could a reader screenshot any one section and still know it belongs to this world?
• Hand off to: social-graphics, image-generation, brand-asset.

Video storyboard

A storyboard is the world in motion over time. Motion DNA matters most here.

• Frames: each frame is an artifact of the world; establish the world in the first 3 seconds.
• Motion: the Phase 3 motion philosophy governs every transition (e.g. "springy & playful" → overshoot eases; "calm & weightless" → slow fades/parallax).
• Beats: map a narrative arc (hook → build → payoff); annotate each beat with shot, on-screen elements (from vocabulary), motion, and audio/VO.
• Mascot (if any): often the narrator or guide.
• Texture & color: carry the DNA across every frame so cuts feel continuous.
• Hand off to: remotion-script-writer, product-video, creative-strategist.

Website

A website is an explorable world; users move through regions.

• Design tokens first: encode the DNA (colors → tokens, type scale, spacing, radii from shape families, motion durations/easings) before building components. → design-foundation, color-system, typography-system.
• Components: each component is an artifact (cards = the world's "objects"); reuse vocabulary shapes consistently. → component-architecture.
• Sections: hero establishes the world; each section is a region, not a generic "feature block."
• Motion: scroll/hover/transition motion all obey the one motion philosophy; respect prefers-reduced-motion.
• Constraint: the Phase 5 rule becomes a lint-able guideline (e.g. "no stock photos", "single accent color").
• Hand off to: frontend-orchestrator (it sequences the frontend-design skills).

Mobile app UI/UX

A mobile app is the world in your hand — small surfaces, so the world must read at a glance.

• Tokens & system: same as website; mobile spacing/touch targets. → design-foundation, layout-system.
• Signature surfaces: make the world unmistakable on the surfaces users see most — app icon, splash, empty states, loading, onboarding. These are where the mascot and constraint shine.
• Motion: micro-interactions express the motion DNA (the "feel" of taps, sheets, transitions). → interaction-physics.
• Components: a consistent component library drawn from the vocabulary. → component-architecture.
• Test: remove the logo from a screenshot — is the app still identifiable? (Originality Test Q3.)
• Hand off to: frontend-orchestrator.