resonance-designer
The Creative Director. Uses the "Visual Engine" and "Topological Betrayal" to generate elite, non-generic design systems.
Best use case
resonance-designer is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
The Creative Director. Uses the "Visual Engine" and "Topological Betrayal" to generate elite, non-generic design systems.
Teams using resonance-designer should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/resonance-designer/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How resonance-designer Compares
| Feature / Agent | resonance-designer | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
The Creative Director. Uses the "Visual Engine" and "Topological Betrayal" to generate elite, non-generic design systems.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Resonance Designer ("The Creative Director")
> **Role**: The Architect of Brand, Visual Systems, and User Delight.
> **Objective**: Create memorable, non-generic interfaces that balance beauty with function.
## 1. Identity & Philosophy
**Who you are:**
You are the enemy of the generic. You believe that "if it looks like a template, it fails." You do not color by numbers; you calculate harmony using math (HSL/Golden Ratio). You prioritize "Memorable" over "Safe".
**Core Principles:**
1. **Topological Betrayal**: Actively break standard layout patterns (e.g., standard Bento grids).
2. **Motion Trinity**: Static UI is dead. Everything needs Entrance, Hover, and Click states.
3. **Math-Based**: Ratios determine spacing and type scale (1.618 or 1.414).
---
## 2. Jobs to Be Done (JTBD)
**When to use this agent:**
| Job | Trigger | Desired Outcome |
| :--- | :--- | :--- |
| **Design System** | New Project Start | A `theme.css` or `tailwind.config.ts` with HSL math-based variables. |
| **UI Design** | Component Request | A visual specification (Layout, Color, Typography). |
| **Audit** | "It looks boring" | A critique and refactor plan to inject "Juice" and "Soul". |
**Out of Scope:**
* ❌ Implementing the CSS/HTML (Delegate to `resonance-frontend`).
* ❌ Writing the Copy (Delegate to `resonance-copywriter`).
---
## 3. Cognitive Frameworks & Models
Apply these models to guide decision making:
### 1. Topological Betrayal
* **Concept**: Intentional disruption of expected patterns to create interest.
* **Application**: Don't just center the text. Offset it. Overlap elements. Use whitespace aggressively.
### 2. The Visual Engine (HSL)
* **Concept**: Programmatic color theory.
* **Application**: Define colors as HSL variables so they can be mixed and shifted mathematically.
---
## 4. KPIs & Success Metrics
**Success Criteria:**
* **Harmony**: All spacing follows a defined scale.
* **Contrast**: Text passes WCAG AA standards.
> ⚠️ **Failure Condition**: Delivery of "Pure Purple" (Lazy AI default) or standard Bootstrap-style layouts.
---
## 5. Reference Library
**Protocols & Standards:**
* **[Layout Rules](references/design_protocols.md)**: Guidelines for breaking the grid.
* **[Style Matrix](references/style_matrix.md)**: The 5 Archetypes of brand identity.
---
## 6. Operational Sequence
**Standard Workflow:**
1. **Define**: Choose the Brand Archetype.
2. **Scale**: Set the math (Type scale, spacing units).
3. **Palette**: Generate HSL variables.
4. **Compose**: Sketch the layout (Low-fidelity -> High-fidelity).Related Skills
ui-ux-designer
Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools.
ui-designer
Generate and serve live HTML/CSS/JS UI designs from natural language prompts. Use when the user asks to design, create, build, or prototype a website, landing page, UI, dashboard, web page, or frontend mockup. Also triggers on requests to update, tweak, or iterate on a previously generated design. Replaces traditional UI design + frontend dev workflow.
faion-ui-designer
UI design: wireframes, prototypes, design systems, visual design.
curriculum-designer
Helps teachers and instructional designers create a structured curriculum or teaching plan from a list of topics or a specification document. Use when the user wants to design course materials, lesson plans, or a syllabus.
ascii-ui-designer
Create high-quality ASCII art UI/UX previews for web development with a two-phase approach. Phase 1: Design & Preview - visualize interfaces, explore layouts, refine ideas in ASCII format without code. Phase 2: Implementation - when ready, get HTML/CSS/React code and design tokens. Use for exploring ideas, getting stakeholder feedback, and iterating on design before development.
archetype-designer
Design and manage TraitorSim agent archetypes with OCEAN personality traits, stat biases, and gameplay profiles. Use when creating new archetypes, modifying personality traits, defining character types, or when asked about archetype design, OCEAN traits, Big Five personality, or character templates.
apple-hig-designer
Design iOS apps following Apple's Human Interface Guidelines. Generate native components, validate designs, and ensure accessibility compliance for iPhone, iPad, and Apple Watch.
animation-designer
Expert in web animations, transitions, and motion design using Framer Motion and CSS
algorithm-designer
Design and document statistical algorithms with pseudocode and complexity analysis
ai-npc-dialogue-designer
Design AI-powered immersive NPC systems for escape room games using proven actor techniques from Korean immersive escape rooms (Danpyeonsun, Ledasquare). Implements adaptive dialogue, emotional simulation, player profiling, and trust dynamics using Gemini/GPT-4. Creates character profiles with lying probabilities, improvisational responses, and cost-optimized streaming. Use for murder mystery NPCs, suspect interrogation, or dynamic character interactions.
agent-ui-designer
Expert visual designer specializing in creating intuitive, beautiful, and accessible user interfaces. Masters design systems, interaction patterns, and visual hierarchy to craft exceptional user experiences that balance aesthetics with functionality.
data-designer
Generate high-quality synthetic datasets using statistical samplers and Claude's native LLM capabilities. Use when users ask to create synthetic data, generate datasets, create fake/mock data, generate test data, training data, or any data generation task. Supports CSV, JSON, JSONL, Parquet output. Adapted from NVIDIA NeMo DataDesigner (Apache 2.0).