From Hero to System

Turning Human Knowledge
into AI Skills

A practical guide for design architects

February 2026 · Prepared by Bob for Ako

The "Hero Knowledge" Problem

Every team has unwritten expertise trapped in one person's head.

Heroes don't scale. AI can — if you structure the knowledge.

The Core Insight

"The teams winning at AI aren't the ones with
the best models. They're the ones who've
packaged their knowledge best."

What Are Claude Skills?

Modular instruction packages that teach Claude
how to handle specific tasks or domains.

Think of them as "onboarding docs for AI"

Anatomy of a Skill

my-brand-skill/
├── SKILL.md           # Core instructions (required)
├── REFERENCE.md       # Supplemental info (optional)
├── resources/
│   ├── helper.py      # Executable scripts
│   └── examples.json  # Reference data
  

Minimum: one folder + one SKILL.md file

SKILL.md In Practice

---
name: brand-guidelines
description: >
  Apply company brand guidelines for marketing
  copy, presentations, and customer-facing content.
dependencies:
  - python3
---

# Brand Guidelines Skill

## Voice & Tone
- Professional but approachable
- Active voice preferred

## Color Usage
- Primary: #1A73E8 (trust blue)
- Error: #DE3E25 (destructive only)
- Never use raw hex — use semantic tokens

## ✅ Good
"We've updated your dashboard with new insights."

## ❌ Bad
"The UI has been refactored with enhanced data viz."
  

Smart Loading: 3 Tiers

10 skills loaded → only 1 fully expanded → token-efficient

Skills ≠ Output Styles

The Convergence

Everyone is solving the same problem — different shapes, same DNA.

Composable = can mix & combine multiple skills/rules · AGENTS.md = GitHub Copilot's instruction file format

Choosing Your Format

They're not mutually exclusive — combine as needed

Structuring Knowledge for AI

AI has zero tacit knowledge. Everything must be explicit.

The Power of Anti-Patterns

AI learns almost as much from what NOT to do.

## Common Mistakes (DO NOT)
- ❌ Using primitive color tokens directly (e.g., `red-6`)
- ❌ Hardcoding pixel values instead of spacing tokens
- ❌ Creating new variants when an existing one works
- ❌ Skipping loading/error states in components
  

The "new hire" test: If a smart new hire could follow
your instructions and produce 90%+ acceptable output,
your instructions are good enough for AI.

Tokens Without Intent

{
  "red-6": {
    "value": "#DE3E25",
    "type": "color"
  }
}
      

{
  "color-feedback-error": {
    "value": "#DE3E25",
    "description": "Error states:
      alerts, destructive buttons",
    "usage": ["Alert.error",
      "Button.destructive"],
    "pairedWith": [
      "color-feedback-errorText"]
  }
}
      

Design System → AI Bridge

AI-readability starts at Layer 2 · Guardrails live at Layer 4

Component Spec Example

# Component: Button

## Variants
- `primary`: Main actions (1 per section)
- `secondary`: Supporting actions
- `destructive`: Delete, irreversible actions

## Token Usage
| Property     | Token                         |
|------------- |-------------------------------|
| Background   | `color-interactive-primary`   |
| Text         | `color-text-onColor`          |
| Padding      | `spacing-component-btn-pad`   |
| Border radius| `radius-component-button`     |
| Min height   | `sizing-touch-target-min`     |

## Rules
- NEVER use raw hex values
- ALWAYS pair with appropriate text color token
- Maximum 1 primary button per section
- Destructive buttons require confirmation
  

Figma MCP: The Bridge

Connects your Figma designs directly to your IDE's AI agent

7 Principles of AI Knowledge

"Make it look professional" means nothing.
"16px body, 48px headers, neutral-700" means everything.

Knowledge Capture Process

Real-World Success Stories

Your 5-Phase Roadmap

🔄 Phase 5: Test & Iterate — ongoing, review monthly

The Minimum Viable Skill

If you only do ONE thing, create this file:

# Design System Quick Reference for AI

## Tokens (Use These, Not Raw Values)
- Primary action: `color-interactive-primary` (#1A73E8)
- Error: `color-feedback-error` (#DE3E25)
- Body text: `color-text-primary` (#1F2937)
- Spacing: sm (8px) · md (16px) · lg (24px)
- Border radius: `radius-default` (8px)

## Component Rules
- Use `` not `` — handles a11y
- Primary buttons: max 1 per section
- Cards always have 16px padding
- Forms: spacing-md between fields

## Do NOT
- ❌ Use raw hex colors
- ❌ Create new components when existing ones fit
- ❌ Skip loading/error states
  

90% of the value · 10% of the effort

Start Today: 15-Minute Win

Add description to your top 10 most-used tokens:

That's it. You've just made your design system AI-readable.

The Universal Pattern

All approaches converge on four pillars:

🔗 Emerging standard: agentskills.io

Key Takeaways

Further Reading

Thank you! 🙏

Research & presentation by Bob · February 2026