Skip to content

Samsen Internal Framework

This is Samsen's internal framework content for Transformation. It is read-only reference material.

Designer Skillset Evolution

What Changes

The Shipping AI Designer has the same core design skills as any expert product designer. What changes is how those skills are applied and what new competencies supplement them.

Skills That Stay the Same

These are non-negotiable foundations. AI doesn't replace them:

  • Visual design judgment — Composition, hierarchy, typography, color theory, spatial relationships. The ability to look at something and know whether it's right.
  • User research and problem framing — Understanding who you're designing for and what problem you're solving. AI can't do this.
  • Information architecture — Structuring content, navigation, and flow. This is strategic thinking that precedes any implementation.
  • Interaction design — Defining how things behave, what state transitions look like, how feedback is communicated.
  • Systems thinking — Understanding how components relate to each other, how changes propagate, how consistency is maintained across a product.

Skills That Evolve

From "Pixel Specs" to "Natural Language Specs"

Before: Designers create detailed redlines, annotated mockups, and handoff documentation.

After: Designers describe implementation requirements in natural language with enough specificity for AI to act on. Instead of "spacing: 16px, color: #2563eb, font-size: 14px", they say "use component padding token, primary action color, caption size."

The skill shifts from visual annotation to precise verbal description. Designers who can articulate intent clearly get better AI output.

From "QA Against Mockups" to "Review in Browser"

Before: Designers compare screenshots against Figma designs, filing bugs for pixel-level deviations.

After: Designers review components directly in the browser (or Storybook), providing feedback through conversation. "The line height feels too tight on mobile" replaces "line-height should be 1.5 per the spec."

The skill shifts from pixel-matching to holistic evaluation. Reviewing in browser is actually more accurate — it shows real rendering, real responsive behavior, real font rendering.

From "Handoff Preparation" to "Context Engineering"

Before: Designers spend hours preparing handoff documentation: specs, redlines, interaction notes, edge case documentation.

After: Designers prepare context: ensure token alignment, write component specs in markdown, maintain CLAUDE.md. The preparation enables AI to work; the handoff is the AI's output.

The skill shifts from documenting decisions for humans to structuring decisions for AI consumption. Both require precision, but the format changes.

New Competencies

Token-Level Design System Literacy

Understanding the design system not just visually (what it looks like) but structurally (how it's organized):

  • How tokens are named and layered (primitive → semantic → component)
  • How Figma variables map to CSS custom properties
  • How changing a semantic token cascades through components
  • Where component-level overrides are appropriate vs. where they break the system

This is deeper than most designers currently go. But it's learnable and it's the single most impactful skill for AI-assisted design quality.

Natural Language Precision

The ability to describe what you want with enough specificity that AI produces the right thing:

Vague: "Make it look better" Precise: "Increase the padding between the image and the text to spacing-md. The title should use heading-sm weight-semibold. Add a subtle border using border-subtle token."

This isn't "learning to code." It's learning to communicate implementation intent with the same precision you'd use in a spec — but verbally, in conversation.

Browser-Based Evaluation

Shifting from evaluating static designs to evaluating live rendered output:

  • Checking responsive behavior across breakpoints
  • Evaluating real typography rendering (not Figma's approximation)
  • Testing interactive states (hover, focus, active, disabled)
  • Verifying accessibility (keyboard navigation, screen reader behavior)
  • Assessing animation and transition quality

Basic Git Literacy

Not programming. Just the workflow:

  • What a branch is and why you work on one
  • What a commit is (a saved checkpoint)
  • What a pull request is (a proposal to merge your work)
  • How to review a visual diff
  • How to approve or request changes

Claude Code handles the actual git operations. The designer needs to understand the concept, not the commands.

The Learning Arc (Samsen Academy)

The Samsen Academy 6-session structure maps to this skillset evolution:

Session Skill Focus
1. Foundation Mental model shift: what AI-assisted design means, what changes and what doesn't
2. Setup Toolchain literacy: Figma, Claude Code, MCP configuration
3. First Ship Token-level literacy + natural language precision: build a real component end-to-end
4. Design System Alignment Deep token architecture: Figma variables ↔ CSS, the bridge that enables reliable AI output
5. Iteration Browser-based evaluation + the 70/30 principle: reviewing and refining AI output
6. Production Git literacy: branching, PRs, shipping to real codebases

Each session builds on the previous one. By session 6, the designer has shipped a real component to a production codebase — the full loop.

What Designers Don't Need to Learn

  • Programming languages — Not JavaScript, not CSS-in-depth, not TypeScript. Claude Code writes the code.
  • Build tools — Not Webpack, not Vite, not the CI pipeline. These are configured once and AI interacts with them.
  • Testing frameworks — Not Jest, not Playwright, not Chromatic internals. AI generates tests; designers review visual output.
  • DevOps — Not deployment, not hosting, not infrastructure. This stays with engineering.

The boundary is clear: designers direct implementation. They don't perform it.