From Style Guide to AI-Ready Skill in Claude
From Style Guide to AI-Ready Skill in Claude
Built Triple Ring's style guide into a scalable design system, then translated it into a Claude skill, turning a static reference into an AI-ready tool that automatically generates on-brand output.
Built Triple Ring's style guide into a scalable design system, then translated it into a Claude skill, turning a static reference into an AI-ready tool that automatically generates on-brand output.
My Role
My Role
Visual Design, Design System
Visual Design, Design System
Timeline
Timeline
2026.07 - 2026.08
2026.07 - 2026.08
Tools Used
Tools Used
Figma, Claude
Figma, Claude
01 Overview
01 Overview
One system, built for less work
One system, built for less work
Established Triple Ring's core visual language, then structured it into tokens and components that are clean enough to teach Claude—turning a multi-step manual workflow into a few prompts.
Established Triple Ring's core visual language, then structured it into tokens and components that are clean enough to teach Claude—turning a multi-step manual workflow into a few prompts.
1
Write prompts to Claude for a first draft
2
Refine the AI-generated content
3
Place content into the PPT template
4
Create charts and visual aids manually
5
Add visuals to the slide deck
6
Ask the design team to review the visual
After
1
Feed Claude the relevant files for context
2
Ask Claude to generate a full presentation
3
Review the output and refine the slide deck
1
Feed Claude the relevant files for context
2
Ask Claude to generate a full presentation
3
Review the output and refine the slide deck
Before
1
Write prompts to Claude for a first draft
2
Refine the AI-generated content
3
Place content into the PPT template
4
Create charts and visual aids manually
5
Add visuals to the slide deck
6
Ask the design team to review the visual
02 Build the Foundation
02 Build the Foundation
VIsual VBL
VIsual VBL
The building blocks of the brand
The building blocks of the brand
Defined the foundational visual language, color, type, and imagery, that everything else in the system builds on.
Defined the foundational visual language, color, type, and imagery, that everything else in the system builds on.
UI VBL
UI VBL
From visual language to interface language
From visual language to interface language
Translated the visual foundation into UI-specific patterns: spacing, elevation, and interaction states ready for real screens.
Translated the visual foundation into UI-specific patterns: spacing, elevation, and interaction states ready for real screens.
Token & Style & Components
Token & Style & Components
Systemized into tokens and components
Systemized into tokens and components
Every value, color, spacing, and type became a token; every pattern became a reusable component, making the system consistent by default, not by memory.
Every value, color, spacing, and type became a token; every pattern became a reusable component, making the system consistent by default, not by memory.
03 Create Applications
03 Create Applications
New Homepage
New Homepage
Applied Tokens, Style, and Components to create a new cohesive homepage
Applied Tokens, Style, and Components to create a new cohesive homepage
With the new grid system, we ensure cohesive spacing and padding across pages. With components, I made designing new pages or sections easier.
With the new grid system, we ensure cohesive spacing and padding across pages. With components, I made designing new pages or sections easier.
Before
After
04 Define the Skills
04 Define the Skills
Teaching Claude the VBL and the system
Teaching Claude the VBL and the system
Took the finished design system and fed it into Claude, turning a static reference into a working skill that generates on-brand output without manual lookup each time.
Took the finished design system and fed it into Claude, turning a static reference into a working skill that generates on-brand output without manual lookup each time.
1
Audit the System
Compiled every token, style, and component from the design system into one structured reference
2
Structure for AI
Translated the system into clear rules and examples Claude could actually parse
3
Build the Skill
Packaged the rules into a Claude skill, ready to generate on-brand output on command
4
Test & Refine
Validated outputs against the real system, refining the skill until it stayed reliably on-brand
Branding Skill: A skill that knows the visual system
Branding Skill: A skill that knows the visual system
Trained Claude on the tokens, style, components, and visual rules from the system, so it can generate on-brand designs and assets automatically.
Trained Claude on the tokens, style, components, and visual rules from the system, so it can generate on-brand designs and assets automatically.
Voice Skill: A skill that knows how the company sound
Voice Skill: A skill that knows how the company sound
Trained Claude on brand voice and tone, so AI-generated content, from LinkedIn posts to newsletters, sounds like Triple Ring, not generic AI copy.
Trained Claude on brand voice and tone, so AI-generated content, from LinkedIn posts to newsletters, sounds like Triple Ring, not generic AI copy.
05 Generate Outputs
05 Generate Outputs
A system that scales past the design team
A system that scales past the design team
The branding and voice skills are set to roll out inside the company's Claude, giving 100+ employees a way to handle marketing copy and everyday presentations without needing a designer for every asset.
The branding and voice skills are set to roll out inside the company's Claude, giving 100+ employees a way to handle marketing copy and everyday presentations without needing a designer for every asset.
Chart
Chart
Before
After
System Flow
System Flow
Before
After
Presentation
Presentation
LinkedIn Post
LinkedIn Post
Examples
AI-generated Draft
The future of robotic surgery won't be limited by what has to be cleaned between procedures.
Conventional robotic platforms rely on reusable instruments and the sterilization cycles that come with them. As robotic surgery expands into more settings, the challenge is not simply making the instruments better. It requires rethinking sterility, workflow, and cost together.
Triple Ring explored that challenge through our work with StaplCam, developing a fully disposable robotic surgical platform that manages three tools with two hands using established laparoscopic motions, with custom HD camera, lighting, and display developed for the system.
The prototype demonstrated its capabilities in preclinical testing and is positioned to advance toward human clinical trials.
Read the full case study: https://www.tripleringtech.com/case-studies/single-use-surgical-robotics/
#SurgicalRobotics #MedTech #MedicalDevices #HealthcareInnovation #SmartMedicalDevices
AI-generated Draft
The future of robotic surgery won't be limited by what has to be cleaned between procedures.
Conventional robotic platforms rely on reusable instruments and the sterilization cycles that come with them. As robotic surgery expands into more settings, the challenge is not simply making the instruments better. It requires rethinking sterility, workflow, and cost together.
Triple Ring explored that challenge through our work with StaplCam, developing a fully disposable robotic surgical platform that manages three tools with two hands using established laparoscopic motions, with custom HD camera, lighting, and display developed for the system.
The prototype demonstrated its capabilities in preclinical testing and is positioned to advance toward human clinical trials.
Read the full case study: https://www.tripleringtech.com/case-studies/single-use-surgical-robotics/
#SurgicalRobotics #MedTech #MedicalDevices #HealthcareInnovation #SmartMedicalDevices
AI-generated Draft
The future of robotic surgery won't be limited by what has to be cleaned between procedures.
Conventional robotic platforms rely on reusable instruments and the sterilization cycles that come with them. As robotic surgery expands into more settings, the challenge is not simply making the instruments better. It requires rethinking sterility, workflow, and cost together.
Triple Ring explored that challenge through our work with StaplCam, developing a fully disposable robotic surgical platform that manages three tools with two hands using established laparoscopic motions, with custom HD camera, lighting, and display developed for the system.
The prototype demonstrated its capabilities in preclinical testing and is positioned to advance toward human clinical trials.
Read the full case study: https://www.tripleringtech.com/case-studies/single-use-surgical-robotics/
#SurgicalRobotics #MedTech #MedicalDevices #HealthcareInnovation #SmartMedicalDevices
