Samsen Internal Framework
This is Samsen's internal framework content for Transformation. It is read-only reference material.
Education Methodology — The Samsen Academy Approach¶
Philosophy¶
Samsen Academy teaches by shipping. Every session ends with a real artifact — not an exercise, not a sandbox experiment, but something that works in a real codebase. The methodology is built on the belief that designers learn tools by using them for real work, not by studying them abstractly.
The 6-Session Structure¶
Session 1: Foundation — What AI-Assisted Design Actually Means¶
Goal: Mental model shift.
The biggest barrier to adoption isn't technical skill — it's mindset. Designers arrive with preconceptions:
- "I need to learn to code" → No. You need to learn to describe what you want.
- "AI will replace me" → No. AI handles production. You handle decisions.
- "This is just another design-to-code tool" → No. It's a conversational workflow, not an export function.
Session 1 addresses these misconceptions directly. Includes live demonstration of the full workflow: Figma → Claude Code → browser → iterate → ship. No magic, no hand-waving. The designer sees exactly what happens.
Outcome: Designer understands the workflow conceptually and has seen it work end-to-end.
Session 2: Setup — Toolchain Configuration¶
Goal: Working environment.
Hands-on setup of the complete toolchain:
- Figma project with Variables configured
- Claude Code installed and authenticated
- MCP servers configured (Figma Console MCP, Design Systems MCP)
- CLAUDE.md created in the target repository
- First successful Claude Code interaction: "Read my Figma file and describe what you see"
Outcome: Designer has a working environment and has verified that Claude Code can read their Figma file.
Session 3: First Ship — Building a Real Component End-to-End¶
Goal: First production component.
The designer builds a real component from their actual design system:
- Select a component from Figma (start simple: a button, card, or badge)
- Describe it to Claude Code using token names
- Claude Code generates the component
- Review in browser/Storybook
- Iterate: "The padding is too tight. Use spacing-md instead."
- Claude Code commits to a branch
This session typically demonstrates the 70/30 principle: the first generation gets most of the way there, the remaining 30% is iteration.
Outcome: Designer has built and iterated on a real component using Claude Code.
Session 4: Design System Alignment — Token Architecture¶
Goal: Deep understanding of the bridge.
This is the most technical session, and the most important. It covers:
- How Figma Variables work at the structural level
- How CSS custom properties work
- The mapping between the two: naming conventions, value alignment, semantic layers
- How token alignment enables reliable AI output
- What happens when alignment breaks (demonstrations of failure modes)
Designers audit their own design system for alignment gaps and begin fixing them.
Outcome: Designer understands token architecture and can identify/fix alignment issues.
Session 5: Iteration — The 70/30 Principle¶
Goal: Efficient iteration workflow.
Dedicated to the review-and-iterate loop:
- Reviewing components in browser vs. comparing to Figma mockups
- Providing effective feedback to Claude Code (specific, token-referenced, context-rich)
- Handling edge cases: responsive behavior, dark mode, accessibility states
- Knowing when to iterate in Claude Code vs. when to update the Figma source
The 70/30 principle: AI produces 70% of the implementation quality on the first pass. The designer's value is in directing the remaining 30% — the refinements that make something feel right.
Outcome: Designer can efficiently iterate on AI-generated components to production quality.
Session 6: Production — Git Workflow and Shipping¶
Goal: Full production shipping capability.
The final session closes the loop:
- Creating branches
- Making commits with meaningful messages
- Opening pull requests
- Understanding the PR review process
- Reading visual diffs
- Merging to production
By the end of this session, the designer has shipped a component to a real production codebase through the full git workflow.
Outcome: Designer can independently ship components from Figma to production.
Pedagogical Principles¶
Learn by Doing, Not by Watching¶
Every session has hands-on exercises using the designer's actual project, not generic examples. The component they build in Session 3 is from their real design system. The tokens they audit in Session 4 are their real tokens.
Use Real Consequences¶
Working in real codebases with real git workflows means real consequences. A bad commit breaks the build. A wrong token produces the wrong color. This feedback is more effective than any exercise because it's immediately tangible.
Progressive Complexity¶
Sessions build on each other:
- Conceptual understanding (Session 1)
- Environmental setup (Session 2)
- Basic execution (Session 3)
- Technical depth (Session 4)
- Workflow refinement (Session 5)
- Full autonomy (Session 6)
No session requires knowledge that wasn't covered in a previous session.
Respect Designer Expertise¶
The curriculum never talks down to designers. It acknowledges that design expertise is the prerequisite — without strong design judgment, AI tools produce mediocre output regardless of technical skill. The sessions add a new capability to an existing expert, not teach a new discipline from scratch.
Delivery Formats¶
Cohort-Based (Primary)¶
Groups of 4-8 designers progressing through all 6 sessions together. Benefits:
- Peer learning and shared troubleshooting
- Consistent pace and accountability
- Group design reviews of AI-generated output
Self-Paced (Future)¶
Video-based sessions with exercises. The 194-video content library supports this format with Loom-style 60-90 second focused topics that map to and extend the session material.
Consulting Integration¶
For organizations, the 6-session curriculum integrates with the adoption framework:
- Sessions 1-2 align with Phase 1 (Foundation)
- Sessions 3-5 align with Phase 2 (Expansion)
- Session 6 aligns with Phase 3 (Integration)